From 0093771f45c7626a959a501951f4c1e8f532351b Mon Sep 17 00:00:00 2001 From: ImCoolNowRight Date: Wed, 30 Oct 2024 15:12:55 +0000 Subject: [PATCH] deploy: 0cf0522baa5fd72465d169e314a7c4006343a9f9 --- 3878.8aedeb0c.iframe.bundle.js.map | 1 - ...undle.js => 3878.af02a820.iframe.bundle.js | 9 +- 3878.af02a820.iframe.bundle.js.map | 1 + ...undle.js => 5338.5ebba81c.iframe.bundle.js | 9 +- 5338.5ebba81c.iframe.bundle.js.map | 1 + 5338.865bde80.iframe.bundle.js.map | 1 - ...lWrapper-mdx.0c8e88dd.iframe.bundle.js.map | 1 - ...crollWrapper-mdx.7947cefc.iframe.bundle.js | 9 +- ...lWrapper-mdx.7947cefc.iframe.bundle.js.map | 1 + ...pper-stories.7ae49e1b.iframe.bundle.js.map | 1 - ...lWrapper-stories.bc7b4881.iframe.bundle.js | 9 +- ...pper-stories.bc7b4881.iframe.bundle.js.map | 1 + ...face-Surface-mdx.305f625b.iframe.bundle.js | 9 +- ...-Surface-mdx.305f625b.iframe.bundle.js.map | 1 + ...-Surface-mdx.676d6066.iframe.bundle.js.map | 1 - ...face-stories.135cd381.iframe.bundle.js.map | 1 - ...-Surface-stories.5f675b7b.iframe.bundle.js | 9 +- ...face-stories.5f675b7b.iframe.bundle.js.map | 1 + ...bBar-Tab-mdx.6b17b24d.iframe.bundle.js.map | 1 - ...s-TabBar-Tab-mdx.c78effa6.iframe.bundle.js | 9 +- ...bBar-Tab-mdx.c78effa6.iframe.bundle.js.map | 1 + ...-Tab-stories.80bed314.iframe.bundle.js.map | 1 - ...bBar-Tab-stories.a36d3f7f.iframe.bundle.js | 9 +- ...-Tab-stories.a36d3f7f.iframe.bundle.js.map | 1 + ...ile-Tile-mdx.7f92799f.iframe.bundle.js.map | 1 - ...ts-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js | 9 +- ...ile-Tile-mdx.8d4c1db7.iframe.bundle.js.map | 1 + ...ile-Tile-stories.5446fd7d.iframe.bundle.js | 9 +- ...Tile-stories.5446fd7d.iframe.bundle.js.map | 1 + ...Tile-stories.54e9a9bd.iframe.bundle.js.map | 1 - iframe.html | 2 +- ...ithEditItems-mdx.27fb3298.iframe.bundle.js | 101 +++++++++++------- ...ditItems-mdx.27fb3298.iframe.bundle.js.map | 1 + ...ditItems-mdx.5e447180.iframe.bundle.js.map | 1 - ...tems-stories.411720ab.iframe.bundle.js.map | 1 - ...ditItems-stories.ba88ad18.iframe.bundle.js | 101 +++++++++++------- ...tems-stories.ba88ad18.iframe.bundle.js.map | 1 + ...ithHandleKey-mdx.8215072f.iframe.bundle.js | 9 +- ...andleKey-mdx.8215072f.iframe.bundle.js.map | 1 + ...andleKey-mdx.b7ddd5b6.iframe.bundle.js.map | 1 - ...eKey-stories.8a46887d.iframe.bundle.js.map | 1 - ...andleKey-stories.f0264e6e.iframe.bundle.js | 9 +- ...eKey-stories.f0264e6e.iframe.bundle.js.map | 1 + ...t-withLayout-mdx.8ac01316.iframe.bundle.js | 9 +- ...thLayout-mdx.8ac01316.iframe.bundle.js.map | 1 + ...thLayout-mdx.ab9b7e55.iframe.bundle.js.map | 1 - ...yout-stories.29e02612.iframe.bundle.js.map | 1 - ...thLayout-stories.dde127cb.iframe.bundle.js | 9 +- ...yout-stories.dde127cb.iframe.bundle.js.map | 1 + ...ongPress-mdx.005470d9.iframe.bundle.js.map | 1 - ...ithLongPress-mdx.18696277.iframe.bundle.js | 9 +- ...ongPress-mdx.18696277.iframe.bundle.js.map | 1 + ...ongPress-stories.05260a60.iframe.bundle.js | 9 +- ...ress-stories.05260a60.iframe.bundle.js.map | 1 + ...ress-stories.b806bbe8.iframe.bundle.js.map | 1 - project.json | 2 +- ... => runtime~main.3a8ab87d.iframe.bundle.js | 4 +- ...runtime~main.3a8ab87d.iframe.bundle.js.map | 2 +- sb-addons/storybook-6/manager-bundle.js | 2 +- 59 files changed, 256 insertions(+), 138 deletions(-) delete mode 100644 3878.8aedeb0c.iframe.bundle.js.map rename 3878.8aedeb0c.iframe.bundle.js => 3878.af02a820.iframe.bundle.js (99%) create mode 100644 3878.af02a820.iframe.bundle.js.map rename 5338.865bde80.iframe.bundle.js => 5338.5ebba81c.iframe.bundle.js (99%) create mode 100644 5338.5ebba81c.iframe.bundle.js.map delete mode 100644 5338.865bde80.iframe.bundle.js.map delete mode 100644 components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js.map rename components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js => components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js (99%) create mode 100644 components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js.map delete mode 100644 components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js.map rename components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js => components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js (99%) create mode 100644 components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js.map rename components-Surface-Surface-mdx.676d6066.iframe.bundle.js => components-Surface-Surface-mdx.305f625b.iframe.bundle.js (99%) create mode 100644 components-Surface-Surface-mdx.305f625b.iframe.bundle.js.map delete mode 100644 components-Surface-Surface-mdx.676d6066.iframe.bundle.js.map delete mode 100644 components-Surface-Surface-stories.135cd381.iframe.bundle.js.map rename components-Surface-Surface-stories.135cd381.iframe.bundle.js => components-Surface-Surface-stories.5f675b7b.iframe.bundle.js (98%) create mode 100644 components-Surface-Surface-stories.5f675b7b.iframe.bundle.js.map delete mode 100644 components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js.map rename components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js => components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js (99%) create mode 100644 components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js.map delete mode 100644 components-TabBar-Tab-stories.80bed314.iframe.bundle.js.map rename components-TabBar-Tab-stories.80bed314.iframe.bundle.js => components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js (97%) create mode 100644 components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js.map delete mode 100644 components-Tile-Tile-mdx.7f92799f.iframe.bundle.js.map rename components-Tile-Tile-mdx.7f92799f.iframe.bundle.js => components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js (99%) create mode 100644 components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js.map rename components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js => components-Tile-Tile-stories.5446fd7d.iframe.bundle.js (99%) create mode 100644 components-Tile-Tile-stories.5446fd7d.iframe.bundle.js.map delete mode 100644 components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js.map rename mixins-withEditItems-withEditItems-mdx.5e447180.iframe.bundle.js => mixins-withEditItems-withEditItems-mdx.27fb3298.iframe.bundle.js (92%) create mode 100644 mixins-withEditItems-withEditItems-mdx.27fb3298.iframe.bundle.js.map delete mode 100644 mixins-withEditItems-withEditItems-mdx.5e447180.iframe.bundle.js.map delete mode 100644 mixins-withEditItems-withEditItems-stories.411720ab.iframe.bundle.js.map rename mixins-withEditItems-withEditItems-stories.411720ab.iframe.bundle.js => mixins-withEditItems-withEditItems-stories.ba88ad18.iframe.bundle.js (89%) create mode 100644 mixins-withEditItems-withEditItems-stories.ba88ad18.iframe.bundle.js.map rename mixins-withHandleKey-withHandleKey-mdx.b7ddd5b6.iframe.bundle.js => mixins-withHandleKey-withHandleKey-mdx.8215072f.iframe.bundle.js (98%) create mode 100644 mixins-withHandleKey-withHandleKey-mdx.8215072f.iframe.bundle.js.map delete mode 100644 mixins-withHandleKey-withHandleKey-mdx.b7ddd5b6.iframe.bundle.js.map delete mode 100644 mixins-withHandleKey-withHandleKey-stories.8a46887d.iframe.bundle.js.map rename mixins-withHandleKey-withHandleKey-stories.8a46887d.iframe.bundle.js => mixins-withHandleKey-withHandleKey-stories.f0264e6e.iframe.bundle.js (98%) create mode 100644 mixins-withHandleKey-withHandleKey-stories.f0264e6e.iframe.bundle.js.map rename mixins-withLayout-withLayout-mdx.ab9b7e55.iframe.bundle.js => mixins-withLayout-withLayout-mdx.8ac01316.iframe.bundle.js (99%) create mode 100644 mixins-withLayout-withLayout-mdx.8ac01316.iframe.bundle.js.map delete mode 100644 mixins-withLayout-withLayout-mdx.ab9b7e55.iframe.bundle.js.map delete mode 100644 mixins-withLayout-withLayout-stories.29e02612.iframe.bundle.js.map rename mixins-withLayout-withLayout-stories.29e02612.iframe.bundle.js => mixins-withLayout-withLayout-stories.dde127cb.iframe.bundle.js (97%) create mode 100644 mixins-withLayout-withLayout-stories.dde127cb.iframe.bundle.js.map delete mode 100644 mixins-withLongPress-withLongPress-mdx.005470d9.iframe.bundle.js.map rename mixins-withLongPress-withLongPress-mdx.005470d9.iframe.bundle.js => mixins-withLongPress-withLongPress-mdx.18696277.iframe.bundle.js (99%) create mode 100644 mixins-withLongPress-withLongPress-mdx.18696277.iframe.bundle.js.map rename mixins-withLongPress-withLongPress-stories.b806bbe8.iframe.bundle.js => mixins-withLongPress-withLongPress-stories.05260a60.iframe.bundle.js (98%) create mode 100644 mixins-withLongPress-withLongPress-stories.05260a60.iframe.bundle.js.map delete mode 100644 mixins-withLongPress-withLongPress-stories.b806bbe8.iframe.bundle.js.map rename runtime~main.b6c83c68.iframe.bundle.js => runtime~main.3a8ab87d.iframe.bundle.js (95%) rename runtime~main.b6c83c68.iframe.bundle.js.map => runtime~main.3a8ab87d.iframe.bundle.js.map (94%) diff --git a/3878.8aedeb0c.iframe.bundle.js.map b/3878.8aedeb0c.iframe.bundle.js.map deleted file mode 100644 index 8fca21b5a..000000000 --- a/3878.8aedeb0c.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"3878.8aedeb0c.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAEA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AALA;AACA;AAAA;AAAA;AAAA;AA5DA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Card/Card.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Card/Card.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport utils from '../../utils';\n\nexport const base = theme => ({\n height: theme.spacer.xxl * 12,\n paddingHorizontal: theme.spacer.xl,\n paddingVertical: theme.spacer.xl,\n radius: theme.radius.md,\n titleTextStyle: {\n ...theme.typography.headline1,\n wordWrap: true,\n maxLines: 2,\n textColor: theme.color.textNeutral\n },\n width: utils.getWidthByUpCount(theme, 6)\n});\n\nexport const mode = theme => ({\n focused: {\n tone: {\n neutral: {\n backgroundColor: theme.color.interactiveNeutralFocusSoft\n },\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocusSoft\n },\n brand: {\n backgroundColor: theme.color.interactiveBrandFocusSoft\n }\n }\n },\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled }\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport * as styles from './Card.styles';\nimport TextBox from '../TextBox';\nimport Surface from '../Surface';\n\nexport default class Card extends Surface {\n static get __componentName() {\n return 'Card';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [...super.properties, 'title'];\n }\n\n static get tags() {\n return [...super.tags, 'Title'];\n }\n\n static _template() {\n return {\n ...super._template(),\n Title: {\n type: TextBox,\n signals: {\n textBoxChanged: '_updatePositions'\n }\n }\n };\n }\n\n _update() {\n super._update();\n this._updateTitle();\n this._updatePositions();\n }\n\n _updatePositions() {\n this._updateTitlePosition();\n }\n\n _updateTitle() {\n this._Title.patch({\n content: this.title,\n style: {\n textStyle: {\n ...this.style.titleTextStyle,\n wordWrapWidth: this._calculateTextWidth()\n }\n }\n });\n }\n\n _calculateTextWidth() {\n return this.w - this.style.paddingHorizontal * 2;\n }\n\n _updateTitlePosition() {\n this._Title.x = this.style.paddingHorizontal;\n this._Title.y = this.style.paddingVertical;\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n return this._announce || (this._Title && this._Title.announce);\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/3878.8aedeb0c.iframe.bundle.js b/3878.af02a820.iframe.bundle.js similarity index 99% rename from 3878.8aedeb0c.iframe.bundle.js rename to 3878.af02a820.iframe.bundle.js index 5aa73b23a..73cd56d3e 100644 --- a/3878.8aedeb0c.iframe.bundle.js +++ b/3878.af02a820.iframe.bundle.js @@ -347,6 +347,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -359,7 +364,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -631,4 +636,4 @@ var GenericType = function GenericType(_ref7) { /***/ }) }]); -//# sourceMappingURL=3878.8aedeb0c.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=3878.af02a820.iframe.bundle.js.map \ No newline at end of file diff --git a/3878.af02a820.iframe.bundle.js.map b/3878.af02a820.iframe.bundle.js.map new file mode 100644 index 000000000..caf17cd3b --- /dev/null +++ b/3878.af02a820.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"3878.af02a820.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAEA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AALA;AACA;AAAA;AAAA;AAAA;AA5DA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Card/Card.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Card/Card.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport utils from '../../utils';\n\nexport const base = theme => ({\n height: theme.spacer.xxl * 12,\n paddingHorizontal: theme.spacer.xl,\n paddingVertical: theme.spacer.xl,\n radius: theme.radius.md,\n titleTextStyle: {\n ...theme.typography.headline1,\n wordWrap: true,\n maxLines: 2,\n textColor: theme.color.textNeutral\n },\n width: utils.getWidthByUpCount(theme, 6)\n});\n\nexport const mode = theme => ({\n focused: {\n tone: {\n neutral: {\n backgroundColor: theme.color.interactiveNeutralFocusSoft\n },\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocusSoft\n },\n brand: {\n backgroundColor: theme.color.interactiveBrandFocusSoft\n }\n }\n },\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled }\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport * as styles from './Card.styles';\nimport TextBox from '../TextBox';\nimport Surface from '../Surface';\n\nexport default class Card extends Surface {\n static get __componentName() {\n return 'Card';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [...super.properties, 'title'];\n }\n\n static get tags() {\n return [...super.tags, 'Title'];\n }\n\n static _template() {\n return {\n ...super._template(),\n Title: {\n type: TextBox,\n signals: {\n textBoxChanged: '_updatePositions'\n }\n }\n };\n }\n\n _update() {\n super._update();\n this._updateTitle();\n this._updatePositions();\n }\n\n _updatePositions() {\n this._updateTitlePosition();\n }\n\n _updateTitle() {\n this._Title.patch({\n content: this.title,\n style: {\n textStyle: {\n ...this.style.titleTextStyle,\n wordWrapWidth: this._calculateTextWidth()\n }\n }\n });\n }\n\n _calculateTextWidth() {\n return this.w - this.style.paddingHorizontal * 2;\n }\n\n _updateTitlePosition() {\n this._Title.x = this.style.paddingHorizontal;\n this._Title.y = this.style.paddingVertical;\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n return this._announce || (this._Title && this._Title.announce);\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/5338.865bde80.iframe.bundle.js b/5338.5ebba81c.iframe.bundle.js similarity index 99% rename from 5338.865bde80.iframe.bundle.js rename to 5338.5ebba81c.iframe.bundle.js index 4ee5dc8e0..92163df29 100644 --- a/5338.865bde80.iframe.bundle.js +++ b/5338.5ebba81c.iframe.bundle.js @@ -793,6 +793,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -805,7 +810,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -852,4 +857,4 @@ var Surface = /*#__PURE__*/function (_Base) { /***/ }) }]); -//# sourceMappingURL=5338.865bde80.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=5338.5ebba81c.iframe.bundle.js.map \ No newline at end of file diff --git a/5338.5ebba81c.iframe.bundle.js.map b/5338.5ebba81c.iframe.bundle.js.map new file mode 100644 index 000000000..a3e186a14 --- /dev/null +++ b/5338.5ebba81c.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"5338.5ebba81c.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAJA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAMA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAEA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAMA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AALA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAEA;AACA;AAAA;AAxBA;AACA;AAAA;AAAA;AAAA;AA0BA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAzbA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Button/Button.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Button/Button.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getWidthByColumnSpan } from '../../utils';\n\nexport const base = theme => ({\n width: 0,\n justify: 'center',\n minWidth: getWidthByColumnSpan(theme, 3),\n paddingX: theme.spacer.xxxl,\n paddingXNoTitle: theme.spacer.xl,\n paddingY: theme.spacer.xl,\n radius: theme.radius.sm,\n contentSpacing: theme.spacer.md,\n itemSpacing: theme.spacer.md,\n textStyle: {\n ...theme.typography.button1,\n maxLines: 1,\n textColor: theme.color.textNeutral\n },\n contentColor: theme.color.fillNeutral\n});\n\nexport const mode = theme => ({\n focused: {\n textStyle: { textColor: theme.color.textInverse },\n contentColor: theme.color.fillInverse,\n tone: {\n inverse: {\n textStyle: { textColor: theme.color.textNeutral },\n contentColor: theme.color.fillNeutral\n },\n brand: {\n contentColor: theme.color.fillNeutral\n }\n }\n },\n disabled: {\n textStyle: { textColor: theme.color.textNeutralDisabled },\n contentColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport * as styles from './Button.styles';\nimport Row from '../Row';\nimport Surface from '../Surface';\nimport TextBox from '../TextBox'; // There seams to be some issue with the circular dependency here\n\n/**\n * Button Component\n *\n * Generic Button Component that handles setting text icon and checkbox\n */\nexport default class Button extends Surface {\n static get __componentName() {\n return 'Button';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return ['fixed', 'justify', 'prefix', 'suffix', 'title'];\n }\n\n static get aliasStyles() {\n return [{ prev: 'titlePadding', curr: 'contentSpacing' }];\n }\n\n static get tags() {\n return [\n ...super.tags,\n 'Content',\n { name: 'TextWrapper', path: 'Content.TextWrapper' },\n { name: 'Title', path: 'Content.TextWrapper.Title' },\n { name: 'Prefix', path: 'Content.Prefix' },\n { name: 'Suffix', path: 'Content.Suffix' }\n ];\n }\n\n static _template() {\n return {\n ...super._template(),\n Content: {\n mount: 0.5,\n x: w => w / 2,\n y: h => h / 2,\n zIndex: 2 // ensure content (title) is rendered above Surface Background\n }\n };\n }\n\n _update() {\n this._updatePrefix();\n this._updateTitle();\n this._updateSuffix();\n this._updateAllPositioning();\n this._updateTruncation();\n }\n\n _updateAllPositioning() {\n this._updatePositions();\n this._updateContentDimensions();\n this._updateSurfaceDimensions();\n this._updateContentPosition();\n // delaying the super._update call so we update the surface sizing after the button has finished updating\n super._update();\n }\n\n $itemChanged() {\n this._updateAllPositioning();\n this._updateTruncation();\n }\n\n _onTitleTextBoxChanged() {\n this._updateAllPositioning();\n }\n\n _updatePositions() {\n if (this._hasPrefix && this._Prefix !== undefined) {\n this._Prefix.x = this._prefixX;\n }\n if (this._hasTitle) {\n this._TextWrapper.x = this._titleX;\n }\n if (this._hasSuffix && this._Suffix !== undefined) {\n this._Suffix.x = this._suffixX;\n }\n }\n\n _updatePrefix() {\n const prefixString = JSON.stringify(this.prefix);\n if (this.prefix) {\n let prefixPatch = {\n style: {\n itemSpacing: this.style.itemSpacing\n }\n };\n if (!this._Prefix) {\n prefixPatch = {\n ...this._rowProps,\n ...prefixPatch\n };\n }\n this._Content.patch({ Prefix: prefixPatch });\n this._updatePrefixSuffixStyles('prefix');\n } else {\n this._Content.patch({ Prefix: undefined });\n }\n this._prevPrefix = prefixString;\n }\n\n _updatePrefixSuffixStyles(type = 'prefix') {\n /**\n * Repatching all items re-renders all the components in the Prefix/Suffix Rows.\n * This can cause items to shift while their layout in the Row is re-calculated if\n * any of the items do not have width or height on their initial render (ex. an Icon\n * does not have width and height until after its texture loads).\n * If the contents of the Prefix/Suffix are the same components and this update was triggered\n * from something else (ex. a change in mode), only update the styles applied to the\n * items in the Prefix (ex. updating the color to the value appropriate to the new mode).\n */\n const map = {\n prefix: {\n tag: this._Prefix,\n prop: this.prefix,\n prevProp: this._prevPrefix\n },\n suffix: {\n tag: this._Suffix,\n prop: this.suffix,\n prevProp: this._prevSuffix\n }\n };\n const { tag, prop } = map[type];\n let { prevProp } = map[type];\n const propString = JSON.stringify(prop);\n\n if (propString !== prevProp) {\n prevProp = propString;\n tag.items = this._addButtonProps(prop);\n } else {\n tag.Items.children.forEach((item, idx) => {\n item.color = Array.isArray(prop) ? prop[idx].color : prop.color;\n item.style = {\n ...item.style,\n color: this.style.contentColor\n };\n });\n }\n }\n\n _updateTitle() {\n if (this._hasTitle) {\n let titlePatch = {\n content: this.title,\n style: { textStyle: this.style.textStyle }\n };\n if (!this._Title) {\n titlePatch = {\n type: TextBox,\n mountY: 0.5,\n y: h => h / 2,\n signals: {\n textBoxChanged: '_onTitleTextBoxChanged'\n },\n ...titlePatch\n };\n }\n this._Content.patch({\n TextWrapper: {\n mountY: 0.5,\n Title: titlePatch\n }\n });\n } else {\n this._Content.patch({ TextWrapper: { Title: undefined } });\n }\n }\n\n _updateSuffix() {\n if (this.suffix) {\n let suffixPatch = {\n style: {\n itemSpacing: this.style.itemSpacing\n }\n };\n if (!this._Suffix) {\n suffixPatch = {\n ...this._rowProps,\n ...suffixPatch\n };\n }\n this._Content.patch({ Suffix: suffixPatch });\n this._updatePrefixSuffixStyles('suffix');\n } else {\n this._Content.patch({ Suffix: undefined });\n }\n }\n\n _updateTruncation() {\n /**\n * needs to run before rest of content updates to prevent a bug causing text\n * to sometimes truncate and then un-truncate(with no width change) when\n * toggling fixed after toggling focus\n */\n if (this._Title) {\n this._Title.patch({\n style: {\n textStyle: {\n ...this.style.textStyle,\n wordWrap: this.fixed,\n wordWrapWidth: this.fixed ? this._fixedWordWrapWidth : 0\n }\n }\n });\n }\n }\n\n _updateContentDimensions() {\n const contentDimensionsPatch = {};\n const y = this.h / 2;\n\n // reference transition targets to ensure we aren't checking against intermittent values\n if (this._Content.transition('w').targetValue !== this._contentW) {\n this._Content.w = this._contentW;\n }\n\n if (this._Content.y !== y) {\n contentDimensionsPatch.y = y;\n }\n\n if (Object.keys(contentDimensionsPatch).length > 0) {\n this._Content.patch(contentDimensionsPatch);\n }\n }\n\n _updateContentPosition() {\n this._Content.patch(this._contentProps);\n }\n\n _updateSurfaceDimensions() {\n let newWidth = this.w;\n if (this.fixed) {\n newWidth = this._w;\n } else {\n newWidth = this._calcDynamicWidth();\n }\n\n if (newWidth !== this.w) {\n this.w = newWidth;\n }\n\n // In order to ensure the \"hSetByUser\" flag is not set to true,\n // skip over \"set h\" by directly updating \"_h\"\n // Using the \"get h\" return statement does not force an update to the inspector,\n // whereas this will ensure the \"height\" attribute is updated\n if (!this._hSetByUser && !this.style.h) {\n this._h = this.style.textStyle.lineHeight + this.style.paddingY * 2;\n }\n\n // TODO breaks row resizing if this is wrapped in the width conditional above\n this.fireAncestors('$itemChanged');\n }\n\n _calcDynamicWidth() {\n // if no title, ignore minWidth and use prefix/suffix width\n // when the title is collapsed, width should be the same as if there is no title\n return (!this._hasTitle && (this._hasPrefix || this._hasSuffix)) ||\n (this._Title &&\n !this._Title.visible &&\n (this._hasPrefix || this._hasSuffix))\n ? this._contentW + this._paddingX\n : Math.max(this._contentW + this._paddingX, this.style.minWidth);\n }\n\n _addButtonProps(arr) {\n const items = Array.isArray(arr) ? arr : [arr];\n return items.map(item => ({\n ...this._buttonProps,\n ...item,\n style: {\n color: this.style.contentColor,\n ...item.style\n }\n }));\n }\n\n _getJustify() {\n return !!this._justify ? this._justify : this.style.justify;\n }\n\n get _contentProps() {\n let mountX;\n let x;\n\n switch (this.justify) {\n case 'left':\n mountX = 0;\n x = this._paddingLeft;\n break;\n case 'right':\n mountX = 1;\n x = this.w - this._paddingRight;\n break;\n case 'center':\n default:\n mountX = 0.5;\n x = this.w / 2;\n break;\n }\n return { mountX, x };\n }\n\n get _buttonProps() {\n return {\n centerInParent: true,\n mode: this.mode\n };\n }\n\n get _hasPrefix() {\n return !!(this.prefix && Object.keys(this.prefix).length);\n }\n\n get _prefixW() {\n return this._hasPrefix && this._Prefix !== undefined ? this._Prefix.w : 0;\n }\n\n get _prefixX() {\n return 0;\n }\n\n get _hasTitle() {\n return !!this.title;\n }\n\n get _titleW() {\n // get the pre-calculated text width of the title to solve some race condition bugs\n if (\n this._hasTitle &&\n this._Title &&\n this._Title._Text &&\n this._Title.visible\n ) {\n return this._Title.w;\n }\n return 0;\n }\n\n get _titleX() {\n return this._hasPrefix ? this._prefixW + this.style.contentSpacing : 0;\n }\n\n get _hasSuffix() {\n return !!(this.suffix && Object.keys(this.suffix).length);\n }\n\n get _suffixW() {\n return this._hasSuffix && this._Suffix !== undefined ? this._Suffix.w : 0;\n }\n\n get _suffixX() {\n if (this._hasTitle) {\n return this._titleW + this._TextWrapper.x + this.style.contentSpacing;\n } else if (this._hasPrefix) {\n return this._prefixW + this.style.itemSpacing;\n }\n return 0;\n }\n\n get _contentW() {\n if (this._hasSuffix) {\n return this._suffixX + this._suffixW;\n } else if (this._hasTitle && this._Title && this._Title.visible) {\n return this._titleX + this._titleW;\n } else if (this._hasPrefix) {\n return this._prefixX + this._prefixW;\n }\n return 0;\n }\n\n get _rowProps() {\n return {\n type: Row,\n mountY: 0.5,\n autoResizeHeight: true,\n autoResizeWidth: true\n };\n }\n\n get _totalTitlePaddingX() {\n let totalTitlePadding = 0;\n if (this._hasPrefix) {\n totalTitlePadding += this.style.contentSpacing;\n }\n if (this._hasSuffix) {\n totalTitlePadding += this.style.contentSpacing;\n }\n return totalTitlePadding;\n }\n\n /**\n * Button w must be >= nonTextSpace + smallest possible width of truncated\n * text(width of the first set of characters before a space + width of TextBox.maxLinesSuffix).\n * Disregarding this results in the contents of the button being a greater width than the\n * fixed w of the Button(w/o decreasing _paddingX or _totalTitlePadding).\n */\n get _fixedWordWrapWidth() {\n const { w, _paddingX, _prefixW, _suffixW, _totalTitlePaddingX } = this;\n const nonTextSpace = _paddingX + _prefixW + _suffixW + _totalTitlePaddingX;\n return Math.max(1, w - nonTextSpace);\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n if (this._announce) {\n return this._announce;\n }\n\n // TODO - Localization?\n // Do we need a locale file with\n // component translations?\n const announce = [];\n if (this.title) {\n announce.push(this.title);\n }\n announce.push(this._announceComponentName);\n if (this._hasPrefix && this._Prefix.items.length) {\n announce.push(...this._Prefix.items.map(item => item.announce));\n }\n if (this._hasSuffix && this._Suffix.items.length) {\n announce.push(...this._Suffix.items.map(item => item.announce));\n }\n\n return announce;\n }\n\n get _announceComponentName() {\n return Button.__componentName;\n }\n\n get _paddingX() {\n return this._paddingLeft + this._paddingRight;\n }\n\n get _paddingLeft() {\n return this._hasTitle ? this.style.paddingX : this.style.paddingXNoTitle;\n }\n\n get _paddingRight() {\n return this._hasTitle ? this.style.paddingX : this.style.paddingXNoTitle;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/5338.865bde80.iframe.bundle.js.map b/5338.865bde80.iframe.bundle.js.map deleted file mode 100644 index 68f30218b..000000000 --- a/5338.865bde80.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"5338.865bde80.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAJA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAMA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAEA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAMA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AALA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAEA;AACA;AAAA;AAxBA;AACA;AAAA;AAAA;AAAA;AA0BA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAzbA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Button/Button.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Button/Button.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getWidthByColumnSpan } from '../../utils';\n\nexport const base = theme => ({\n width: 0,\n justify: 'center',\n minWidth: getWidthByColumnSpan(theme, 3),\n paddingX: theme.spacer.xxxl,\n paddingXNoTitle: theme.spacer.xl,\n paddingY: theme.spacer.xl,\n radius: theme.radius.sm,\n contentSpacing: theme.spacer.md,\n itemSpacing: theme.spacer.md,\n textStyle: {\n ...theme.typography.button1,\n maxLines: 1,\n textColor: theme.color.textNeutral\n },\n contentColor: theme.color.fillNeutral\n});\n\nexport const mode = theme => ({\n focused: {\n textStyle: { textColor: theme.color.textInverse },\n contentColor: theme.color.fillInverse,\n tone: {\n inverse: {\n textStyle: { textColor: theme.color.textNeutral },\n contentColor: theme.color.fillNeutral\n },\n brand: {\n contentColor: theme.color.fillNeutral\n }\n }\n },\n disabled: {\n textStyle: { textColor: theme.color.textNeutralDisabled },\n contentColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport * as styles from './Button.styles';\nimport Row from '../Row';\nimport Surface from '../Surface';\nimport TextBox from '../TextBox'; // There seams to be some issue with the circular dependency here\n\n/**\n * Button Component\n *\n * Generic Button Component that handles setting text icon and checkbox\n */\nexport default class Button extends Surface {\n static get __componentName() {\n return 'Button';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return ['fixed', 'justify', 'prefix', 'suffix', 'title'];\n }\n\n static get aliasStyles() {\n return [{ prev: 'titlePadding', curr: 'contentSpacing' }];\n }\n\n static get tags() {\n return [\n ...super.tags,\n 'Content',\n { name: 'TextWrapper', path: 'Content.TextWrapper' },\n { name: 'Title', path: 'Content.TextWrapper.Title' },\n { name: 'Prefix', path: 'Content.Prefix' },\n { name: 'Suffix', path: 'Content.Suffix' }\n ];\n }\n\n static _template() {\n return {\n ...super._template(),\n Content: {\n mount: 0.5,\n x: w => w / 2,\n y: h => h / 2,\n zIndex: 2 // ensure content (title) is rendered above Surface Background\n }\n };\n }\n\n _update() {\n this._updatePrefix();\n this._updateTitle();\n this._updateSuffix();\n this._updateAllPositioning();\n this._updateTruncation();\n }\n\n _updateAllPositioning() {\n this._updatePositions();\n this._updateContentDimensions();\n this._updateSurfaceDimensions();\n this._updateContentPosition();\n // delaying the super._update call so we update the surface sizing after the button has finished updating\n super._update();\n }\n\n $itemChanged() {\n this._updateAllPositioning();\n this._updateTruncation();\n }\n\n _onTitleTextBoxChanged() {\n this._updateAllPositioning();\n }\n\n _updatePositions() {\n if (this._hasPrefix && this._Prefix !== undefined) {\n this._Prefix.x = this._prefixX;\n }\n if (this._hasTitle) {\n this._TextWrapper.x = this._titleX;\n }\n if (this._hasSuffix && this._Suffix !== undefined) {\n this._Suffix.x = this._suffixX;\n }\n }\n\n _updatePrefix() {\n const prefixString = JSON.stringify(this.prefix);\n if (this.prefix) {\n let prefixPatch = {\n style: {\n itemSpacing: this.style.itemSpacing\n }\n };\n if (!this._Prefix) {\n prefixPatch = {\n ...this._rowProps,\n ...prefixPatch\n };\n }\n this._Content.patch({ Prefix: prefixPatch });\n this._updatePrefixSuffixStyles('prefix');\n } else {\n this._Content.patch({ Prefix: undefined });\n }\n this._prevPrefix = prefixString;\n }\n\n _updatePrefixSuffixStyles(type = 'prefix') {\n /**\n * Repatching all items re-renders all the components in the Prefix/Suffix Rows.\n * This can cause items to shift while their layout in the Row is re-calculated if\n * any of the items do not have width or height on their initial render (ex. an Icon\n * does not have width and height until after its texture loads).\n * If the contents of the Prefix/Suffix are the same components and this update was triggered\n * from something else (ex. a change in mode), only update the styles applied to the\n * items in the Prefix (ex. updating the color to the value appropriate to the new mode).\n */\n const map = {\n prefix: {\n tag: this._Prefix,\n prop: this.prefix,\n prevProp: this._prevPrefix\n },\n suffix: {\n tag: this._Suffix,\n prop: this.suffix,\n prevProp: this._prevSuffix\n }\n };\n const { tag, prop } = map[type];\n let { prevProp } = map[type];\n const propString = JSON.stringify(prop);\n\n if (propString !== prevProp) {\n prevProp = propString;\n tag.items = this._addButtonProps(prop);\n } else {\n tag.Items.children.forEach((item, idx) => {\n item.color = Array.isArray(prop) ? prop[idx].color : prop.color;\n item.style = {\n ...item.style,\n color: this.style.contentColor\n };\n });\n }\n }\n\n _updateTitle() {\n if (this._hasTitle) {\n let titlePatch = {\n content: this.title,\n style: { textStyle: this.style.textStyle }\n };\n if (!this._Title) {\n titlePatch = {\n type: TextBox,\n mountY: 0.5,\n y: h => h / 2,\n signals: {\n textBoxChanged: '_onTitleTextBoxChanged'\n },\n ...titlePatch\n };\n }\n this._Content.patch({\n TextWrapper: {\n mountY: 0.5,\n Title: titlePatch\n }\n });\n } else {\n this._Content.patch({ TextWrapper: { Title: undefined } });\n }\n }\n\n _updateSuffix() {\n if (this.suffix) {\n let suffixPatch = {\n style: {\n itemSpacing: this.style.itemSpacing\n }\n };\n if (!this._Suffix) {\n suffixPatch = {\n ...this._rowProps,\n ...suffixPatch\n };\n }\n this._Content.patch({ Suffix: suffixPatch });\n this._updatePrefixSuffixStyles('suffix');\n } else {\n this._Content.patch({ Suffix: undefined });\n }\n }\n\n _updateTruncation() {\n /**\n * needs to run before rest of content updates to prevent a bug causing text\n * to sometimes truncate and then un-truncate(with no width change) when\n * toggling fixed after toggling focus\n */\n if (this._Title) {\n this._Title.patch({\n style: {\n textStyle: {\n ...this.style.textStyle,\n wordWrap: this.fixed,\n wordWrapWidth: this.fixed ? this._fixedWordWrapWidth : 0\n }\n }\n });\n }\n }\n\n _updateContentDimensions() {\n const contentDimensionsPatch = {};\n const y = this.h / 2;\n\n // reference transition targets to ensure we aren't checking against intermittent values\n if (this._Content.transition('w').targetValue !== this._contentW) {\n this._Content.w = this._contentW;\n }\n\n if (this._Content.y !== y) {\n contentDimensionsPatch.y = y;\n }\n\n if (Object.keys(contentDimensionsPatch).length > 0) {\n this._Content.patch(contentDimensionsPatch);\n }\n }\n\n _updateContentPosition() {\n this._Content.patch(this._contentProps);\n }\n\n _updateSurfaceDimensions() {\n let newWidth = this.w;\n if (this.fixed) {\n newWidth = this._w;\n } else {\n newWidth = this._calcDynamicWidth();\n }\n\n if (newWidth !== this.w) {\n this.w = newWidth;\n }\n\n // In order to ensure the \"hSetByUser\" flag is not set to true,\n // skip over \"set h\" by directly updating \"_h\"\n // Using the \"get h\" return statement does not force an update to the inspector,\n // whereas this will ensure the \"height\" attribute is updated\n if (!this._hSetByUser && !this.style.h) {\n this._h = this.style.textStyle.lineHeight + this.style.paddingY * 2;\n }\n\n // TODO breaks row resizing if this is wrapped in the width conditional above\n this.fireAncestors('$itemChanged');\n }\n\n _calcDynamicWidth() {\n // if no title, ignore minWidth and use prefix/suffix width\n // when the title is collapsed, width should be the same as if there is no title\n return (!this._hasTitle && (this._hasPrefix || this._hasSuffix)) ||\n (this._Title &&\n !this._Title.visible &&\n (this._hasPrefix || this._hasSuffix))\n ? this._contentW + this._paddingX\n : Math.max(this._contentW + this._paddingX, this.style.minWidth);\n }\n\n _addButtonProps(arr) {\n const items = Array.isArray(arr) ? arr : [arr];\n return items.map(item => ({\n ...this._buttonProps,\n ...item,\n style: {\n color: this.style.contentColor,\n ...item.style\n }\n }));\n }\n\n _getJustify() {\n return !!this._justify ? this._justify : this.style.justify;\n }\n\n get _contentProps() {\n let mountX;\n let x;\n\n switch (this.justify) {\n case 'left':\n mountX = 0;\n x = this._paddingLeft;\n break;\n case 'right':\n mountX = 1;\n x = this.w - this._paddingRight;\n break;\n case 'center':\n default:\n mountX = 0.5;\n x = this.w / 2;\n break;\n }\n return { mountX, x };\n }\n\n get _buttonProps() {\n return {\n centerInParent: true,\n mode: this.mode\n };\n }\n\n get _hasPrefix() {\n return !!(this.prefix && Object.keys(this.prefix).length);\n }\n\n get _prefixW() {\n return this._hasPrefix && this._Prefix !== undefined ? this._Prefix.w : 0;\n }\n\n get _prefixX() {\n return 0;\n }\n\n get _hasTitle() {\n return !!this.title;\n }\n\n get _titleW() {\n // get the pre-calculated text width of the title to solve some race condition bugs\n if (\n this._hasTitle &&\n this._Title &&\n this._Title._Text &&\n this._Title.visible\n ) {\n return this._Title.w;\n }\n return 0;\n }\n\n get _titleX() {\n return this._hasPrefix ? this._prefixW + this.style.contentSpacing : 0;\n }\n\n get _hasSuffix() {\n return !!(this.suffix && Object.keys(this.suffix).length);\n }\n\n get _suffixW() {\n return this._hasSuffix && this._Suffix !== undefined ? this._Suffix.w : 0;\n }\n\n get _suffixX() {\n if (this._hasTitle) {\n return this._titleW + this._TextWrapper.x + this.style.contentSpacing;\n } else if (this._hasPrefix) {\n return this._prefixW + this.style.itemSpacing;\n }\n return 0;\n }\n\n get _contentW() {\n if (this._hasSuffix) {\n return this._suffixX + this._suffixW;\n } else if (this._hasTitle && this._Title && this._Title.visible) {\n return this._titleX + this._titleW;\n } else if (this._hasPrefix) {\n return this._prefixX + this._prefixW;\n }\n return 0;\n }\n\n get _rowProps() {\n return {\n type: Row,\n mountY: 0.5,\n autoResizeHeight: true,\n autoResizeWidth: true\n };\n }\n\n get _totalTitlePaddingX() {\n let totalTitlePadding = 0;\n if (this._hasPrefix) {\n totalTitlePadding += this.style.contentSpacing;\n }\n if (this._hasSuffix) {\n totalTitlePadding += this.style.contentSpacing;\n }\n return totalTitlePadding;\n }\n\n /**\n * Button w must be >= nonTextSpace + smallest possible width of truncated\n * text(width of the first set of characters before a space + width of TextBox.maxLinesSuffix).\n * Disregarding this results in the contents of the button being a greater width than the\n * fixed w of the Button(w/o decreasing _paddingX or _totalTitlePadding).\n */\n get _fixedWordWrapWidth() {\n const { w, _paddingX, _prefixW, _suffixW, _totalTitlePaddingX } = this;\n const nonTextSpace = _paddingX + _prefixW + _suffixW + _totalTitlePaddingX;\n return Math.max(1, w - nonTextSpace);\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n if (this._announce) {\n return this._announce;\n }\n\n // TODO - Localization?\n // Do we need a locale file with\n // component translations?\n const announce = [];\n if (this.title) {\n announce.push(this.title);\n }\n announce.push(this._announceComponentName);\n if (this._hasPrefix && this._Prefix.items.length) {\n announce.push(...this._Prefix.items.map(item => item.announce));\n }\n if (this._hasSuffix && this._Suffix.items.length) {\n announce.push(...this._Suffix.items.map(item => item.announce));\n }\n\n return announce;\n }\n\n get _announceComponentName() {\n return Button.__componentName;\n }\n\n get _paddingX() {\n return this._paddingLeft + this._paddingRight;\n }\n\n get _paddingLeft() {\n return this._hasTitle ? this.style.paddingX : this.style.paddingXNoTitle;\n }\n\n get _paddingRight() {\n return this._hasTitle ? this.style.paddingX : this.style.paddingXNoTitle;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js.map b/components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js.map deleted file mode 100644 index 248dd7c34..000000000 --- a/components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AChXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AACA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;;;;;;;;;;;;;;;AC1BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AAKA;AACA;AACA;AAIA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;;AAKA;AACA;;AAGA;AACA;;AAEA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAMA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAEA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AAEA;AACA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AApBA;AACA;AAAA;AAAA;AAAA;AAvXA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAYA;AAAA;AAAA;AAAA;AAGA;AAIA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AAAA;;;;;;;ACjFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;AC/OA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport {DocsLink} from '../../docs/utils';\nimport * as ScrollWrapperStories from './ScrollWrapper.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n h4: \"h4\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: ScrollWrapperStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"A scrollable container for text content.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \" requires both \", _jsx(_components.code, {\n children: \"w\"\n }), \" and \", _jsx(_components.code, {\n children: \"h\"\n }), \" to be set.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { ScrollWrapper } from '@lightningjs/ui-components';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapper,\\n h: 450,\\n w: 600,\\n content: 'Text content long enough to scroll vertically'\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Alternatively, an array of components and \", _jsx(_components.code, {\n children: \"style\"\n }), \" keys may be provided as \", _jsx(_components.code, {\n children: \"content\"\n }), \".\\nStyles provided here will override those set by the theme for it's section of text:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { ScrollWrapper } from '@lightningjs/ui-components';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapper,\\n h: 450,\\n w: 600,\\n content: [\\n {\\n text: 'Text Heading',\\n style: {\\n fontStyle: 'italic',\\n alignContent: 'center'\\n }\\n },\\n {\\n text: 'Text content long enough to scroll vertically'\\n }\\n ]\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.code, {\n children: \"h\"\n }), \" and \", _jsx(_components.code, {\n children: \"w\"\n }), \" properties will determine the viewable box for \", _jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \".\\nWhen focused, \", _jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \" will display a scroll bar to the right of the content\\nand up/down scrolling will be handled.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The amount of scrolling per keypress is determined via the \", _jsx(_components.code, {\n children: \"scrollStep\"\n }), \" property.\\nChange it to allow smaller or larger scroll steps per keypress.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"If the array of items contains rows/columns with different heights and/or widths set\\nautoResizeWidth and autoResizeHeight to true so that the scroll bar is of the appropriate height.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Additionally, \", _jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \" supports \", _jsx(_components.code, {\n children: \"autoScroll\"\n }), \" flag, which will auto scroll the content.\\nThe delay to start is set via \", _jsx(_components.code, {\n children: \"autoScrollDelay\"\n }), \" and speed via \", _jsx(_components.code, {\n children: \"autoScrollSpeed\"\n }), \" both in ms.\\nYou can also hide the scrollBar by setting \", _jsx(_components.code, {\n children: \"showScrollBar\"\n }), \" to \", _jsx(_components.code, {\n children: \"false\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"api\",\n children: \"API\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"properties\",\n children: \"Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"required\"\n }), _jsx(_components.th, {\n children: \"default\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"autoScroll\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"whether or not to auto scroll the content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"autoScrollDelay\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"2000\"\n }), _jsx(_components.td, {\n children: \"delay, in ms, before auto scroll starts\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"autoScrollSpeed\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"200\"\n }), _jsx(_components.td, {\n children: \"time delay, in ms, before each scroll step\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"content\"\n }), _jsx(_components.td, {\n children: \"string|array\"\n }), _jsx(_components.td, {\n children: \"true\"\n }), _jsx(_components.td, {\n children: \"-\"\n }), _jsx(_components.td, {\n children: \"Content is items that are viewable in the container. It can be an array of strings or an array of lightning elements that can be patched in\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"fadeContent\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"true\"\n }), _jsx(_components.td, {\n children: \"fade out content at the bottom of the ScrollWrapper\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"flexDirection\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"column\"\n }), _jsx(_components.td, {\n children: \"determines the direction items are placed in flexContainer\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scrollDuration\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"0.2\"\n }), _jsx(_components.td, {\n children: \"animation duration for the scroll\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scrollStep\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"10\"\n }), _jsx(_components.td, {\n children: \"how many pixels to scroll by on every up/down keypress\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"shouldWrap\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"determines if items should wrap around ScrollContainer\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"showScrollBar\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"true\"\n }), _jsx(_components.td, {\n children: \"show the scroll bar when focused\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"contentMarginLeft\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing to the left of the scrollable content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"contentMarginTop\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing above the scrollable content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"fadeHeight\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsxs(_components.td, {\n children: [\"height of FadeOut shader displayed at bottom of scroll wrapper (when \", _jsx(_components.code, {\n children: \"fadeContent\"\n }), \" property is \", _jsx(_components.code, {\n children: \"true\"\n }), \")\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scroll\"\n }), _jsx(_components.td, {\n children: _jsx(DocsLink, {\n id: \"lng.Transition\"\n })\n }), _jsx(_components.td, {\n children: \"transition to apply when scrolling\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"sliderMarginLeft\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing to the left of the scroll slider\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"textStyle\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsxs(_components.td, {\n children: [\"Default style of text to be displayed. Object should come from the current theme or contain any properties that the \", _jsx(_components.a, {\n href: \"https://lightningjs.io/docs/#/lightning-core-reference/RenderEngine/Textures/Text?id=properties\",\n rel: \"nofollow\",\n children: \"Lightning text texture supports\"\n }), \".\"]\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"methods\",\n children: \"Methods\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"resetscroll-void\",\n children: \"resetScroll(): void\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Resets the \", _jsx(_components.code, {\n children: \"y\"\n }), \" value of both the content and the scroll bar.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"events\",\n children: \"Events\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"scrollchangedendupenddown-this\",\n children: \"$scrollChanged('endUp'|'endDown', this)\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Event fired via \", _jsx(_components.code, {\n children: \"fireAncestors\"\n }), \", is triggered when scroll reaches the top or bottom of the scroll boundaries.\"]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n textStyle: theme.typography.body2,\n fadeHeight: 100,\n scroll: {\n timingFunction: 'linear',\n duration: theme.animation.duration.xfast\n },\n contentMarginTop: theme.spacer.md,\n contentMarginLeft: theme.spacer.xl,\n sliderMarginLeft: theme.spacer.lg + theme.spacer.xxs\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { base as scrollWrapperBase } from './ScrollWrapper.styles';\n\nexport const base = theme => {\n const { scroll } = scrollWrapperBase(theme);\n return {\n progressBar: { animation: scroll },\n circleAnimation: scroll\n };\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport Slider from '../Slider';\nimport * as styles from './ScrollSlider.styles';\n\nexport default class ScrollSlider extends Slider {\n static get __componentName() {\n return 'ScrollSlider';\n }\n\n static get __themeStyle() {\n return styles;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Base from '../Base';\nimport * as styles from './ScrollWrapper.styles';\nimport TextBox from '../TextBox';\nimport ScrollSlider from './ScrollSlider';\n\nexport default class ScrollWrapper extends Base {\n static get __themeStyle() {\n return styles;\n }\n\n static _template() {\n return {\n clipping: true,\n FadeContainer: {\n ScrollContainer: {\n w: w => w,\n wordWrap: true\n }\n },\n Slider: {\n type: ScrollSlider,\n vertical: true,\n signals: {\n onSizeChange: '_updateScrollContainerSize'\n },\n announce: ' '\n }\n };\n }\n\n static get __componentName() {\n return 'ScrollWrapper';\n }\n\n static get properties() {\n return [\n 'autoScroll',\n 'autoScrollDelay',\n 'autoScrollSpeed',\n 'content',\n 'fadeContent',\n 'scrollDuration',\n 'scrollStep',\n 'showScrollBar',\n 'shouldWrap',\n 'flexDirection'\n ];\n }\n\n static get tags() {\n return [\n 'FadeContainer',\n 'Slider',\n {\n name: 'ScrollContainer',\n path: 'FadeContainer.ScrollContainer'\n },\n {\n name: 'ScrollableText',\n path: 'ScrollContainer.ScrollableText'\n }\n ];\n }\n\n _construct() {\n super._construct();\n this._scrollStep = 10;\n this._shouldWrap = false;\n this._flexDirection = 'column';\n this._fadeContent = true;\n this._sliderWidth = 0;\n }\n\n _afterTextBoxUpdate(textBox) {\n // NOTE: this does get called every time ScrollWrapper updates (ex. on each scroll change)\n if (this._prevW !== textBox.finalW || this._prevH !== textBox.finalH) {\n this._prevW = textBox.finalW;\n this._prevH = textBox.finalH;\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n }\n\n _resetFlexContainer() {\n this._FadeContainer.patch({ ScrollContainer: undefined });\n this._FadeContainer.patch({\n ScrollContainer: { w: w => w, wordWrap: true }\n });\n }\n\n _update() {\n if (this._contentChanged) {\n this._resetFlexContainer();\n this._updateAutoScroll();\n }\n this._updateScrollContainer();\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n\n _updateAutoScroll() {\n this.resetScroll();\n this._setupAutoScroll();\n this._contentChanged = false;\n }\n\n _updateScrollWrapperLayout() {\n this._ScrollContainer.patch({\n w: this._contentWidth\n });\n this._updateFadeContainer();\n this._updateSlider();\n }\n\n _updateAlpha() {\n this._Slider.smooth = {\n alpha: this.showScrollBar && this._isFocusedMode ? 1 : 0\n };\n }\n\n _updateFadeContainer() {\n const isScrollable = this._ScrollContainer.finalH > this.h;\n const shouldFade =\n this.fadeContent && isScrollable && !this._isEndContentVisible;\n\n this._FadeContainer.patch({\n h: this.h,\n w: this._contentWidth,\n y: this.style.contentMarginTop,\n x: this.style.contentMarginLeft,\n rtt: true,\n shader: shouldFade\n ? {\n type: lng.shaders.FadeOut,\n bottom: this.style.fadeHeight\n }\n : undefined\n });\n }\n\n _scrollContainerLoaded({ h }) {\n this._ScrollContainer.h = h;\n this._updateScrollWrapperLayout();\n }\n\n _updateScrollContainer() {\n if (!this.content) return;\n\n if (typeof this.content === 'string') {\n this._ScrollContainer.patch({\n flex: { direction: 'column' },\n ScrollableText: {\n h: 0,\n w: this._contentWidth,\n type: TextBox,\n content: this.content,\n style: {\n textStyle: {\n ...this.style.textStyle,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n signals: {\n textBoxChanged: '_scrollContainerLoaded'\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n }\n });\n } else if (Array.isArray(this.content)) {\n const content = {};\n this.content.forEach((item, index) => {\n const id = `ScrollText${index}`;\n content[id] = {\n w: this._contentWidth,\n ...item\n };\n if (item.text) {\n content[id] = {\n type: TextBox,\n content: item.text,\n style: {\n textStyle: {\n ...this.style.textStyle,\n ...item.style,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n };\n }\n });\n this._ScrollContainer.patch({\n flex: { direction: this.flexDirection, wrap: this.shouldWrap },\n ...content\n });\n }\n }\n\n _scrollDown() {\n const hasContentToScrollTo =\n this._scrollContainerY + this._ScrollContainer.finalH > this.renderHeight;\n if (hasContentToScrollTo) {\n const targetY = this._scrollContainerY - this.scrollStep;\n const canScrollByStepLength =\n targetY + this._ScrollContainer.finalH > this.renderHeight;\n const scrollEndY =\n this.renderHeight -\n this._ScrollContainer.finalH -\n this.style.contentMarginTop;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [\n canScrollByStepLength ? targetY : scrollEndY,\n this._scrollAnimation\n ]\n }\n });\n\n const hasScrolledToEnd =\n this._scrollContainerY + this._ScrollContainer.finalH <= this.h;\n\n if (hasScrolledToEnd) {\n this._isEndContentVisible = true;\n this._autoScrollComplete = true;\n this.fireAncestors('$scrollChanged', 'endDown', this);\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n _scrollUp() {\n const canScrollUp = this._scrollContainerY < 0;\n\n if (canScrollUp) {\n const targetY = this._scrollContainerY + this.scrollStep;\n const canScrollByStepLength = targetY < 0;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [canScrollByStepLength ? targetY : 0, this._scrollAnimation]\n }\n });\n\n const isScrollable =\n this._scrollContainerY + this._ScrollContainer.finalH >\n this.renderHeight;\n if (isScrollable) {\n this._autoScrollComplete = false;\n }\n\n if (this._scrollContainerY >= 0) {\n this.fireAncestors('$scrollChanged', 'endUp', this);\n }\n\n if (this._isEndContentVisible) {\n this._isEndContentVisible = false;\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n resetScroll() {\n this._ScrollContainer.y = 0;\n this._Slider.value = 0;\n this._ScrollContainer.transition('y').finish();\n delete this._ScrollContainer._transitions;\n this._autoScrollComplete = false;\n }\n\n _setAutoScroll(val) {\n if (this._autoScroll !== val) {\n this._autoScroll = val;\n }\n this._setupAutoScroll();\n return val;\n }\n\n _setupAutoScroll() {\n clearTimeout(this._startAutoScroll);\n clearTimeout(this._performAutoScrollTimer);\n\n if (this.autoScroll) {\n this._startAutoScroll = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollDelay) ? 2000 : this.autoScrollDelay\n );\n }\n }\n\n _performAutoScroll() {\n if (this.autoScroll && !this._autoScrollComplete) {\n this._Slider._handleDown();\n this._performAutoScrollTimer = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollSpeed) ? 200 : this.autoScrollSpeed\n );\n }\n }\n\n _setContent(content) {\n if (content !== this._content && this.enabled) {\n this._contentChanged = true;\n }\n return content;\n }\n\n _updateScrollContainerSize(slider) {\n if (this._sliderWidth !== slider._Container.h) {\n this._sliderWidth = slider._Container.h;\n this._updateScrollContainer();\n }\n }\n\n _updateSlider() {\n // height of off-screen items that can be scrolled to\n const scrollHeight = Math.max(\n this._ScrollContainer.finalH - this.renderHeight,\n 0\n );\n\n // number of steps to scroll to the bottom of ScrollContainer\n const contentScrollSteps =\n scrollHeight > 0 ? Math.ceil(scrollHeight / this.scrollStep) : 1;\n\n // max value of slider\n const sliderMax = this.renderHeight;\n\n // distance slider should move on each key press\n const sliderStep =\n contentScrollSteps > 0 ? sliderMax / contentScrollSteps : sliderMax;\n\n // Ensure _Slider and required properties exist\n if (this._Slider) {\n // This is a vertical slider, so w is actually controlling the height\n this._Slider.patch({\n x: this.w - this._sliderWidth,\n w: sliderMax,\n min: 0,\n max: sliderMax,\n step: sliderStep,\n onUp: this._scrollUp.bind(this),\n onDown: this._scrollDown.bind(this)\n });\n }\n }\n\n get _contentWidth() {\n return (\n this.w -\n this.style.contentMarginLeft -\n this.style.sliderMarginLeft -\n this._sliderWidth\n );\n }\n\n get _scrollContainerY() {\n return this._ScrollContainer.transition('y').targetValue;\n }\n\n get _scrollAnimation() {\n const duration = isNaN(this.scrollDuration)\n ? this.style.scroll.duration\n : this.scrollDuration;\n return {\n ...this.style.scroll,\n duration\n };\n }\n\n _getFocused() {\n return this._Slider;\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n if (this._announce) {\n return this._announce;\n }\n\n if (Array.isArray(this.content)) {\n if (\n this._ScrollContainer &&\n this._ScrollContainer.children &&\n this._ScrollContainer.children.length\n ) {\n return this._ScrollContainer.children.map(item => item.announce);\n } else {\n return this.content.map(item => item.announce || item.text);\n }\n }\n return this.content;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox/TextBox';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: 'Components/ScrollWrapper'\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged && args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js b/components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js similarity index 99% rename from components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js rename to components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js index f0a2aa9b5..7424bb885 100644 --- a/components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js +++ b/components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js @@ -609,6 +609,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -621,7 +626,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -1561,4 +1566,4 @@ module.exports = webpackEmptyContext; /***/ }) }]); -//# sourceMappingURL=components-ScrollWrapper-ScrollWrapper-mdx.0c8e88dd.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js.map \ No newline at end of file diff --git a/components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js.map b/components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js.map new file mode 100644 index 000000000..e27155783 --- /dev/null +++ b/components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-ScrollWrapper-ScrollWrapper-mdx.7947cefc.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AChXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AACA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;;;;;;;;;;;;;;;AC1BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AAKA;AACA;AACA;AAIA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;;AAKA;AACA;;AAGA;AACA;;AAEA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAMA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAEA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AAEA;AACA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AApBA;AACA;AAAA;AAAA;AAAA;AAvXA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAYA;AAAA;AAAA;AAAA;AAGA;AAIA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AAAA;;;;;;;ACjFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;AC/OA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport {DocsLink} from '../../docs/utils';\nimport * as ScrollWrapperStories from './ScrollWrapper.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n h4: \"h4\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: ScrollWrapperStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"A scrollable container for text content.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \" requires both \", _jsx(_components.code, {\n children: \"w\"\n }), \" and \", _jsx(_components.code, {\n children: \"h\"\n }), \" to be set.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { ScrollWrapper } from '@lightningjs/ui-components';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapper,\\n h: 450,\\n w: 600,\\n content: 'Text content long enough to scroll vertically'\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Alternatively, an array of components and \", _jsx(_components.code, {\n children: \"style\"\n }), \" keys may be provided as \", _jsx(_components.code, {\n children: \"content\"\n }), \".\\nStyles provided here will override those set by the theme for it's section of text:\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { ScrollWrapper } from '@lightningjs/ui-components';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapper,\\n h: 450,\\n w: 600,\\n content: [\\n {\\n text: 'Text Heading',\\n style: {\\n fontStyle: 'italic',\\n alignContent: 'center'\\n }\\n },\\n {\\n text: 'Text content long enough to scroll vertically'\\n }\\n ]\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.code, {\n children: \"h\"\n }), \" and \", _jsx(_components.code, {\n children: \"w\"\n }), \" properties will determine the viewable box for \", _jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \".\\nWhen focused, \", _jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \" will display a scroll bar to the right of the content\\nand up/down scrolling will be handled.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The amount of scrolling per keypress is determined via the \", _jsx(_components.code, {\n children: \"scrollStep\"\n }), \" property.\\nChange it to allow smaller or larger scroll steps per keypress.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"If the array of items contains rows/columns with different heights and/or widths set\\nautoResizeWidth and autoResizeHeight to true so that the scroll bar is of the appropriate height.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Additionally, \", _jsx(_components.code, {\n children: \"ScrollWrapper\"\n }), \" supports \", _jsx(_components.code, {\n children: \"autoScroll\"\n }), \" flag, which will auto scroll the content.\\nThe delay to start is set via \", _jsx(_components.code, {\n children: \"autoScrollDelay\"\n }), \" and speed via \", _jsx(_components.code, {\n children: \"autoScrollSpeed\"\n }), \" both in ms.\\nYou can also hide the scrollBar by setting \", _jsx(_components.code, {\n children: \"showScrollBar\"\n }), \" to \", _jsx(_components.code, {\n children: \"false\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"api\",\n children: \"API\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"properties\",\n children: \"Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"required\"\n }), _jsx(_components.th, {\n children: \"default\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"autoScroll\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"whether or not to auto scroll the content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"autoScrollDelay\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"2000\"\n }), _jsx(_components.td, {\n children: \"delay, in ms, before auto scroll starts\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"autoScrollSpeed\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"200\"\n }), _jsx(_components.td, {\n children: \"time delay, in ms, before each scroll step\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"content\"\n }), _jsx(_components.td, {\n children: \"string|array\"\n }), _jsx(_components.td, {\n children: \"true\"\n }), _jsx(_components.td, {\n children: \"-\"\n }), _jsx(_components.td, {\n children: \"Content is items that are viewable in the container. It can be an array of strings or an array of lightning elements that can be patched in\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"fadeContent\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"true\"\n }), _jsx(_components.td, {\n children: \"fade out content at the bottom of the ScrollWrapper\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"flexDirection\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"column\"\n }), _jsx(_components.td, {\n children: \"determines the direction items are placed in flexContainer\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scrollDuration\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"0.2\"\n }), _jsx(_components.td, {\n children: \"animation duration for the scroll\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scrollStep\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"10\"\n }), _jsx(_components.td, {\n children: \"how many pixels to scroll by on every up/down keypress\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"shouldWrap\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"determines if items should wrap around ScrollContainer\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"showScrollBar\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"true\"\n }), _jsx(_components.td, {\n children: \"show the scroll bar when focused\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"contentMarginLeft\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing to the left of the scrollable content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"contentMarginTop\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing above the scrollable content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"fadeHeight\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsxs(_components.td, {\n children: [\"height of FadeOut shader displayed at bottom of scroll wrapper (when \", _jsx(_components.code, {\n children: \"fadeContent\"\n }), \" property is \", _jsx(_components.code, {\n children: \"true\"\n }), \")\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scroll\"\n }), _jsx(_components.td, {\n children: _jsx(DocsLink, {\n id: \"lng.Transition\"\n })\n }), _jsx(_components.td, {\n children: \"transition to apply when scrolling\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"sliderMarginLeft\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing to the left of the scroll slider\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"textStyle\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsxs(_components.td, {\n children: [\"Default style of text to be displayed. Object should come from the current theme or contain any properties that the \", _jsx(_components.a, {\n href: \"https://lightningjs.io/docs/#/lightning-core-reference/RenderEngine/Textures/Text?id=properties\",\n rel: \"nofollow\",\n children: \"Lightning text texture supports\"\n }), \".\"]\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"methods\",\n children: \"Methods\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"resetscroll-void\",\n children: \"resetScroll(): void\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Resets the \", _jsx(_components.code, {\n children: \"y\"\n }), \" value of both the content and the scroll bar.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"events\",\n children: \"Events\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"scrollchangedendupenddown-this\",\n children: \"$scrollChanged('endUp'|'endDown', this)\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Event fired via \", _jsx(_components.code, {\n children: \"fireAncestors\"\n }), \", is triggered when scroll reaches the top or bottom of the scroll boundaries.\"]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n textStyle: theme.typography.body2,\n fadeHeight: 100,\n scroll: {\n timingFunction: 'linear',\n duration: theme.animation.duration.xfast\n },\n contentMarginTop: theme.spacer.md,\n contentMarginLeft: theme.spacer.xl,\n sliderMarginLeft: theme.spacer.lg + theme.spacer.xxs\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { base as scrollWrapperBase } from './ScrollWrapper.styles';\n\nexport const base = theme => {\n const { scroll } = scrollWrapperBase(theme);\n return {\n progressBar: { animation: scroll },\n circleAnimation: scroll\n };\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport Slider from '../Slider';\nimport * as styles from './ScrollSlider.styles';\n\nexport default class ScrollSlider extends Slider {\n static get __componentName() {\n return 'ScrollSlider';\n }\n\n static get __themeStyle() {\n return styles;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Base from '../Base';\nimport * as styles from './ScrollWrapper.styles';\nimport TextBox from '../TextBox';\nimport ScrollSlider from './ScrollSlider';\n\nexport default class ScrollWrapper extends Base {\n static get __themeStyle() {\n return styles;\n }\n\n static _template() {\n return {\n clipping: true,\n FadeContainer: {\n ScrollContainer: {\n w: w => w,\n wordWrap: true\n }\n },\n Slider: {\n type: ScrollSlider,\n vertical: true,\n signals: {\n onSizeChange: '_updateScrollContainerSize'\n },\n announce: ' '\n }\n };\n }\n\n static get __componentName() {\n return 'ScrollWrapper';\n }\n\n static get properties() {\n return [\n 'autoScroll',\n 'autoScrollDelay',\n 'autoScrollSpeed',\n 'content',\n 'fadeContent',\n 'scrollDuration',\n 'scrollStep',\n 'showScrollBar',\n 'shouldWrap',\n 'flexDirection'\n ];\n }\n\n static get tags() {\n return [\n 'FadeContainer',\n 'Slider',\n {\n name: 'ScrollContainer',\n path: 'FadeContainer.ScrollContainer'\n },\n {\n name: 'ScrollableText',\n path: 'ScrollContainer.ScrollableText'\n }\n ];\n }\n\n _construct() {\n super._construct();\n this._scrollStep = 10;\n this._shouldWrap = false;\n this._flexDirection = 'column';\n this._fadeContent = true;\n this._sliderWidth = 0;\n }\n\n _afterTextBoxUpdate(textBox) {\n // NOTE: this does get called every time ScrollWrapper updates (ex. on each scroll change)\n if (this._prevW !== textBox.finalW || this._prevH !== textBox.finalH) {\n this._prevW = textBox.finalW;\n this._prevH = textBox.finalH;\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n }\n\n _resetFlexContainer() {\n this._FadeContainer.patch({ ScrollContainer: undefined });\n this._FadeContainer.patch({\n ScrollContainer: { w: w => w, wordWrap: true }\n });\n }\n\n _update() {\n if (this._contentChanged) {\n this._resetFlexContainer();\n this._updateAutoScroll();\n }\n this._updateScrollContainer();\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n\n _updateAutoScroll() {\n this.resetScroll();\n this._setupAutoScroll();\n this._contentChanged = false;\n }\n\n _updateScrollWrapperLayout() {\n this._ScrollContainer.patch({\n w: this._contentWidth\n });\n this._updateFadeContainer();\n this._updateSlider();\n }\n\n _updateAlpha() {\n this._Slider.smooth = {\n alpha: this.showScrollBar && this._isFocusedMode ? 1 : 0\n };\n }\n\n _updateFadeContainer() {\n const isScrollable = this._ScrollContainer.finalH > this.h;\n const shouldFade =\n this.fadeContent && isScrollable && !this._isEndContentVisible;\n\n this._FadeContainer.patch({\n h: this.h,\n w: this._contentWidth,\n y: this.style.contentMarginTop,\n x: this.style.contentMarginLeft,\n rtt: true,\n shader: shouldFade\n ? {\n type: lng.shaders.FadeOut,\n bottom: this.style.fadeHeight\n }\n : undefined\n });\n }\n\n _scrollContainerLoaded({ h }) {\n this._ScrollContainer.h = h;\n this._updateScrollWrapperLayout();\n }\n\n _updateScrollContainer() {\n if (!this.content) return;\n\n if (typeof this.content === 'string') {\n this._ScrollContainer.patch({\n flex: { direction: 'column' },\n ScrollableText: {\n h: 0,\n w: this._contentWidth,\n type: TextBox,\n content: this.content,\n style: {\n textStyle: {\n ...this.style.textStyle,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n signals: {\n textBoxChanged: '_scrollContainerLoaded'\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n }\n });\n } else if (Array.isArray(this.content)) {\n const content = {};\n this.content.forEach((item, index) => {\n const id = `ScrollText${index}`;\n content[id] = {\n w: this._contentWidth,\n ...item\n };\n if (item.text) {\n content[id] = {\n type: TextBox,\n content: item.text,\n style: {\n textStyle: {\n ...this.style.textStyle,\n ...item.style,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n };\n }\n });\n this._ScrollContainer.patch({\n flex: { direction: this.flexDirection, wrap: this.shouldWrap },\n ...content\n });\n }\n }\n\n _scrollDown() {\n const hasContentToScrollTo =\n this._scrollContainerY + this._ScrollContainer.finalH > this.renderHeight;\n if (hasContentToScrollTo) {\n const targetY = this._scrollContainerY - this.scrollStep;\n const canScrollByStepLength =\n targetY + this._ScrollContainer.finalH > this.renderHeight;\n const scrollEndY =\n this.renderHeight -\n this._ScrollContainer.finalH -\n this.style.contentMarginTop;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [\n canScrollByStepLength ? targetY : scrollEndY,\n this._scrollAnimation\n ]\n }\n });\n\n const hasScrolledToEnd =\n this._scrollContainerY + this._ScrollContainer.finalH <= this.h;\n\n if (hasScrolledToEnd) {\n this._isEndContentVisible = true;\n this._autoScrollComplete = true;\n this.fireAncestors('$scrollChanged', 'endDown', this);\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n _scrollUp() {\n const canScrollUp = this._scrollContainerY < 0;\n\n if (canScrollUp) {\n const targetY = this._scrollContainerY + this.scrollStep;\n const canScrollByStepLength = targetY < 0;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [canScrollByStepLength ? targetY : 0, this._scrollAnimation]\n }\n });\n\n const isScrollable =\n this._scrollContainerY + this._ScrollContainer.finalH >\n this.renderHeight;\n if (isScrollable) {\n this._autoScrollComplete = false;\n }\n\n if (this._scrollContainerY >= 0) {\n this.fireAncestors('$scrollChanged', 'endUp', this);\n }\n\n if (this._isEndContentVisible) {\n this._isEndContentVisible = false;\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n resetScroll() {\n this._ScrollContainer.y = 0;\n this._Slider.value = 0;\n this._ScrollContainer.transition('y').finish();\n delete this._ScrollContainer._transitions;\n this._autoScrollComplete = false;\n }\n\n _setAutoScroll(val) {\n if (this._autoScroll !== val) {\n this._autoScroll = val;\n }\n this._setupAutoScroll();\n return val;\n }\n\n _setupAutoScroll() {\n clearTimeout(this._startAutoScroll);\n clearTimeout(this._performAutoScrollTimer);\n\n if (this.autoScroll) {\n this._startAutoScroll = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollDelay) ? 2000 : this.autoScrollDelay\n );\n }\n }\n\n _performAutoScroll() {\n if (this.autoScroll && !this._autoScrollComplete) {\n this._Slider._handleDown();\n this._performAutoScrollTimer = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollSpeed) ? 200 : this.autoScrollSpeed\n );\n }\n }\n\n _setContent(content) {\n if (content !== this._content && this.enabled) {\n this._contentChanged = true;\n }\n return content;\n }\n\n _updateScrollContainerSize(slider) {\n if (this._sliderWidth !== slider._Container.h) {\n this._sliderWidth = slider._Container.h;\n this._updateScrollContainer();\n }\n }\n\n _updateSlider() {\n // height of off-screen items that can be scrolled to\n const scrollHeight = Math.max(\n this._ScrollContainer.finalH - this.renderHeight,\n 0\n );\n\n // number of steps to scroll to the bottom of ScrollContainer\n const contentScrollSteps =\n scrollHeight > 0 ? Math.ceil(scrollHeight / this.scrollStep) : 1;\n\n // max value of slider\n const sliderMax = this.renderHeight;\n\n // distance slider should move on each key press\n const sliderStep =\n contentScrollSteps > 0 ? sliderMax / contentScrollSteps : sliderMax;\n\n // Ensure _Slider and required properties exist\n if (this._Slider) {\n // This is a vertical slider, so w is actually controlling the height\n this._Slider.patch({\n x: this.w - this._sliderWidth,\n w: sliderMax,\n min: 0,\n max: sliderMax,\n step: sliderStep,\n onUp: this._scrollUp.bind(this),\n onDown: this._scrollDown.bind(this)\n });\n }\n }\n\n get _contentWidth() {\n return (\n this.w -\n this.style.contentMarginLeft -\n this.style.sliderMarginLeft -\n this._sliderWidth\n );\n }\n\n get _scrollContainerY() {\n return this._ScrollContainer.transition('y').targetValue;\n }\n\n get _scrollAnimation() {\n const duration = isNaN(this.scrollDuration)\n ? this.style.scroll.duration\n : this.scrollDuration;\n return {\n ...this.style.scroll,\n duration\n };\n }\n\n _getFocused() {\n return this._Slider;\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n if (this._announce) {\n return this._announce;\n }\n\n if (Array.isArray(this.content)) {\n if (\n this._ScrollContainer &&\n this._ScrollContainer.children &&\n this._ScrollContainer.children.length\n ) {\n return this._ScrollContainer.children.map(item => item.announce);\n } else {\n return this.content.map(item => item.announce || item.text);\n }\n }\n return this.content;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox/TextBox';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: 'Components/ScrollWrapper'\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged && args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js.map b/components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js.map deleted file mode 100644 index 7e35efd0c..000000000 --- a/components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AACA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;;;;;;;;;;;;;;;AC1BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AAKA;AACA;AACA;AAIA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;;AAKA;AACA;;AAGA;AACA;;AAEA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAMA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAEA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AAEA;AACA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AApBA;AACA;AAAA;AAAA;AAAA;AAvXA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAYA;AAAA;AAAA;AAAA;AAGA;AAIA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AAAA;;;;;;;ACjFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n textStyle: theme.typography.body2,\n fadeHeight: 100,\n scroll: {\n timingFunction: 'linear',\n duration: theme.animation.duration.xfast\n },\n contentMarginTop: theme.spacer.md,\n contentMarginLeft: theme.spacer.xl,\n sliderMarginLeft: theme.spacer.lg + theme.spacer.xxs\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { base as scrollWrapperBase } from './ScrollWrapper.styles';\n\nexport const base = theme => {\n const { scroll } = scrollWrapperBase(theme);\n return {\n progressBar: { animation: scroll },\n circleAnimation: scroll\n };\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport Slider from '../Slider';\nimport * as styles from './ScrollSlider.styles';\n\nexport default class ScrollSlider extends Slider {\n static get __componentName() {\n return 'ScrollSlider';\n }\n\n static get __themeStyle() {\n return styles;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Base from '../Base';\nimport * as styles from './ScrollWrapper.styles';\nimport TextBox from '../TextBox';\nimport ScrollSlider from './ScrollSlider';\n\nexport default class ScrollWrapper extends Base {\n static get __themeStyle() {\n return styles;\n }\n\n static _template() {\n return {\n clipping: true,\n FadeContainer: {\n ScrollContainer: {\n w: w => w,\n wordWrap: true\n }\n },\n Slider: {\n type: ScrollSlider,\n vertical: true,\n signals: {\n onSizeChange: '_updateScrollContainerSize'\n },\n announce: ' '\n }\n };\n }\n\n static get __componentName() {\n return 'ScrollWrapper';\n }\n\n static get properties() {\n return [\n 'autoScroll',\n 'autoScrollDelay',\n 'autoScrollSpeed',\n 'content',\n 'fadeContent',\n 'scrollDuration',\n 'scrollStep',\n 'showScrollBar',\n 'shouldWrap',\n 'flexDirection'\n ];\n }\n\n static get tags() {\n return [\n 'FadeContainer',\n 'Slider',\n {\n name: 'ScrollContainer',\n path: 'FadeContainer.ScrollContainer'\n },\n {\n name: 'ScrollableText',\n path: 'ScrollContainer.ScrollableText'\n }\n ];\n }\n\n _construct() {\n super._construct();\n this._scrollStep = 10;\n this._shouldWrap = false;\n this._flexDirection = 'column';\n this._fadeContent = true;\n this._sliderWidth = 0;\n }\n\n _afterTextBoxUpdate(textBox) {\n // NOTE: this does get called every time ScrollWrapper updates (ex. on each scroll change)\n if (this._prevW !== textBox.finalW || this._prevH !== textBox.finalH) {\n this._prevW = textBox.finalW;\n this._prevH = textBox.finalH;\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n }\n\n _resetFlexContainer() {\n this._FadeContainer.patch({ ScrollContainer: undefined });\n this._FadeContainer.patch({\n ScrollContainer: { w: w => w, wordWrap: true }\n });\n }\n\n _update() {\n if (this._contentChanged) {\n this._resetFlexContainer();\n this._updateAutoScroll();\n }\n this._updateScrollContainer();\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n\n _updateAutoScroll() {\n this.resetScroll();\n this._setupAutoScroll();\n this._contentChanged = false;\n }\n\n _updateScrollWrapperLayout() {\n this._ScrollContainer.patch({\n w: this._contentWidth\n });\n this._updateFadeContainer();\n this._updateSlider();\n }\n\n _updateAlpha() {\n this._Slider.smooth = {\n alpha: this.showScrollBar && this._isFocusedMode ? 1 : 0\n };\n }\n\n _updateFadeContainer() {\n const isScrollable = this._ScrollContainer.finalH > this.h;\n const shouldFade =\n this.fadeContent && isScrollable && !this._isEndContentVisible;\n\n this._FadeContainer.patch({\n h: this.h,\n w: this._contentWidth,\n y: this.style.contentMarginTop,\n x: this.style.contentMarginLeft,\n rtt: true,\n shader: shouldFade\n ? {\n type: lng.shaders.FadeOut,\n bottom: this.style.fadeHeight\n }\n : undefined\n });\n }\n\n _scrollContainerLoaded({ h }) {\n this._ScrollContainer.h = h;\n this._updateScrollWrapperLayout();\n }\n\n _updateScrollContainer() {\n if (!this.content) return;\n\n if (typeof this.content === 'string') {\n this._ScrollContainer.patch({\n flex: { direction: 'column' },\n ScrollableText: {\n h: 0,\n w: this._contentWidth,\n type: TextBox,\n content: this.content,\n style: {\n textStyle: {\n ...this.style.textStyle,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n signals: {\n textBoxChanged: '_scrollContainerLoaded'\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n }\n });\n } else if (Array.isArray(this.content)) {\n const content = {};\n this.content.forEach((item, index) => {\n const id = `ScrollText${index}`;\n content[id] = {\n w: this._contentWidth,\n ...item\n };\n if (item.text) {\n content[id] = {\n type: TextBox,\n content: item.text,\n style: {\n textStyle: {\n ...this.style.textStyle,\n ...item.style,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n };\n }\n });\n this._ScrollContainer.patch({\n flex: { direction: this.flexDirection, wrap: this.shouldWrap },\n ...content\n });\n }\n }\n\n _scrollDown() {\n const hasContentToScrollTo =\n this._scrollContainerY + this._ScrollContainer.finalH > this.renderHeight;\n if (hasContentToScrollTo) {\n const targetY = this._scrollContainerY - this.scrollStep;\n const canScrollByStepLength =\n targetY + this._ScrollContainer.finalH > this.renderHeight;\n const scrollEndY =\n this.renderHeight -\n this._ScrollContainer.finalH -\n this.style.contentMarginTop;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [\n canScrollByStepLength ? targetY : scrollEndY,\n this._scrollAnimation\n ]\n }\n });\n\n const hasScrolledToEnd =\n this._scrollContainerY + this._ScrollContainer.finalH <= this.h;\n\n if (hasScrolledToEnd) {\n this._isEndContentVisible = true;\n this._autoScrollComplete = true;\n this.fireAncestors('$scrollChanged', 'endDown', this);\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n _scrollUp() {\n const canScrollUp = this._scrollContainerY < 0;\n\n if (canScrollUp) {\n const targetY = this._scrollContainerY + this.scrollStep;\n const canScrollByStepLength = targetY < 0;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [canScrollByStepLength ? targetY : 0, this._scrollAnimation]\n }\n });\n\n const isScrollable =\n this._scrollContainerY + this._ScrollContainer.finalH >\n this.renderHeight;\n if (isScrollable) {\n this._autoScrollComplete = false;\n }\n\n if (this._scrollContainerY >= 0) {\n this.fireAncestors('$scrollChanged', 'endUp', this);\n }\n\n if (this._isEndContentVisible) {\n this._isEndContentVisible = false;\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n resetScroll() {\n this._ScrollContainer.y = 0;\n this._Slider.value = 0;\n this._ScrollContainer.transition('y').finish();\n delete this._ScrollContainer._transitions;\n this._autoScrollComplete = false;\n }\n\n _setAutoScroll(val) {\n if (this._autoScroll !== val) {\n this._autoScroll = val;\n }\n this._setupAutoScroll();\n return val;\n }\n\n _setupAutoScroll() {\n clearTimeout(this._startAutoScroll);\n clearTimeout(this._performAutoScrollTimer);\n\n if (this.autoScroll) {\n this._startAutoScroll = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollDelay) ? 2000 : this.autoScrollDelay\n );\n }\n }\n\n _performAutoScroll() {\n if (this.autoScroll && !this._autoScrollComplete) {\n this._Slider._handleDown();\n this._performAutoScrollTimer = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollSpeed) ? 200 : this.autoScrollSpeed\n );\n }\n }\n\n _setContent(content) {\n if (content !== this._content && this.enabled) {\n this._contentChanged = true;\n }\n return content;\n }\n\n _updateScrollContainerSize(slider) {\n if (this._sliderWidth !== slider._Container.h) {\n this._sliderWidth = slider._Container.h;\n this._updateScrollContainer();\n }\n }\n\n _updateSlider() {\n // height of off-screen items that can be scrolled to\n const scrollHeight = Math.max(\n this._ScrollContainer.finalH - this.renderHeight,\n 0\n );\n\n // number of steps to scroll to the bottom of ScrollContainer\n const contentScrollSteps =\n scrollHeight > 0 ? Math.ceil(scrollHeight / this.scrollStep) : 1;\n\n // max value of slider\n const sliderMax = this.renderHeight;\n\n // distance slider should move on each key press\n const sliderStep =\n contentScrollSteps > 0 ? sliderMax / contentScrollSteps : sliderMax;\n\n // Ensure _Slider and required properties exist\n if (this._Slider) {\n // This is a vertical slider, so w is actually controlling the height\n this._Slider.patch({\n x: this.w - this._sliderWidth,\n w: sliderMax,\n min: 0,\n max: sliderMax,\n step: sliderStep,\n onUp: this._scrollUp.bind(this),\n onDown: this._scrollDown.bind(this)\n });\n }\n }\n\n get _contentWidth() {\n return (\n this.w -\n this.style.contentMarginLeft -\n this.style.sliderMarginLeft -\n this._sliderWidth\n );\n }\n\n get _scrollContainerY() {\n return this._ScrollContainer.transition('y').targetValue;\n }\n\n get _scrollAnimation() {\n const duration = isNaN(this.scrollDuration)\n ? this.style.scroll.duration\n : this.scrollDuration;\n return {\n ...this.style.scroll,\n duration\n };\n }\n\n _getFocused() {\n return this._Slider;\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n if (this._announce) {\n return this._announce;\n }\n\n if (Array.isArray(this.content)) {\n if (\n this._ScrollContainer &&\n this._ScrollContainer.children &&\n this._ScrollContainer.children.length\n ) {\n return this._ScrollContainer.children.map(item => item.announce);\n } else {\n return this.content.map(item => item.announce || item.text);\n }\n }\n return this.content;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox/TextBox';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: 'Components/ScrollWrapper'\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged && args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js b/components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js similarity index 99% rename from components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js rename to components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js index afbe91094..c95c2b45d 100644 --- a/components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js +++ b/components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js @@ -125,6 +125,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -137,7 +142,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -1046,4 +1051,4 @@ ObjectArray.parameters = { /***/ }) }]); -//# sourceMappingURL=components-ScrollWrapper-ScrollWrapper-stories.7ae49e1b.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js.map \ No newline at end of file diff --git a/components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js.map b/components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js.map new file mode 100644 index 000000000..872c7eb14 --- /dev/null +++ b/components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-ScrollWrapper-ScrollWrapper-stories.bc7b4881.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;AACA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;;;;;;;;;;;;;;;AC1BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AAKA;AACA;AACA;AAIA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;;AAKA;AACA;;AAGA;AACA;;AAEA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAMA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAEA;AAAA;AAEA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AAEA;AACA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AApBA;AACA;AAAA;AAAA;AAAA;AAvXA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAYA;AAAA;AAAA;AAAA;AAGA;AAIA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AAAA;;;;;;;ACjFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollSlider.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ScrollWrapper/ScrollWrapper.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n textStyle: theme.typography.body2,\n fadeHeight: 100,\n scroll: {\n timingFunction: 'linear',\n duration: theme.animation.duration.xfast\n },\n contentMarginTop: theme.spacer.md,\n contentMarginLeft: theme.spacer.xl,\n sliderMarginLeft: theme.spacer.lg + theme.spacer.xxs\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { base as scrollWrapperBase } from './ScrollWrapper.styles';\n\nexport const base = theme => {\n const { scroll } = scrollWrapperBase(theme);\n return {\n progressBar: { animation: scroll },\n circleAnimation: scroll\n };\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport Slider from '../Slider';\nimport * as styles from './ScrollSlider.styles';\n\nexport default class ScrollSlider extends Slider {\n static get __componentName() {\n return 'ScrollSlider';\n }\n\n static get __themeStyle() {\n return styles;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Base from '../Base';\nimport * as styles from './ScrollWrapper.styles';\nimport TextBox from '../TextBox';\nimport ScrollSlider from './ScrollSlider';\n\nexport default class ScrollWrapper extends Base {\n static get __themeStyle() {\n return styles;\n }\n\n static _template() {\n return {\n clipping: true,\n FadeContainer: {\n ScrollContainer: {\n w: w => w,\n wordWrap: true\n }\n },\n Slider: {\n type: ScrollSlider,\n vertical: true,\n signals: {\n onSizeChange: '_updateScrollContainerSize'\n },\n announce: ' '\n }\n };\n }\n\n static get __componentName() {\n return 'ScrollWrapper';\n }\n\n static get properties() {\n return [\n 'autoScroll',\n 'autoScrollDelay',\n 'autoScrollSpeed',\n 'content',\n 'fadeContent',\n 'scrollDuration',\n 'scrollStep',\n 'showScrollBar',\n 'shouldWrap',\n 'flexDirection'\n ];\n }\n\n static get tags() {\n return [\n 'FadeContainer',\n 'Slider',\n {\n name: 'ScrollContainer',\n path: 'FadeContainer.ScrollContainer'\n },\n {\n name: 'ScrollableText',\n path: 'ScrollContainer.ScrollableText'\n }\n ];\n }\n\n _construct() {\n super._construct();\n this._scrollStep = 10;\n this._shouldWrap = false;\n this._flexDirection = 'column';\n this._fadeContent = true;\n this._sliderWidth = 0;\n }\n\n _afterTextBoxUpdate(textBox) {\n // NOTE: this does get called every time ScrollWrapper updates (ex. on each scroll change)\n if (this._prevW !== textBox.finalW || this._prevH !== textBox.finalH) {\n this._prevW = textBox.finalW;\n this._prevH = textBox.finalH;\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n }\n\n _resetFlexContainer() {\n this._FadeContainer.patch({ ScrollContainer: undefined });\n this._FadeContainer.patch({\n ScrollContainer: { w: w => w, wordWrap: true }\n });\n }\n\n _update() {\n if (this._contentChanged) {\n this._resetFlexContainer();\n this._updateAutoScroll();\n }\n this._updateScrollContainer();\n this._updateScrollWrapperLayout();\n this._updateAlpha();\n }\n\n _updateAutoScroll() {\n this.resetScroll();\n this._setupAutoScroll();\n this._contentChanged = false;\n }\n\n _updateScrollWrapperLayout() {\n this._ScrollContainer.patch({\n w: this._contentWidth\n });\n this._updateFadeContainer();\n this._updateSlider();\n }\n\n _updateAlpha() {\n this._Slider.smooth = {\n alpha: this.showScrollBar && this._isFocusedMode ? 1 : 0\n };\n }\n\n _updateFadeContainer() {\n const isScrollable = this._ScrollContainer.finalH > this.h;\n const shouldFade =\n this.fadeContent && isScrollable && !this._isEndContentVisible;\n\n this._FadeContainer.patch({\n h: this.h,\n w: this._contentWidth,\n y: this.style.contentMarginTop,\n x: this.style.contentMarginLeft,\n rtt: true,\n shader: shouldFade\n ? {\n type: lng.shaders.FadeOut,\n bottom: this.style.fadeHeight\n }\n : undefined\n });\n }\n\n _scrollContainerLoaded({ h }) {\n this._ScrollContainer.h = h;\n this._updateScrollWrapperLayout();\n }\n\n _updateScrollContainer() {\n if (!this.content) return;\n\n if (typeof this.content === 'string') {\n this._ScrollContainer.patch({\n flex: { direction: 'column' },\n ScrollableText: {\n h: 0,\n w: this._contentWidth,\n type: TextBox,\n content: this.content,\n style: {\n textStyle: {\n ...this.style.textStyle,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n signals: {\n textBoxChanged: '_scrollContainerLoaded'\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n }\n });\n } else if (Array.isArray(this.content)) {\n const content = {};\n this.content.forEach((item, index) => {\n const id = `ScrollText${index}`;\n content[id] = {\n w: this._contentWidth,\n ...item\n };\n if (item.text) {\n content[id] = {\n type: TextBox,\n content: item.text,\n style: {\n textStyle: {\n ...this.style.textStyle,\n ...item.style,\n wordWrap: true,\n wordWrapWidth: this._contentWidth\n }\n },\n onAfterUpdate: this._afterTextBoxUpdate.bind(this)\n };\n }\n });\n this._ScrollContainer.patch({\n flex: { direction: this.flexDirection, wrap: this.shouldWrap },\n ...content\n });\n }\n }\n\n _scrollDown() {\n const hasContentToScrollTo =\n this._scrollContainerY + this._ScrollContainer.finalH > this.renderHeight;\n if (hasContentToScrollTo) {\n const targetY = this._scrollContainerY - this.scrollStep;\n const canScrollByStepLength =\n targetY + this._ScrollContainer.finalH > this.renderHeight;\n const scrollEndY =\n this.renderHeight -\n this._ScrollContainer.finalH -\n this.style.contentMarginTop;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [\n canScrollByStepLength ? targetY : scrollEndY,\n this._scrollAnimation\n ]\n }\n });\n\n const hasScrolledToEnd =\n this._scrollContainerY + this._ScrollContainer.finalH <= this.h;\n\n if (hasScrolledToEnd) {\n this._isEndContentVisible = true;\n this._autoScrollComplete = true;\n this.fireAncestors('$scrollChanged', 'endDown', this);\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n _scrollUp() {\n const canScrollUp = this._scrollContainerY < 0;\n\n if (canScrollUp) {\n const targetY = this._scrollContainerY + this.scrollStep;\n const canScrollByStepLength = targetY < 0;\n\n this._ScrollContainer.patch({\n smooth: {\n y: [canScrollByStepLength ? targetY : 0, this._scrollAnimation]\n }\n });\n\n const isScrollable =\n this._scrollContainerY + this._ScrollContainer.finalH >\n this.renderHeight;\n if (isScrollable) {\n this._autoScrollComplete = false;\n }\n\n if (this._scrollContainerY >= 0) {\n this.fireAncestors('$scrollChanged', 'endUp', this);\n }\n\n if (this._isEndContentVisible) {\n this._isEndContentVisible = false;\n this._updateFadeContainer();\n }\n } else {\n return false;\n }\n }\n\n resetScroll() {\n this._ScrollContainer.y = 0;\n this._Slider.value = 0;\n this._ScrollContainer.transition('y').finish();\n delete this._ScrollContainer._transitions;\n this._autoScrollComplete = false;\n }\n\n _setAutoScroll(val) {\n if (this._autoScroll !== val) {\n this._autoScroll = val;\n }\n this._setupAutoScroll();\n return val;\n }\n\n _setupAutoScroll() {\n clearTimeout(this._startAutoScroll);\n clearTimeout(this._performAutoScrollTimer);\n\n if (this.autoScroll) {\n this._startAutoScroll = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollDelay) ? 2000 : this.autoScrollDelay\n );\n }\n }\n\n _performAutoScroll() {\n if (this.autoScroll && !this._autoScrollComplete) {\n this._Slider._handleDown();\n this._performAutoScrollTimer = setTimeout(\n () => this._performAutoScroll(),\n isNaN(this.autoScrollSpeed) ? 200 : this.autoScrollSpeed\n );\n }\n }\n\n _setContent(content) {\n if (content !== this._content && this.enabled) {\n this._contentChanged = true;\n }\n return content;\n }\n\n _updateScrollContainerSize(slider) {\n if (this._sliderWidth !== slider._Container.h) {\n this._sliderWidth = slider._Container.h;\n this._updateScrollContainer();\n }\n }\n\n _updateSlider() {\n // height of off-screen items that can be scrolled to\n const scrollHeight = Math.max(\n this._ScrollContainer.finalH - this.renderHeight,\n 0\n );\n\n // number of steps to scroll to the bottom of ScrollContainer\n const contentScrollSteps =\n scrollHeight > 0 ? Math.ceil(scrollHeight / this.scrollStep) : 1;\n\n // max value of slider\n const sliderMax = this.renderHeight;\n\n // distance slider should move on each key press\n const sliderStep =\n contentScrollSteps > 0 ? sliderMax / contentScrollSteps : sliderMax;\n\n // Ensure _Slider and required properties exist\n if (this._Slider) {\n // This is a vertical slider, so w is actually controlling the height\n this._Slider.patch({\n x: this.w - this._sliderWidth,\n w: sliderMax,\n min: 0,\n max: sliderMax,\n step: sliderStep,\n onUp: this._scrollUp.bind(this),\n onDown: this._scrollDown.bind(this)\n });\n }\n }\n\n get _contentWidth() {\n return (\n this.w -\n this.style.contentMarginLeft -\n this.style.sliderMarginLeft -\n this._sliderWidth\n );\n }\n\n get _scrollContainerY() {\n return this._ScrollContainer.transition('y').targetValue;\n }\n\n get _scrollAnimation() {\n const duration = isNaN(this.scrollDuration)\n ? this.style.scroll.duration\n : this.scrollDuration;\n return {\n ...this.style.scroll,\n duration\n };\n }\n\n _getFocused() {\n return this._Slider;\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n if (this._announce) {\n return this._announce;\n }\n\n if (Array.isArray(this.content)) {\n if (\n this._ScrollContainer &&\n this._ScrollContainer.children &&\n this._ScrollContainer.children.length\n ) {\n return this._ScrollContainer.children.map(item => item.announce);\n } else {\n return this.content.map(item => item.announce || item.text);\n }\n }\n return this.content;\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox/TextBox';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: 'Components/ScrollWrapper'\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged && args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Surface-Surface-mdx.676d6066.iframe.bundle.js b/components-Surface-Surface-mdx.305f625b.iframe.bundle.js similarity index 99% rename from components-Surface-Surface-mdx.676d6066.iframe.bundle.js rename to components-Surface-Surface-mdx.305f625b.iframe.bundle.js index aa90492d9..e55a12f63 100644 --- a/components-Surface-Surface-mdx.676d6066.iframe.bundle.js +++ b/components-Surface-Surface-mdx.305f625b.iframe.bundle.js @@ -370,6 +370,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -382,7 +387,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -757,4 +762,4 @@ module.exports = webpackEmptyContext; /***/ }) }]); -//# sourceMappingURL=components-Surface-Surface-mdx.676d6066.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-Surface-Surface-mdx.305f625b.iframe.bundle.js.map \ No newline at end of file diff --git a/components-Surface-Surface-mdx.305f625b.iframe.bundle.js.map b/components-Surface-Surface-mdx.305f625b.iframe.bundle.js.map new file mode 100644 index 000000000..1704d74e2 --- /dev/null +++ b/components-Surface-Surface-mdx.305f625b.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-Surface-Surface-mdx.305f625b.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AClIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport * as SurfaceStories from './Surface.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: SurfaceStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"Surface allows for the background of components such as listItems, cards, and tiles to change dependent on the state of the component.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Surface/Surface.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Surface/Surface.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { Surface } from '@lightningjs/ui-components';\\n\\nclass Basic extends lng.Component {\\n static _template() {\\n return {\\n Surface: {\\n type: Surface\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"api\",\n children: \"API\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"animation\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"animation style to apply to surface scale\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"backgroundColor\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"color of the background\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"radius\"\n }), _jsx(_components.td, {\n children: \"number|array\"\n }), _jsx(_components.td, {\n children: \"set rounded corner radius\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scale\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"percentage to scale by on focus\"\n })]\n })]\n })]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as SurfaceComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Surface'\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Surface-Surface-mdx.676d6066.iframe.bundle.js.map b/components-Surface-Surface-mdx.676d6066.iframe.bundle.js.map deleted file mode 100644 index 47d0451f1..000000000 --- a/components-Surface-Surface-mdx.676d6066.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-Surface-Surface-mdx.676d6066.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AClIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport * as SurfaceStories from './Surface.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: SurfaceStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"Surface allows for the background of components such as listItems, cards, and tiles to change dependent on the state of the component.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Surface/Surface.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Surface/Surface.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { Surface } from '@lightningjs/ui-components';\\n\\nclass Basic extends lng.Component {\\n static _template() {\\n return {\\n Surface: {\\n type: Surface\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"api\",\n children: \"API\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"animation\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"animation style to apply to surface scale\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"backgroundColor\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"color of the background\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"radius\"\n }), _jsx(_components.td, {\n children: \"number|array\"\n }), _jsx(_components.td, {\n children: \"set rounded corner radius\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"scale\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"percentage to scale by on focus\"\n })]\n })]\n })]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as SurfaceComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Surface'\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Surface-Surface-stories.135cd381.iframe.bundle.js.map b/components-Surface-Surface-stories.135cd381.iframe.bundle.js.map deleted file mode 100644 index 839e3f01d..000000000 --- a/components-Surface-Surface-stories.135cd381.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-Surface-Surface-stories.135cd381.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;;;;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as SurfaceComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Surface'\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Surface-Surface-stories.135cd381.iframe.bundle.js b/components-Surface-Surface-stories.5f675b7b.iframe.bundle.js similarity index 98% rename from components-Surface-Surface-stories.135cd381.iframe.bundle.js rename to components-Surface-Surface-stories.5f675b7b.iframe.bundle.js index 778e9f649..6b6a87615 100644 --- a/components-Surface-Surface-stories.135cd381.iframe.bundle.js +++ b/components-Surface-Surface-stories.5f675b7b.iframe.bundle.js @@ -125,6 +125,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -137,7 +142,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -480,4 +485,4 @@ Surface.parameters = { /***/ }) }]); -//# sourceMappingURL=components-Surface-Surface-stories.135cd381.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-Surface-Surface-stories.5f675b7b.iframe.bundle.js.map \ No newline at end of file diff --git a/components-Surface-Surface-stories.5f675b7b.iframe.bundle.js.map b/components-Surface-Surface-stories.5f675b7b.iframe.bundle.js.map new file mode 100644 index 000000000..c18fa3161 --- /dev/null +++ b/components-Surface-Surface-stories.5f675b7b.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-Surface-Surface-stories.5f675b7b.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;;;;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as SurfaceComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Surface'\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js.map b/components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js.map deleted file mode 100644 index 679d7b0f9..000000000 --- a/components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACtPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;ACvEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/TabBar/Tab.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/TabBar/Tab.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport {DocsLink} from '../../docs/utils';\nimport * as TabStories from './Tab.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: TabStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsxs(_components.p, {\n children: [\"Tab component to be rendered in a \", _jsx(_components.a, {\n href: \"/docs/components-tabbar--basic\",\n children: \"TabBar\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/TabBar/Tab.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/TabBar/Tab.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.code, {\n children: \"Tab\"\n }), \" is the recommended component to use when defining \", _jsx(_components.code, {\n children: \"tabs\"\n }), \" in a \", _jsx(_components.a, {\n href: \"/docs/components-tabbar--basic\",\n children: \"TabBar\"\n }), \" component.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { TabBar, Tab, Row } from '@lightningjs/ui-components';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n Tab: {\\n Tab: {\\n type: Tab,\\n icon: iconPath,\\n title: 'Tab'\\n }\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"properties\",\n children: \"Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"required\"\n }), _jsx(_components.th, {\n children: \"default\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"icon\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"path to icon to prepend tab title with\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"title\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"text to display on tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"tabContent\"\n }), _jsx(_components.td, {\n children: _jsx(DocsLink, {\n id: \"lng.Component\",\n children: \"lng.Component[]\"\n })\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"tabContent accepts a component, a function which returns a component, or a promise that resolves to a component\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"backgroundColor\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"background color of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"contentColor\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"color of icon and/or text\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"iconMarginRight\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"space between icon and text\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"iconSize\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"width and height of icon\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingXNoTitle\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"horizontal padding of tab when only an icon is rendered\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingX\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"horizontal padding of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingY\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"vertical padding of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"radius\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"border radius of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"textStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsxs(_components.td, {\n children: [\"Style of text to be displayed. This value will take precedent over the \", _jsx(_components.code, {\n children: \"textStyle\"\n }), \" style property. Available values: display1, display2, headline1, headline2, headline3, body1, body2, body3, button1, button2, callout1, caption1. Alternatively an object can be passed in containing any \", _jsx(_components.a, {\n href: \"https://lightningjs.io/docs/#/lightning-core-reference/RenderEngine/Textures/Text?id=properties\",\n rel: \"nofollow\",\n children: \"properties that the Lightning text texture supports\"\n }), \".\"]\n })]\n })]\n })]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\n\nexport default {\n title: 'Components/Tab'\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js b/components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js similarity index 99% rename from components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js rename to components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js index 3d83793e1..1c4090140 100644 --- a/components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js +++ b/components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js @@ -487,6 +487,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -499,7 +504,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -676,4 +681,4 @@ module.exports = webpackEmptyContext; /***/ }) }]); -//# sourceMappingURL=components-TabBar-Tab-mdx.6b17b24d.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js.map \ No newline at end of file diff --git a/components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js.map b/components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js.map new file mode 100644 index 000000000..80439f281 --- /dev/null +++ b/components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-TabBar-Tab-mdx.c78effa6.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACtPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;ACvEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/TabBar/Tab.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/TabBar/Tab.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport {DocsLink} from '../../docs/utils';\nimport * as TabStories from './Tab.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: TabStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsxs(_components.p, {\n children: [\"Tab component to be rendered in a \", _jsx(_components.a, {\n href: \"/docs/components-tabbar--basic\",\n children: \"TabBar\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/TabBar/Tab.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/TabBar/Tab.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.code, {\n children: \"Tab\"\n }), \" is the recommended component to use when defining \", _jsx(_components.code, {\n children: \"tabs\"\n }), \" in a \", _jsx(_components.a, {\n href: \"/docs/components-tabbar--basic\",\n children: \"TabBar\"\n }), \" component.\"]\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { TabBar, Tab, Row } from '@lightningjs/ui-components';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n Tab: {\\n Tab: {\\n type: Tab,\\n icon: iconPath,\\n title: 'Tab'\\n }\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"properties\",\n children: \"Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"required\"\n }), _jsx(_components.th, {\n children: \"default\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"icon\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"path to icon to prepend tab title with\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"title\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"text to display on tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"tabContent\"\n }), _jsx(_components.td, {\n children: _jsx(DocsLink, {\n id: \"lng.Component\",\n children: \"lng.Component[]\"\n })\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"tabContent accepts a component, a function which returns a component, or a promise that resolves to a component\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"backgroundColor\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"background color of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"contentColor\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"color of icon and/or text\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"iconMarginRight\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"space between icon and text\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"iconSize\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"width and height of icon\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingXNoTitle\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"horizontal padding of tab when only an icon is rendered\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingX\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"horizontal padding of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingY\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"vertical padding of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"radius\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"border radius of tab\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"textStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsxs(_components.td, {\n children: [\"Style of text to be displayed. This value will take precedent over the \", _jsx(_components.code, {\n children: \"textStyle\"\n }), \" style property. Available values: display1, display2, headline1, headline2, headline3, body1, body2, body3, button1, button2, callout1, caption1. Alternatively an object can be passed in containing any \", _jsx(_components.a, {\n href: \"https://lightningjs.io/docs/#/lightning-core-reference/RenderEngine/Textures/Text?id=properties\",\n rel: \"nofollow\",\n children: \"properties that the Lightning text texture supports\"\n }), \".\"]\n })]\n })]\n })]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\n\nexport default {\n title: 'Components/Tab'\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-TabBar-Tab-stories.80bed314.iframe.bundle.js.map b/components-TabBar-Tab-stories.80bed314.iframe.bundle.js.map deleted file mode 100644 index 91dd9dc3d..000000000 --- a/components-TabBar-Tab-stories.80bed314.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-TabBar-Tab-stories.80bed314.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/TabBar/Tab.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\n\nexport default {\n title: 'Components/Tab'\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-TabBar-Tab-stories.80bed314.iframe.bundle.js b/components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js similarity index 97% rename from components-TabBar-Tab-stories.80bed314.iframe.bundle.js rename to components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js index 5535ddb00..e2d5299b6 100644 --- a/components-TabBar-Tab-stories.80bed314.iframe.bundle.js +++ b/components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js @@ -125,6 +125,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -137,7 +142,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -283,4 +288,4 @@ Tab.parameters = { /***/ }) }]); -//# sourceMappingURL=components-TabBar-Tab-stories.80bed314.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js.map \ No newline at end of file diff --git a/components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js.map b/components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js.map new file mode 100644 index 000000000..20503860b --- /dev/null +++ b/components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-TabBar-Tab-stories.a36d3f7f.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/TabBar/Tab.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\n\nexport default {\n title: 'Components/Tab'\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Tile-Tile-mdx.7f92799f.iframe.bundle.js.map b/components-Tile-Tile-mdx.7f92799f.iframe.bundle.js.map deleted file mode 100644 index 15ca178ac..000000000 --- a/components-Tile-Tile-mdx.7f92799f.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-Tile-Tile-mdx.7f92799f.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACjWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AC3IA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;AC3HA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;ACnDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;AC9CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;AChIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;ACnEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;ACxIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;ACtFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Tile/Tile.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Artwork/Artwork.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Badge/Badge.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Checkbox/Checkbox.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Label/Label.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataTile/MetadataTile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ProgressBar/ProgressBar.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Tile/Tile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withLayout/withLayout.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport * as TileStories from './Tile.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: TileStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"A flexible solution for displaying artwork and meta information. Used to render entity posters for browsing.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Tile/Tile.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Tile/Tile.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Allows objects to be passed in that reflect all properties available in Artwork, Badge, Checkbox, Label, ProgressBar, and Metadata. Additionally, metadataLocation and persistentMetadata are available to configure Metadata placement and visibility.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { Tile } from '@lightningjs/ui-components';\\n\\nclass Basic extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: Tile\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"metadata\",\n children: \"Metadata\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Tile uses MetadataTile for text formatting by default. The 'metadata' property takes an object with the same properties of MetadataTile and passes them to the MetadataTile.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: Tile,\\n metadata: {\\n title: 'Title',\\n description: 'Description'\\n }\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"However, you can override which Metadata component is used by adding a 'type' to the 'metadata' object and then using that component's properties instead.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: Tile,\\n metadata: {\\n type: MetadataCard\\n title: 'Title',\\n details: 'Details'\\n }\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"properties\",\n children: \"Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"required\"\n }), _jsx(_components.th, {\n children: \"default\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"artwork\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-artwork--docs\",\n children: \"Artwork component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"badge\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-badge--docs\",\n children: \"Badge component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"checkbox\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-checkboxes--docs\",\n children: \"Checkbox component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"circle\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"If true, changes format of itemLayout to circle\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"label\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-label--docs\",\n children: \"Label component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logo\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"Source of logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"metadata\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-metadatatile--docs\",\n children: \"MetadataTile component\"\n }), _jsx(\"br\", {}), \" Can use a different Metadata component by passing in a 'type' and then that component's properties\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"metadataLocation\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"'standard'\"\n }), _jsx(_components.td, {\n children: \"Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset'\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"persistentMetadata\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"Metadata will be shown at all times if set to true, otherwise it will only show when the Tile has focus\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"progressBar\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-progressbar--docs\",\n children: \"ProgressBar component\"\n })]\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"animationEntrance\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"Animation values applied on entrance\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"animationExit\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"Animation values applied on exit\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoHeight\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"customized height of icon\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoWidth\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"customized width of icon\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"metadataLocation\"\n }), _jsx(_components.td, {\n children: \"'standard' | 'inset'\"\n }), _jsx(_components.td, {\n children: \"Determines the location of the metadata within the tile\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingX\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"Padding applied to the inside of the left and right of component\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingY\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"Padding applied to the inside of the top and bottom of component (when metadataLocation is inset, if there is no ProgressBar, this is applied to the space between the bottom of the Metadata and bottom of the Tile)\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingYProgress\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"Padding applied between the bottom of the component and bottom of the progress bar\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingYBetweenContent\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"When metadataLocation is inset and there is a ProgressBar, this padding applies between the bottom of the Metadata and top of the ProgressBar\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"radius\"\n }), _jsx(_components.td, {\n children: \"number|array\"\n }), _jsx(_components.td, {\n children: \"Outer radius of component\"\n })]\n })]\n })]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ArtworkComponent } from '.';\n\nexport default {\n title: 'Components/Artwork'\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Badge from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\n\nexport default {\n title: 'Components/Badge'\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Checkboxes/Checkbox'\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as LabelComponent } from '.';\n\nexport default {\n title: 'Components/Label'\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataTileComponent } from '.';\n\nexport default {\n title: 'Components/MetadataTile'\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n details: args.details,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n details: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ProgressBarComponent } from '.';\n\nexport default {\n title: 'Components/ProgressBar',\n parameters: {\n tag: 'ProgressBar',\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories';\nimport { Label as LabelStory } from '../Label/Label.stories';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\n\nexport default {\n title: 'Components/Tile'\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n logo: xfinityLogo,\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n },\n logo: {\n control: 'select',\n options: [xfinityLogo, null],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Tile from '../../components/Tile';\n\nexport default {\n title: 'Utilities/withLayout'\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Tile-Tile-mdx.7f92799f.iframe.bundle.js b/components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js similarity index 99% rename from components-Tile-Tile-mdx.7f92799f.iframe.bundle.js rename to components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js index 2f1e55892..17e952036 100644 --- a/components-Tile-Tile-mdx.7f92799f.iframe.bundle.js +++ b/components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js @@ -593,6 +593,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -605,7 +610,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -2006,4 +2011,4 @@ module.exports = __webpack_require__.p + "static/media/ic_lightning_white_32.06a /***/ }) }]); -//# sourceMappingURL=components-Tile-Tile-mdx.7f92799f.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js.map \ No newline at end of file diff --git a/components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js.map b/components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js.map new file mode 100644 index 000000000..d467144b0 --- /dev/null +++ b/components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-Tile-Tile-mdx.8d4c1db7.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACjWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AC3IA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;AC3HA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;ACnDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;AC9CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;AChIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;ACnEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;ACxIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;ACtFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Tile/Tile.mdx","webpack://lightning-ui-docs/../../../node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../../node_modules/@storybook/core/dist/components/ sync","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Artwork/Artwork.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Badge/Badge.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Checkbox/Checkbox.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Label/Label.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataTile/MetadataTile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ProgressBar/ProgressBar.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Tile/Tile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withLayout/withLayout.stories.js","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync"],"sourcesContent":["\nimport React from 'react';\n\n/*prettier-ignore*/\n/*\nCopyright 2023 Comcast Cable Communications Management, LLC\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nSPDX-License-Identifier: Apache-2.0\n\\*/\nimport {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \"react/jsx-runtime\";\nimport {useMDXComponents as _provideComponents} from \"/home/runner/work/Lightning-UI-Components/Lightning-UI-Components/node_modules/@storybook/addon-docs/dist/shims/mdx-react-shim.mjs\";\nimport {Meta, Title} from '@storybook/blocks';\nimport * as TileStories from './Tile.stories';\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n p: \"p\",\n pre: \"pre\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: TileStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"A flexible solution for displaying artwork and meta information. Used to render entity posters for browsing.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"source\",\n children: \"Source\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.a, {\n href: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Tile/Tile.js\",\n rel: \"nofollow\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Tile/Tile.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Allows objects to be passed in that reflect all properties available in Artwork, Badge, Checkbox, Label, ProgressBar, and Metadata. Additionally, metadataLocation and persistentMetadata are available to configure Metadata placement and visibility.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { Tile } from '@lightningjs/ui-components';\\n\\nclass Basic extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: Tile\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"metadata\",\n children: \"Metadata\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Tile uses MetadataTile for text formatting by default. The 'metadata' property takes an object with the same properties of MetadataTile and passes them to the MetadataTile.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: Tile,\\n metadata: {\\n title: 'Title',\\n description: 'Description'\\n }\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"However, you can override which Metadata component is used by adding a 'type' to the 'metadata' object and then using that component's properties instead.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: Tile,\\n metadata: {\\n type: MetadataCard\\n title: 'Title',\\n details: 'Details'\\n }\\n }\\n };\\n }\\n}\\n\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"properties\",\n children: \"Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"required\"\n }), _jsx(_components.th, {\n children: \"default\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"artwork\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-artwork--docs\",\n children: \"Artwork component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"badge\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-badge--docs\",\n children: \"Badge component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"checkbox\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-checkboxes--docs\",\n children: \"Checkbox component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"circle\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"If true, changes format of itemLayout to circle\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"label\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-label--docs\",\n children: \"Label component\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logo\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"Source of logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"metadata\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-metadatatile--docs\",\n children: \"MetadataTile component\"\n }), _jsx(\"br\", {}), \" Can use a different Metadata component by passing in a 'type' and then that component's properties\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"metadataLocation\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"'standard'\"\n }), _jsx(_components.td, {\n children: \"Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset'\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"persistentMetadata\"\n }), _jsx(_components.td, {\n children: \"boolean\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"Metadata will be shown at all times if set to true, otherwise it will only show when the Tile has focus\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"progressBar\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsxs(_components.td, {\n children: [\"Object containing all properties supported in the \", _jsx(_components.a, {\n href: \"?path=/docs/components-progressbar--docs\",\n children: \"ProgressBar component\"\n })]\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"style-properties\",\n children: \"Style Properties\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"name\"\n }), _jsx(_components.th, {\n children: \"type\"\n }), _jsx(_components.th, {\n children: \"description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"animationEntrance\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"Animation values applied on entrance\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"animationExit\"\n }), _jsx(_components.td, {\n children: \"object\"\n }), _jsx(_components.td, {\n children: \"Animation values applied on exit\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoHeight\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"customized height of icon\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoWidth\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"customized width of icon\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"metadataLocation\"\n }), _jsx(_components.td, {\n children: \"'standard' | 'inset'\"\n }), _jsx(_components.td, {\n children: \"Determines the location of the metadata within the tile\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingX\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"Padding applied to the inside of the left and right of component\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingY\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"Padding applied to the inside of the top and bottom of component (when metadataLocation is inset, if there is no ProgressBar, this is applied to the space between the bottom of the Metadata and bottom of the Tile)\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingYProgress\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"Padding applied between the bottom of the component and bottom of the progress bar\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"paddingYBetweenContent\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"When metadataLocation is inset and there is a ProgressBar, this padding applies between the bottom of the Metadata and top of the ProgressBar\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"radius\"\n }), _jsx(_components.td, {\n children: \"number|array\"\n }), _jsx(_components.td, {\n children: \"Outer radius of component\"\n })]\n })]\n })]\n })]\n });\n}\nexport default function MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\n","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/@storybook/core/dist/components sync recursive\";\nmodule.exports = webpackEmptyContext;","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ArtworkComponent } from '.';\n\nexport default {\n title: 'Components/Artwork'\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Badge from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\n\nexport default {\n title: 'Components/Badge'\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Checkboxes/Checkbox'\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as LabelComponent } from '.';\n\nexport default {\n title: 'Components/Label'\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataTileComponent } from '.';\n\nexport default {\n title: 'Components/MetadataTile'\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n details: args.details,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n details: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ProgressBarComponent } from '.';\n\nexport default {\n title: 'Components/ProgressBar',\n parameters: {\n tag: 'ProgressBar',\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories';\nimport { Label as LabelStory } from '../Label/Label.stories';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\n\nexport default {\n title: 'Components/Tile'\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n logo: xfinityLogo,\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n },\n logo: {\n control: 'select',\n options: [xfinityLogo, null],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Tile from '../../components/Tile';\n\nexport default {\n title: 'Utilities/withLayout'\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n","function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => ([]);\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"../../../node_modules/memoizerific sync recursive\";\nmodule.exports = webpackEmptyContext;"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js b/components-Tile-Tile-stories.5446fd7d.iframe.bundle.js similarity index 99% rename from components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js rename to components-Tile-Tile-stories.5446fd7d.iframe.bundle.js index 782d0f6f4..68f3e3695 100644 --- a/components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js +++ b/components-Tile-Tile-stories.5446fd7d.iframe.bundle.js @@ -125,6 +125,11 @@ var Surface = /*#__PURE__*/function (_Base) { get: function get() { return this.w; } + }, { + key: "_radius", + get: function get() { + return (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h); + } }, { key: "_update", value: function _update() { @@ -137,7 +142,7 @@ var Surface = /*#__PURE__*/function (_Base) { this._Background.patch({ texture: lightning_esm/* default */.A.Tools.getRoundRect(this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile - this.innerH - 2, (0,utils/* getMaxRoundRadius */.XG)(this.style.radius, this.w, this.h), 0, null, true, this.style.backgroundColor) + this.innerH - 2, this._radius, 0, null, true, this.style.backgroundColor) }); } }, { @@ -1496,4 +1501,4 @@ module.exports = __webpack_require__.p + "static/media/ic_lightning_white_32.06a /***/ }) }]); -//# sourceMappingURL=components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-Tile-Tile-stories.5446fd7d.iframe.bundle.js.map \ No newline at end of file diff --git a/components-Tile-Tile-stories.5446fd7d.iframe.bundle.js.map b/components-Tile-Tile-stories.5446fd7d.iframe.bundle.js.map new file mode 100644 index 000000000..3216bca64 --- /dev/null +++ b/components-Tile-Tile-stories.5446fd7d.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-Tile-Tile-stories.5446fd7d.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AA1DA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;;;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;AC3IA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;AC3HA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;ACnDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;AC9CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;AChIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;ACnEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;ACxIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Artwork/Artwork.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Badge/Badge.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Checkbox/Checkbox.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Label/Label.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataTile/MetadataTile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ProgressBar/ProgressBar.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Tile/Tile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withLayout/withLayout.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n get _radius() {\n return getMaxRoundRadius(this.style.radius, this.w, this.h);\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n this._radius,\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ArtworkComponent } from '.';\n\nexport default {\n title: 'Components/Artwork'\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Badge from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\n\nexport default {\n title: 'Components/Badge'\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Checkboxes/Checkbox'\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as LabelComponent } from '.';\n\nexport default {\n title: 'Components/Label'\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataTileComponent } from '.';\n\nexport default {\n title: 'Components/MetadataTile'\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n details: args.details,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n details: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ProgressBarComponent } from '.';\n\nexport default {\n title: 'Components/ProgressBar',\n parameters: {\n tag: 'ProgressBar',\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories';\nimport { Label as LabelStory } from '../Label/Label.stories';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\n\nexport default {\n title: 'Components/Tile'\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n logo: xfinityLogo,\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n },\n logo: {\n control: 'select',\n options: [xfinityLogo, null],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Tile from '../../components/Tile';\n\nexport default {\n title: 'Utilities/withLayout'\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js.map b/components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js.map deleted file mode 100644 index bc09817a8..000000000 --- a/components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-Tile-Tile-stories.54e9a9bd.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAOA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAtDA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAKA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAGA;AAAA;AACA;AAGA;AACA;AAEA;;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAGA;AASA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AACA;AAGA;AAOA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAIA;AAEA;AAAA;AAAA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAAA;AAAA;AAAA;AAMA;AAGA;AAAA;AAAA;AAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;;;;;;;;;;;;;;;ACvNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;AC3IA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;AC3HA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;ACnDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;AC9CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;AChIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;ACnEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;ACxIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Surface/Surface.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Artwork/Artwork.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Badge/Badge.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Checkbox/Checkbox.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Label/Label.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataTile/MetadataTile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/ProgressBar/ProgressBar.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/Tile/Tile.stories.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withLayout/withLayout.stories.js"],"sourcesContent":["/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport const base = theme => ({\n backgroundColor: theme.color.interactiveNeutral,\n radius: theme.radius.md,\n animation: {}\n});\n\nexport const tone = theme => ({\n inverse: {\n backgroundColor: theme.color.interactiveInverse\n }\n});\n\nexport const mode = theme => ({\n focused: {\n backgroundColor: theme.color.interactiveNeutralFocus,\n tone: {\n inverse: {\n backgroundColor: theme.color.interactiveInverseFocus\n }\n }\n },\n disabled: {\n backgroundColor: theme.color.fillNeutralDisabled\n }\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { getMaxRoundRadius } from '../../utils';\nimport Base from '../Base';\nimport * as styles from './Surface.styles';\nimport lng from '@lightningjs/core';\n\nexport default class Surface extends Base {\n static _template() {\n return {\n Background: {}\n };\n }\n\n static get __componentName() {\n return 'Surface';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static get properties() {\n return [];\n }\n\n static get tags() {\n return ['Background'];\n }\n\n get innerH() {\n return this.h;\n }\n\n get innerW() {\n return this.w;\n }\n\n _update() {\n this._updateLayout();\n this._updateScale();\n }\n\n _updateLayout() {\n this._Background.patch({\n texture: lng.Tools.getRoundRect(\n this.innerW - 2, // Reference the underscored values here in cause the h or w getters need to be overwritten for alignment - see Tile\n this.innerH - 2,\n getMaxRoundRadius(this.style.radius, this.w, this.h),\n 0,\n null,\n true,\n this.style.backgroundColor\n )\n });\n }\n\n _updateScale() {\n const scale = this._isFocusedMode\n ? this.getFocusScale(this.w, this.h)\n : this.getUnfocusScale(this.w, this.h);\n\n this.applySmooth(this, { scale }, { scale: [scale, this.style.animation] });\n }\n}\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// eslint-disable-next-line no-unused-vars\nimport React from 'react';\nimport utils from '../utils';\n\n// creates Mode control on stories\nexport const createModeControl = ({ options, summaryValue } = {}) => {\n return {\n mode: {\n control: 'radio',\n options:\n options && Array.isArray(options)\n ? ['unfocused', ...options]\n : ['unfocused', 'focused', 'disabled'],\n description: 'Sets the visual mode for the component',\n table: {\n defaultValue: { summary: summaryValue }\n },\n type: { name: 'string', required: true }\n }\n };\n};\n\n/**\n * @param {object} config Parameters for generating nested args: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgs(config) {\n const { argsObj, targetProp, include, overrides } = config;\n return Object.keys(argsObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]:\n (overrides.args && overrides.args[curr]) || argsObj[curr]\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating nested arg types: { argsObj, targetProp, include, overrides }\n */\nexport function nestedArgTypes(config) {\n const { argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: {\n // Namespaced to avoid conflicts\n name: curr,\n ...argTypesObj[curr],\n ...overrides[curr],\n table: {\n ...(argTypesObj[curr].table || {}),\n ...(overrides[curr] && overrides[curr].table),\n category: targetProp\n }\n }\n };\n }, {});\n}\n\nexport const prevValues = {};\n\n/**\n * @param {object} config Parameters for generating nested arg actions: { componentName, argsTypeObj, targetProp, include, overrides }\n */\nexport function nestedArgActions(config) {\n const { componentName, argTypesObj, targetProp, include, overrides } = config;\n return Object.keys(argTypesObj).reduce((acc, curr) => {\n if (!include.includes(curr)) return acc;\n return {\n ...acc,\n [targetProp + '_' + curr]: (value, component) => {\n component.tag(componentName).patch({\n [targetProp]: {\n ...prevValues[targetProp],\n [curr.replace(targetProp + '_', '')]:\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value // There are issues with merging objects here\n }\n });\n // Allow patching to work with nested objects\n if (!prevValues[targetProp]) {\n prevValues[targetProp] = {};\n }\n prevValues[targetProp][curr.replace(targetProp + '_', '')] =\n value === 'none'\n ? undefined\n : (overrides && overrides[curr]) || value;\n }\n };\n }, {});\n}\n\n/**\n * @param {object} config Parameters for generating story: { componentName, baseStory, subStory, targetProperty, include, options }\n */\nexport function generateSubStory(config) {\n config.baseStory.args = {\n ...config.baseStory.args,\n ...nestedArgs({\n argsObj: config.subStory.args || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.args) || {}\n })\n };\n\n config.baseStory.argTypes = {\n ...config.baseStory.argTypes,\n ...nestedArgTypes({\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argTypes) || {}\n })\n };\n\n if (\n !(\n config.baseStory &&\n config.baseStory.parameters &&\n config.baseStory.parameters.argActions\n )\n ) {\n config.baseStory.parameters = {\n argActions: {}\n };\n }\n\n config.baseStory.parameters.argActions = {\n ...config.baseStory.parameters.argActions,\n ...nestedArgActions({\n componentName: config.componentName,\n argTypesObj: config.subStory.argTypes || {},\n targetProp: config.targetProperty,\n include: config.include,\n overrides: (config.overrides && config.overrides.argActions) || {}\n })\n };\n}\n\n// used to create links to Lightning docs given an id\nexport const DocsLink = ({ children, id }) => {\n const docsmap = {\n lng: {\n _base: 'https://rdkcentral.github.io/Lightning/docs',\n Component: '/components/overview',\n Text: '/textures/text',\n Transition: '/transitions/attributes'\n }\n };\n const [source, path] = id.split('.');\n const href = docsmap[source]._base + docsmap[source][path];\n return (\n \n {children || id}\n \n );\n};\n\nexport const Item = ({ children }) => children;\n\n/**\n * Creates formatted object for markdown prop tables\n * see Column and Row stories\n * @param {object} props\n * @param {object} props.type - TS-style generic/utility type\n */\nexport const ObjectFormat = ({ object }) => {\n return [\n '{',\n
,\n ' ',\n ...utils.flatten(\n Object.entries(object).map(([k, v]) => [\n   ,\n `${k}: `,\n v,\n ',',\n
\n ])\n ),\n '}'\n ].map((x, i) => {x});\n};\n\n/**\n * Formats TS-style generic types\n * See Columns and Row stories\n * @param {object} props\n * @param {object} props.children - component children\n * @param {string} props.type - Name of generic type\n */\nexport const GenericType = ({ children, type }) => {\n return [type, '<', children, '>'].map((x, i) => {x});\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ArtworkComponent } from '.';\n\nexport default {\n title: 'Components/Artwork'\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Badge from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\n\nexport default {\n title: 'Components/Badge'\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxComponent } from '.';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: 'Components/Checkboxes/Checkbox'\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as LabelComponent } from '.';\n\nexport default {\n title: 'Components/Label'\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataTileComponent } from '.';\n\nexport default {\n title: 'Components/MetadataTile'\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n details: args.details,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n details: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ProgressBarComponent } from '.';\n\nexport default {\n title: 'Components/ProgressBar',\n parameters: {\n tag: 'ProgressBar',\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories';\nimport { Label as LabelStory } from '../Label/Label.stories';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\n\nexport default {\n title: 'Components/Tile'\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n logo: xfinityLogo,\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n },\n logo: {\n control: 'select',\n options: [xfinityLogo, null],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n","/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Tile from '../../components/Tile';\n\nexport default {\n title: 'Utilities/withLayout'\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/iframe.html b/iframe.html index c0fda0bf8..4c6834f35 100644 --- a/iframe.html +++ b/iframe.html @@ -523,7 +523,7 @@ window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};