diff --git a/4316.1fc585ef.iframe.bundle.js.map b/4316.1fc585ef.iframe.bundle.js.map deleted file mode 100644 index e070a902f..000000000 --- a/4316.1fc585ef.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"4316.1fc585ef.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzVA;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/","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js"],"sourcesContent":[null,"/**\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/4316.1fc585ef.iframe.bundle.js b/4316.e7abf56b.iframe.bundle.js similarity index 86% rename from 4316.1fc585ef.iframe.bundle.js rename to 4316.e7abf56b.iframe.bundle.js index d7cbfa71b..4d4d89393 100644 --- a/4316.1fc585ef.iframe.bundle.js +++ b/4316.e7abf56b.iframe.bundle.js @@ -167,7 +167,7 @@ function _getPrototypeOf(o) { /* eslint-disable */ // @ts-nocheck // @ts-expect-error (Converted from ts-ignore) -var __STORY__ = "/**\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 MetadataBaseComponent } from '.';\n\nexport default {\n title: 'Components/MetadataBase'\n};\n\nexport const MetadataBase = () =>\n class MetadataBase extends lng.Component {\n static _template() {\n return {\n MetadataBase: {\n type: MetadataBaseComponent\n }\n };\n }\n };\n\nMetadataBase.storyName = 'MetadataBase';\n\nMetadataBase.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: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\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\nMetadataBase.argTypes = {\n ...createModeControl({ summaryValue: MetadataBase.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 description: 'details content',\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"; +var __STORY__ = "/**\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 MetadataBaseComponent } from '.';\n\nexport default {\n title: 'Components/MetadataBase'\n};\n\nexport const MetadataBase = () =>\n class MetadataBase extends lng.Component {\n static _template() {\n return {\n MetadataBase: {\n type: MetadataBaseComponent\n }\n };\n }\n };\n\nMetadataBase.storyName = 'MetadataBase';\n\nMetadataBase.args = {\n w: 400,\n title: 'Title',\n subtitle: 'Subtitle',\n details: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\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\nMetadataBase.argTypes = {\n ...createModeControl({ summaryValue: MetadataBase.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 subtitle: {\n control: 'text',\n description: 'text directly below title',\n table: {\n defaultValue: { summary: 'undefined' },\n type: { summary: 'string' }\n }\n },\n details: {\n control: 'object',\n description: 'details content',\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"; // @ts-expect-error (Converted from ts-ignore) var __LOCATIONS_MAP__ = { "MetadataBase": { @@ -217,7 +217,7 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ parameters: { "storySource": { - "source": "/**\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 MetadataBaseComponent } from '.';\n\nexport default {\n title: 'Components/MetadataBase'\n};\n\nexport const MetadataBase = () =>\n class MetadataBase extends lng.Component {\n static _template() {\n return {\n MetadataBase: {\n type: MetadataBaseComponent\n }\n };\n }\n };\n\nMetadataBase.storyName = 'MetadataBase';\n\nMetadataBase.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: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\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\nMetadataBase.argTypes = {\n ...createModeControl({ summaryValue: MetadataBase.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 description: 'details content',\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", + "source": "/**\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 MetadataBaseComponent } from '.';\n\nexport default {\n title: 'Components/MetadataBase'\n};\n\nexport const MetadataBase = () =>\n class MetadataBase extends lng.Component {\n static _template() {\n return {\n MetadataBase: {\n type: MetadataBaseComponent\n }\n };\n }\n };\n\nMetadataBase.storyName = 'MetadataBase';\n\nMetadataBase.args = {\n w: 400,\n title: 'Title',\n subtitle: 'Subtitle',\n details: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\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\nMetadataBase.argTypes = {\n ...createModeControl({ summaryValue: MetadataBase.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 subtitle: {\n control: 'text',\n description: 'text directly below title',\n table: {\n defaultValue: { summary: 'undefined' },\n type: { summary: 'string' }\n }\n },\n details: {\n control: 'object',\n description: 'details content',\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", "locationsMap": { "metadata-base": { "startLoc": { @@ -267,6 +267,7 @@ MetadataBase.storyName = 'MetadataBase'; MetadataBase.args = { w: 400, title: 'Title', + subtitle: 'Subtitle', details: ['94%', { icon: _assets_images_ic_lightning_white_32_png__WEBPACK_IMPORTED_MODULE_2__, style: { @@ -304,6 +305,18 @@ MetadataBase.argTypes = _objectSpread(_objectSpread({}, (0,_docs_utils__WEBPACK_ } } }, + subtitle: { + control: 'text', + description: 'text directly below title', + table: { + defaultValue: { + summary: 'undefined' + }, + type: { + summary: 'string' + } + } + }, details: { control: 'object', description: 'details content', @@ -605,4 +618,4 @@ module.exports = __webpack_require__.p + "static/media/ic_lightning_white_32.06a /***/ }) }]); -//# sourceMappingURL=4316.1fc585ef.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=4316.e7abf56b.iframe.bundle.js.map \ No newline at end of file diff --git a/4316.e7abf56b.iframe.bundle.js.map b/4316.e7abf56b.iframe.bundle.js.map new file mode 100644 index 000000000..0426e11a5 --- /dev/null +++ b/4316.e7abf56b.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"4316.e7abf56b.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtWA;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/","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/docs/utils.js"],"sourcesContent":[null,"/**\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/9587.2de1cb6f.iframe.bundle.js.map b/9587.2de1cb6f.iframe.bundle.js.map deleted file mode 100644 index 7526194e8..000000000 --- a/9587.2de1cb6f.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"9587.2de1cb6f.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;;;;;;;;ACpBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;AChFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyEA;AACA;AAAA;AAAA;AAAA;AAEA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAEA;AAEA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAKA;AAAA;AAAA;AAAA;AAOA;AAQA;AAAA;AAZA;AACA;AAAA;AAAA;AAAA;AA1TA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAWA;AAAA;AAAA;AAAA;AAGA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAGA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAoQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnWA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAEA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AA1EA;AACA;AAAA;AAAA;AAAA;AA2EA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withMarqueeSync/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withMarqueeSync/withMarqueeSync.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 withMarqueeSync from './withMarqueeSync';\n\nexport default withMarqueeSync;\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 descriptionTextStyle: { ...theme.typography.body2, maxLines: 1 },\n fadeWidth: 100,\n logoWidth: theme.typography.body3.lineHeight,\n logoHeight: theme.typography.body3.lineHeight,\n logoPadding: theme.spacer.lg,\n detailsTextStyle: theme.typography.body3,\n titleTextStyle: { ...theme.typography.headline1, maxLines: 1 },\n marqueeSync: true,\n alpha: theme.alpha.primary\n});\n\nexport const mode = theme => ({\n disabled: {\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n alpha: theme.alpha.inactive\n }\n});\n\nexport const tone = theme => ({\n neutral: {\n titleTextStyle: { textColor: theme.color.textNeutral },\n detailsTextStyle: { textColor: theme.color.textNeutral },\n descriptionTextStyle: { textColor: theme.color.textNeutralSecondary },\n mode: {\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled },\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n descriptionTextStyle: {\n textColor: theme.color.textNeutralDisabled\n }\n }\n }\n },\n inverse: {\n titleTextStyle: { textColor: theme.color.textInverse },\n detailsTextStyle: { textColor: theme.color.textInverse },\n descriptionTextStyle: { textColor: theme.color.textInverseSecondary },\n mode: {\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled },\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n descriptionTextStyle: {\n textColor: theme.color.textNeutralDisabled\n }\n }\n }\n },\n brand: {\n titleTextStyle: { textColor: theme.color.textNeutral },\n detailsTextStyle: { textColor: theme.color.textNeutral },\n descriptionTextStyle: { textColor: theme.color.textNeutralSecondary },\n mode: {\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled },\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n descriptionTextStyle: {\n textColor: theme.color.textNeutralDisabled\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 Base from '../Base';\nimport Icon from '../Icon';\nimport TextBox from '../TextBox';\nimport FadeShader from '../../shaders/FadeShader';\nimport withMarqueeSync from '../../mixins/withMarqueeSync';\nimport * as styles from './MetadataBase.styles';\n\nclass MetadataBase extends Base {\n static get __componentName() {\n return 'MetadataBase';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static _template() {\n // Comments indicate where child components are inserted\n return {\n Text: {\n flex: { direction: 'column', justifyContent: 'flex-start' },\n // Title: {},\n DetailsWrapper: {\n // Details: {}\n }\n // Description: {}\n }\n // Logo: {\n // flexItem: false,\n // type: Icon\n // }\n };\n }\n\n static get properties() {\n return [\n 'description',\n 'logo',\n 'logoHeight',\n 'logoPosition',\n 'logoTitle',\n 'logoWidth',\n 'details',\n 'title',\n 'marquee'\n ];\n }\n\n static get tags() {\n return [\n 'Text',\n {\n name: 'Title',\n path: 'Text.Title'\n },\n {\n name: 'DetailsWrapper',\n path: 'Text.DetailsWrapper'\n },\n {\n name: 'Details',\n path: 'Text.DetailsWrapper.Details'\n },\n {\n name: 'Description',\n path: 'Text.Description'\n },\n 'Logo'\n ];\n }\n\n static get aliasStyles() {\n return [{ prev: 'subtitleTextStyle', curr: 'detailsTextStyle' }];\n }\n\n static get aliasProperties() {\n return [{ prev: 'subtitle', curr: 'details' }];\n }\n\n _titleLoaded() {\n this._updateLayout();\n }\n\n _detailsLoaded({ w, h }) {\n this._updateDetailsLayout({ w, h });\n this._updateLayout();\n }\n\n _descriptionLoaded() {\n this._updateLayout();\n }\n\n _updateDetailsLayout({ w, h }) {\n if (!this.details && !this._Details) {\n return;\n }\n\n if (this._DetailsWrapper) {\n this._DetailsWrapper.alpha = this.style.alpha;\n this._DetailsWrapper.w = w;\n this._DetailsWrapper.h = h;\n }\n }\n\n _update() {\n this._updateLines();\n this._updateLayout();\n }\n\n _updateLines() {\n this._Text.w = this._textW();\n this._updateTitle();\n this._updateDetails();\n this._updateDescription();\n }\n\n _updateLayout() {\n this._Text.h = this._textH();\n this._updateMetadataHeight();\n this._updatePositions();\n this._updateLogo();\n }\n\n _updatePositions() {\n this._Text.x =\n this.logo && this.logoPosition === 'left'\n ? this.logoWidth + this.style.logoPadding\n : 0;\n this._Text.y = (this.h - this._Text.h) / 2;\n }\n\n _updateMetadataHeight() {\n const newH = Math.max(this.logoHeight, this._Text.h);\n if (this.h !== newH) {\n this.h = newH;\n this.signal('updateComponentDimensions');\n }\n }\n\n _updateTitle() {\n if (!this.title && !this._Title) {\n return;\n }\n\n if (!this._Title) {\n this._Text.childList.addAt(\n {\n ref: 'Title',\n type: TextBox,\n signals: {\n textBoxChanged: '_titleLoaded'\n }\n },\n 0\n );\n }\n this._Title.patch({\n content: this.title,\n marquee: this.marquee,\n style: {\n textStyle: {\n ...this.style.titleTextStyle,\n maxLines: 1,\n wordWrap: true,\n wordWrapWidth: this._Text.w\n }\n }\n });\n }\n\n resetMarquee() {\n if (this.marquee) {\n if (this.title) {\n if (!this._Title) {\n this._updateTitle();\n }\n this._Title.toggleMarquee();\n }\n if (this.description) {\n if (!this._Description) {\n this._updateDescription();\n }\n this._Description.toggleMarquee();\n }\n }\n }\n\n _updateDetails() {\n if (!this.details && !this._Details) {\n return;\n }\n\n if (!this._Details) {\n this._DetailsWrapper.patch({\n Details: {\n type: TextBox,\n signals: {\n textBoxChanged: '_detailsLoaded'\n }\n }\n });\n }\n\n this._Details.patch({\n content: this.details,\n style: { textStyle: this.style.detailsTextStyle }\n });\n\n if (this._Details.finalW > this._textW()) {\n this._Details.patch({\n w: this._textW() + this.style.fadeWidth / 2,\n shader: {\n type: FadeShader,\n positionLeft: 0,\n positionRight: this.style.fadeWidth\n },\n rtt: true\n });\n } else {\n this._DetailsWrapper.shader = undefined;\n }\n this._DetailsWrapper.visible = this.details ? true : false;\n this._DetailsWrapper.alpha = this.style.alpha;\n }\n\n _updateDescription() {\n if (!this.description && !this._Description) {\n return;\n }\n\n if (!this._Description) {\n this._Text.childList.add({\n ref: 'Description',\n type: TextBox,\n signals: {\n textBoxChanged: '_descriptionLoaded'\n }\n });\n }\n\n this._Description.patch({\n content: this.description,\n marquee: this.marquee,\n style: {\n textStyle: {\n ...this.style.descriptionTextStyle,\n maxLines: 1,\n wordWrap: true,\n wordWrapWidth: this._Text.w\n }\n }\n });\n }\n\n _updateLogo() {\n if (!this.logo && !this._Logo) {\n return;\n }\n\n if (!this._Logo) {\n this.patch({\n Logo: {\n flexItem: false,\n type: Icon\n }\n });\n }\n\n this.logoPosition = this.logoPosition || 'right';\n this._Logo.patch({\n w: this.logoWidth,\n h: this.logoHeight,\n icon: this.logo,\n alpha: this.style.alpha\n });\n\n this._Logo.x = this.logoPosition === 'left' ? 0 : this.w - this._Logo.w;\n this._Logo.y = (this.h - this.logoHeight) / 2;\n }\n\n _textW() {\n return this.w - (this.logo ? this.logoWidth + this.style.logoPadding : 0);\n }\n\n _textH() {\n const titleH = (this.title && this._Title && this._Title.h) || 0;\n const detailsH =\n (this.details && this._DetailsWrapper && this._DetailsWrapper.h) || 0;\n const descriptionH =\n (this.description && this._Description && this._Description.h) || 0;\n return titleH + detailsH + descriptionH;\n }\n\n _getLogoWidth() {\n return this._logoWidth !== undefined\n ? this._logoWidth\n : this.style.logoWidth;\n }\n\n _setLogoWidth(w) {\n return w !== undefined ? w : this.logoWidth;\n }\n\n _getLogoHeight() {\n return this._logoHeight !== undefined\n ? this._logoHeight\n : this.style.logoHeight;\n }\n\n _setLogoHeight(h) {\n return h !== undefined ? h : this.logoHeight;\n }\n\n get syncArray() {\n return [\n ...(this._Title ? [this._Title] : []),\n ...(this._Description ? [this._Description] : []),\n ...(this._Details ? [this._Details] : [])\n ];\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n return (\n this._announce || [\n this._Title && this._Title.announce,\n this._Details && this._Details.announce,\n this._Description && this._Description.announce,\n this.logoTitle\n ]\n );\n }\n}\n\nexport default withMarqueeSync(MetadataBase);\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 logger from '../../globals/context/logger';\n/**\n * apply to a component to synchronize the marquee scroll\n * timing of child TextBox components. Target class must\n * have a `get syncArray` property, which contains an\n * array of the tags of all TextBoxes to be synchronized.\n *\n * @param {*} Base class to be extended\n * @returns class with marquee sync functionality\n */\nexport default function withMarqueeSync(Base) {\n return class extends Base {\n static get name() {\n return Base.name;\n }\n\n _init() {\n // use _init instead of _construct to ensure elements exist before running setup\n super._init();\n if (this._shouldSync) {\n this._updateSignals();\n }\n }\n\n _update() {\n super._update();\n if (this._shouldSync) {\n this._updateSignals();\n } else {\n this._cleanupSyncValues();\n }\n }\n\n _cleanupSyncValues() {\n this.syncArray.map(component => {\n component.marqueeOverrideLoopX = undefined;\n component.signals &&\n component.signals.willMarquee &&\n delete component.signals.willMarquee;\n });\n }\n\n _updateSignals() {\n if (this.syncArray) {\n this.syncArray.map(component => {\n // preserve signals set in Base class\n component.signals = {\n ...component.signals,\n willMarquee: '_willMarquee'\n };\n });\n }\n }\n\n _willMarquee(compRef) {\n if (this._shouldSync) {\n this._longestMarqueeWidth = Math.max(\n compRef._textRenderedW || 0,\n this._longestMarqueeWidth || 0\n );\n this.syncArray.map(component => {\n component.marqueeOverrideLoopX = this._longestMarqueeWidth;\n });\n }\n }\n\n get _shouldSync() {\n if (this.style.marqueeSync === false) {\n // only fail this case if explicitly false\n return false;\n }\n if (!this.syncArray) {\n logger.warn(\n 'warning: components using MarqueeSync must have a syncArray getter defined.'\n );\n return false;\n } else if (!Array.isArray(this.syncArray)) {\n logger.warn('warning: syncArray must be typeof array.');\n return false;\n } else if (this.syncArray.length < 2) {\n logger.warn(\n 'warning: syncArray must contain at least two component references.'\n );\n return false;\n } else {\n return true;\n }\n }\n };\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/9587.2de1cb6f.iframe.bundle.js b/9587.6c0e8478.iframe.bundle.js similarity index 95% rename from 9587.2de1cb6f.iframe.bundle.js rename to 9587.6c0e8478.iframe.bundle.js index de719b887..cb4d954ac 100644 --- a/9587.2de1cb6f.iframe.bundle.js +++ b/9587.6c0e8478.iframe.bundle.js @@ -240,6 +240,11 @@ var MetadataBase = /*#__PURE__*/function (_Base) { value: function _titleLoaded() { this._updateLayout(); } + }, { + key: "_subtitleLoaded", + value: function _subtitleLoaded() { + this._updateLayout(); + } }, { key: "_detailsLoaded", value: function _detailsLoaded(_ref) { @@ -281,6 +286,7 @@ var MetadataBase = /*#__PURE__*/function (_Base) { value: function _updateLines() { this._Text.w = this._textW(); this._updateTitle(); + this._updateSubtitle(); this._updateDetails(); this._updateDescription(); } @@ -334,6 +340,33 @@ var MetadataBase = /*#__PURE__*/function (_Base) { } }); } + }, { + key: "_updateSubtitle", + value: function _updateSubtitle() { + if (!this.subtitle && !this._Subtitle) { + return; + } + if (!this._Subtitle) { + this._Text.childList.addAt({ + ref: 'Subtitle', + type: TextBox/* default */.Z, + signals: { + textBoxChanged: '_subtitleLoaded' + } + }, 1); + } + this._Subtitle.patch({ + content: this.subtitle, + marquee: this.marquee, + style: { + textStyle: MetadataBase_objectSpread(MetadataBase_objectSpread({}, this.style.descriptionTextStyle), {}, { + maxLines: 1, + wordWrap: true, + wordWrapWidth: this._Text.w + }) + } + }); + } }, { key: "resetMarquee", value: function resetMarquee() { @@ -432,6 +465,7 @@ var MetadataBase = /*#__PURE__*/function (_Base) { }); } this.logoPosition = this.logoPosition || 'right'; + var subtitleH = this.subtitle && this._Subtitle && this._Subtitle.h || 0; this._Logo.patch({ w: this.logoWidth, h: this.logoHeight, @@ -439,7 +473,7 @@ var MetadataBase = /*#__PURE__*/function (_Base) { alpha: this.style.alpha }); this._Logo.x = this.logoPosition === 'left' ? 0 : this.w - this._Logo.w; - this._Logo.y = (this.h - this.logoHeight) / 2; + this._Logo.y = (this.h - this.logoHeight + subtitleH) / 2; } }, { key: "_textW", @@ -450,9 +484,10 @@ var MetadataBase = /*#__PURE__*/function (_Base) { key: "_textH", value: function _textH() { var titleH = this.title && this._Title && this._Title.h || 0; + var subtitleH = this.subtitle && this._Subtitle && this._Subtitle.h || 0; var detailsH = this.details && this._DetailsWrapper && this._DetailsWrapper.h || 0; var descriptionH = this.description && this._Description && this._Description.h || 0; - return titleH + detailsH + descriptionH; + return titleH + subtitleH + detailsH + descriptionH; } }, { key: "_getLogoWidth", @@ -477,12 +512,12 @@ var MetadataBase = /*#__PURE__*/function (_Base) { }, { key: "syncArray", get: function get() { - return [].concat(_toConsumableArray(this._Title ? [this._Title] : []), _toConsumableArray(this._Description ? [this._Description] : []), _toConsumableArray(this._Details ? [this._Details] : [])); + return [].concat(_toConsumableArray(this._Title ? [this._Title] : []), _toConsumableArray(this._Subtitle ? [this._Subtitle] : []), _toConsumableArray(this._Description ? [this._Description] : []), _toConsumableArray(this._Details ? [this._Details] : [])); } }, { key: "announce", get: function get() { - return this._announce || [this._Title && this._Title.announce, this._Details && this._Details.announce, this._Description && this._Description.announce, this.logoTitle]; + return this._announce || [this._Title && this._Title.announce, this._Subtitle && this._Subtitle.announce, this._Details && this._Details.announce, this._Description && this._Description.announce, this.logoTitle]; }, set: function set(announce) { _set(_getPrototypeOf(MetadataBase.prototype), "announce", announce, this, true); @@ -508,6 +543,7 @@ var MetadataBase = /*#__PURE__*/function (_Base) { justifyContent: 'flex-start' }, // Title: {}, + // Subtitle: {}, DetailsWrapper: { // Details: {} } @@ -522,7 +558,7 @@ var MetadataBase = /*#__PURE__*/function (_Base) { }, { key: "properties", get: function get() { - return ['description', 'logo', 'logoHeight', 'logoPosition', 'logoTitle', 'logoWidth', 'details', 'title', 'marquee']; + return ['description', 'logo', 'logoHeight', 'logoPosition', 'logoTitle', 'logoWidth', 'details', 'subtitle', 'title', 'marquee']; } }, { key: "tags", @@ -530,6 +566,9 @@ var MetadataBase = /*#__PURE__*/function (_Base) { return ['Text', { name: 'Title', path: 'Text.Title' + }, { + name: 'Subtitle', + path: 'Text.Subtitle' }, { name: 'DetailsWrapper', path: 'Text.DetailsWrapper' @@ -541,22 +580,6 @@ var MetadataBase = /*#__PURE__*/function (_Base) { path: 'Text.Description' }, 'Logo']; } - }, { - key: "aliasStyles", - get: function get() { - return [{ - prev: 'subtitleTextStyle', - curr: 'detailsTextStyle' - }]; - } - }, { - key: "aliasProperties", - get: function get() { - return [{ - prev: 'subtitle', - curr: 'details' - }]; - } }]); return MetadataBase; }(Base/* default */.Z); @@ -708,4 +731,4 @@ function withMarqueeSync(Base) { /***/ }) }]); -//# sourceMappingURL=9587.2de1cb6f.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=9587.6c0e8478.iframe.bundle.js.map \ No newline at end of file diff --git a/9587.6c0e8478.iframe.bundle.js.map b/9587.6c0e8478.iframe.bundle.js.map new file mode 100644 index 000000000..f1ed8c478 --- /dev/null +++ b/9587.6c0e8478.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"9587.6c0e8478.iframe.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;;;;;;;;ACpBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;AChFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAEA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAIA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAEA;AAEA;AAEA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAGA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AAMA;AAAA;AAAA;AAAA;AAOA;AASA;AAAA;AAbA;AACA;AAAA;AAAA;AAAA;AAlWA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAYA;AAAA;AAAA;AAAA;AAGA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAGA;AAAA;AAAA;AAAA;AA+SA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5YA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAEA;AAAA;AAEA;AACA;AACA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AA1EA;AACA;AAAA;AAAA;AAAA;AA2EA","sources":["webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withMarqueeSync/index.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.styles.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js","webpack://lightning-ui-docs/../../@lightningjs/ui-components/src/mixins/withMarqueeSync/withMarqueeSync.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 withMarqueeSync from './withMarqueeSync';\n\nexport default withMarqueeSync;\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 descriptionTextStyle: { ...theme.typography.body2, maxLines: 1 },\n fadeWidth: 100,\n logoWidth: theme.typography.body3.lineHeight,\n logoHeight: theme.typography.body3.lineHeight,\n logoPadding: theme.spacer.lg,\n detailsTextStyle: theme.typography.body3,\n titleTextStyle: { ...theme.typography.headline1, maxLines: 1 },\n marqueeSync: true,\n alpha: theme.alpha.primary\n});\n\nexport const mode = theme => ({\n disabled: {\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n alpha: theme.alpha.inactive\n }\n});\n\nexport const tone = theme => ({\n neutral: {\n titleTextStyle: { textColor: theme.color.textNeutral },\n detailsTextStyle: { textColor: theme.color.textNeutral },\n descriptionTextStyle: { textColor: theme.color.textNeutralSecondary },\n mode: {\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled },\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n descriptionTextStyle: {\n textColor: theme.color.textNeutralDisabled\n }\n }\n }\n },\n inverse: {\n titleTextStyle: { textColor: theme.color.textInverse },\n detailsTextStyle: { textColor: theme.color.textInverse },\n descriptionTextStyle: { textColor: theme.color.textInverseSecondary },\n mode: {\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled },\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n descriptionTextStyle: {\n textColor: theme.color.textNeutralDisabled\n }\n }\n }\n },\n brand: {\n titleTextStyle: { textColor: theme.color.textNeutral },\n detailsTextStyle: { textColor: theme.color.textNeutral },\n descriptionTextStyle: { textColor: theme.color.textNeutralSecondary },\n mode: {\n disabled: {\n titleTextStyle: { textColor: theme.color.textNeutralDisabled },\n detailsTextStyle: { textColor: theme.color.textNeutralDisabled },\n descriptionTextStyle: {\n textColor: theme.color.textNeutralDisabled\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 Base from '../Base';\nimport Icon from '../Icon';\nimport TextBox from '../TextBox';\nimport FadeShader from '../../shaders/FadeShader';\nimport withMarqueeSync from '../../mixins/withMarqueeSync';\nimport * as styles from './MetadataBase.styles';\n\nclass MetadataBase extends Base {\n static get __componentName() {\n return 'MetadataBase';\n }\n\n static get __themeStyle() {\n return styles;\n }\n\n static _template() {\n // Comments indicate where child components are inserted\n return {\n Text: {\n flex: { direction: 'column', justifyContent: 'flex-start' },\n // Title: {},\n // Subtitle: {},\n DetailsWrapper: {\n // Details: {}\n }\n // Description: {}\n }\n // Logo: {\n // flexItem: false,\n // type: Icon\n // }\n };\n }\n\n static get properties() {\n return [\n 'description',\n 'logo',\n 'logoHeight',\n 'logoPosition',\n 'logoTitle',\n 'logoWidth',\n 'details',\n 'subtitle',\n 'title',\n 'marquee'\n ];\n }\n\n static get tags() {\n return [\n 'Text',\n {\n name: 'Title',\n path: 'Text.Title'\n },\n {\n name: 'Subtitle',\n path: 'Text.Subtitle'\n },\n {\n name: 'DetailsWrapper',\n path: 'Text.DetailsWrapper'\n },\n {\n name: 'Details',\n path: 'Text.DetailsWrapper.Details'\n },\n {\n name: 'Description',\n path: 'Text.Description'\n },\n 'Logo'\n ];\n }\n\n _titleLoaded() {\n this._updateLayout();\n }\n\n _subtitleLoaded() {\n this._updateLayout();\n }\n\n _detailsLoaded({ w, h }) {\n this._updateDetailsLayout({ w, h });\n this._updateLayout();\n }\n\n _descriptionLoaded() {\n this._updateLayout();\n }\n\n _updateDetailsLayout({ w, h }) {\n if (!this.details && !this._Details) {\n return;\n }\n\n if (this._DetailsWrapper) {\n this._DetailsWrapper.alpha = this.style.alpha;\n this._DetailsWrapper.w = w;\n this._DetailsWrapper.h = h;\n }\n }\n\n _update() {\n this._updateLines();\n this._updateLayout();\n }\n\n _updateLines() {\n this._Text.w = this._textW();\n this._updateTitle();\n this._updateSubtitle();\n this._updateDetails();\n this._updateDescription();\n }\n\n _updateLayout() {\n this._Text.h = this._textH();\n this._updateMetadataHeight();\n this._updatePositions();\n this._updateLogo();\n }\n\n _updatePositions() {\n this._Text.x =\n this.logo && this.logoPosition === 'left'\n ? this.logoWidth + this.style.logoPadding\n : 0;\n this._Text.y = (this.h - this._Text.h) / 2;\n }\n\n _updateMetadataHeight() {\n const newH = Math.max(this.logoHeight, this._Text.h);\n if (this.h !== newH) {\n this.h = newH;\n this.signal('updateComponentDimensions');\n }\n }\n\n _updateTitle() {\n if (!this.title && !this._Title) {\n return;\n }\n\n if (!this._Title) {\n this._Text.childList.addAt(\n {\n ref: 'Title',\n type: TextBox,\n signals: {\n textBoxChanged: '_titleLoaded'\n }\n },\n 0\n );\n }\n this._Title.patch({\n content: this.title,\n marquee: this.marquee,\n style: {\n textStyle: {\n ...this.style.titleTextStyle,\n maxLines: 1,\n wordWrap: true,\n wordWrapWidth: this._Text.w\n }\n }\n });\n }\n\n _updateSubtitle() {\n if (!this.subtitle && !this._Subtitle) {\n return;\n }\n\n if (!this._Subtitle) {\n this._Text.childList.addAt(\n {\n ref: 'Subtitle',\n type: TextBox,\n signals: {\n textBoxChanged: '_subtitleLoaded'\n }\n },\n 1\n );\n }\n\n this._Subtitle.patch({\n content: this.subtitle,\n marquee: this.marquee,\n style: {\n textStyle: {\n ...this.style.descriptionTextStyle,\n maxLines: 1,\n wordWrap: true,\n wordWrapWidth: this._Text.w\n }\n }\n });\n }\n\n resetMarquee() {\n if (this.marquee) {\n if (this.title) {\n if (!this._Title) {\n this._updateTitle();\n }\n this._Title.toggleMarquee();\n }\n if (this.description) {\n if (!this._Description) {\n this._updateDescription();\n }\n this._Description.toggleMarquee();\n }\n }\n }\n\n _updateDetails() {\n if (!this.details && !this._Details) {\n return;\n }\n\n if (!this._Details) {\n this._DetailsWrapper.patch({\n Details: {\n type: TextBox,\n signals: {\n textBoxChanged: '_detailsLoaded'\n }\n }\n });\n }\n\n this._Details.patch({\n content: this.details,\n style: { textStyle: this.style.detailsTextStyle }\n });\n\n if (this._Details.finalW > this._textW()) {\n this._Details.patch({\n w: this._textW() + this.style.fadeWidth / 2,\n shader: {\n type: FadeShader,\n positionLeft: 0,\n positionRight: this.style.fadeWidth\n },\n rtt: true\n });\n } else {\n this._DetailsWrapper.shader = undefined;\n }\n this._DetailsWrapper.visible = this.details ? true : false;\n this._DetailsWrapper.alpha = this.style.alpha;\n }\n\n _updateDescription() {\n if (!this.description && !this._Description) {\n return;\n }\n\n if (!this._Description) {\n this._Text.childList.add({\n ref: 'Description',\n type: TextBox,\n signals: {\n textBoxChanged: '_descriptionLoaded'\n }\n });\n }\n\n this._Description.patch({\n content: this.description,\n marquee: this.marquee,\n style: {\n textStyle: {\n ...this.style.descriptionTextStyle,\n maxLines: 1,\n wordWrap: true,\n wordWrapWidth: this._Text.w\n }\n }\n });\n }\n\n _updateLogo() {\n if (!this.logo && !this._Logo) {\n return;\n }\n\n if (!this._Logo) {\n this.patch({\n Logo: {\n flexItem: false,\n type: Icon\n }\n });\n }\n\n this.logoPosition = this.logoPosition || 'right';\n const subtitleH =\n (this.subtitle && this._Subtitle && this._Subtitle.h) || 0;\n this._Logo.patch({\n w: this.logoWidth,\n h: this.logoHeight,\n icon: this.logo,\n alpha: this.style.alpha\n });\n\n this._Logo.x = this.logoPosition === 'left' ? 0 : this.w - this._Logo.w;\n this._Logo.y = (this.h - this.logoHeight + subtitleH) / 2;\n }\n\n _textW() {\n return this.w - (this.logo ? this.logoWidth + this.style.logoPadding : 0);\n }\n\n _textH() {\n const titleH = (this.title && this._Title && this._Title.h) || 0;\n const subtitleH =\n (this.subtitle && this._Subtitle && this._Subtitle.h) || 0;\n const detailsH =\n (this.details && this._DetailsWrapper && this._DetailsWrapper.h) || 0;\n const descriptionH =\n (this.description && this._Description && this._Description.h) || 0;\n return titleH + subtitleH + detailsH + descriptionH;\n }\n\n _getLogoWidth() {\n return this._logoWidth !== undefined\n ? this._logoWidth\n : this.style.logoWidth;\n }\n\n _setLogoWidth(w) {\n return w !== undefined ? w : this.logoWidth;\n }\n\n _getLogoHeight() {\n return this._logoHeight !== undefined\n ? this._logoHeight\n : this.style.logoHeight;\n }\n\n _setLogoHeight(h) {\n return h !== undefined ? h : this.logoHeight;\n }\n\n get syncArray() {\n return [\n ...(this._Title ? [this._Title] : []),\n ...(this._Subtitle ? [this._Subtitle] : []),\n ...(this._Description ? [this._Description] : []),\n ...(this._Details ? [this._Details] : [])\n ];\n }\n\n set announce(announce) {\n super.announce = announce;\n }\n\n get announce() {\n return (\n this._announce || [\n this._Title && this._Title.announce,\n this._Subtitle && this._Subtitle.announce,\n this._Details && this._Details.announce,\n this._Description && this._Description.announce,\n this.logoTitle\n ]\n );\n }\n}\n\nexport default withMarqueeSync(MetadataBase);\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 logger from '../../globals/context/logger';\n/**\n * apply to a component to synchronize the marquee scroll\n * timing of child TextBox components. Target class must\n * have a `get syncArray` property, which contains an\n * array of the tags of all TextBoxes to be synchronized.\n *\n * @param {*} Base class to be extended\n * @returns class with marquee sync functionality\n */\nexport default function withMarqueeSync(Base) {\n return class extends Base {\n static get name() {\n return Base.name;\n }\n\n _init() {\n // use _init instead of _construct to ensure elements exist before running setup\n super._init();\n if (this._shouldSync) {\n this._updateSignals();\n }\n }\n\n _update() {\n super._update();\n if (this._shouldSync) {\n this._updateSignals();\n } else {\n this._cleanupSyncValues();\n }\n }\n\n _cleanupSyncValues() {\n this.syncArray.map(component => {\n component.marqueeOverrideLoopX = undefined;\n component.signals &&\n component.signals.willMarquee &&\n delete component.signals.willMarquee;\n });\n }\n\n _updateSignals() {\n if (this.syncArray) {\n this.syncArray.map(component => {\n // preserve signals set in Base class\n component.signals = {\n ...component.signals,\n willMarquee: '_willMarquee'\n };\n });\n }\n }\n\n _willMarquee(compRef) {\n if (this._shouldSync) {\n this._longestMarqueeWidth = Math.max(\n compRef._textRenderedW || 0,\n this._longestMarqueeWidth || 0\n );\n this.syncArray.map(component => {\n component.marqueeOverrideLoopX = this._longestMarqueeWidth;\n });\n }\n }\n\n get _shouldSync() {\n if (this.style.marqueeSync === false) {\n // only fail this case if explicitly false\n return false;\n }\n if (!this.syncArray) {\n logger.warn(\n 'warning: components using MarqueeSync must have a syncArray getter defined.'\n );\n return false;\n } else if (!Array.isArray(this.syncArray)) {\n logger.warn('warning: syncArray must be typeof array.');\n return false;\n } else if (this.syncArray.length < 2) {\n logger.warn(\n 'warning: syncArray must contain at least two component references.'\n );\n return false;\n } else {\n return true;\n }\n }\n };\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-MetadataBase-MetadataBase-mdx.c32fbb6c.iframe.bundle.js b/components-MetadataBase-MetadataBase-mdx.9657e2fb.iframe.bundle.js similarity index 94% rename from components-MetadataBase-MetadataBase-mdx.c32fbb6c.iframe.bundle.js rename to components-MetadataBase-MetadataBase-mdx.9657e2fb.iframe.bundle.js index f4b989cf6..c2673e3dd 100644 --- a/components-MetadataBase-MetadataBase-mdx.c32fbb6c.iframe.bundle.js +++ b/components-MetadataBase-MetadataBase-mdx.9657e2fb.iframe.bundle.js @@ -201,7 +201,7 @@ function _createMdxContent(props) { }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code, { className: "language-js", - children: "import { MetadataBase } from '@lightningjs/ui-components';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n MetadataBase: {\n type: MetadataBase,\n w: 400,\n h: 300,\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: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoWidth: 32,\n logoHeight: 32\n }\n };\n }\n}\n" + children: "import { MetadataBase } from '@lightningjs/ui-components';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n MetadataBase: {\n type: MetadataBase,\n w: 400,\n h: 300,\n title: 'Title',\n subtitle: 'Subtitle',\n details: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoWidth: 32,\n logoHeight: 32\n }\n };\n }\n}\n" }) }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2, { id: "api", @@ -226,6 +226,18 @@ function _createMdxContent(props) { }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.tbody, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.tr, { + children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.td, { + children: "subtitle" + }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.td, { + children: "string" + }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.td, { + children: "false" + }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.td, { + children: "undefined" + }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.td, { + children: "subtitle text" + })] + }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.tr, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.td, { children: "description" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.td, { @@ -475,4 +487,4 @@ if (true) { /***/ }) }]); -//# sourceMappingURL=components-MetadataBase-MetadataBase-mdx.c32fbb6c.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-MetadataBase-MetadataBase-mdx.9657e2fb.iframe.bundle.js.map \ No newline at end of file diff --git a/components-MetadataBase-MetadataBase-mdx.9657e2fb.iframe.bundle.js.map b/components-MetadataBase-MetadataBase-mdx.9657e2fb.iframe.bundle.js.map new file mode 100644 index 000000000..4c2db3b59 --- /dev/null +++ b/components-MetadataBase-MetadataBase-mdx.9657e2fb.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-MetadataBase-MetadataBase-mdx.9657e2fb.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;;;;;;;;;;;;;;;;;;AC3GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC1SA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACVA;AACA;AACA;AACA;AACA","sources":["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/MetadataBase/MetadataBase.mdx","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync","webpack://lightning-ui-docs/../../../node_modules/react/cjs/react-jsx-runtime.production.min.js","webpack://lightning-ui-docs/../../../node_modules/react/jsx-runtime.js"],"sourcesContent":["/**\n * @typedef {import('react').ReactNode} ReactNode\n * @typedef {import('mdx/types.js').MDXComponents} Components\n *\n * @typedef Props\n * Configuration.\n * @property {Components | MergeComponents | null | undefined} [components]\n * Mapping of names for JSX components to React components.\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context.\n * @property {ReactNode | null | undefined} [children]\n * Children.\n *\n * @callback MergeComponents\n * Custom merge function.\n * @param {Components} currentComponents\n * Current components from the context.\n * @returns {Components}\n * Merged components.\n */\n\nimport React from 'react'\n\n/**\n * @type {import('react').Context}\n * @deprecated\n * This export is marked as a legacy feature.\n * That means it’s no longer recommended for use as it might be removed\n * in a future major release.\n *\n * Please use `useMDXComponents` to get context based components and\n * `MDXProvider` to set context based components instead.\n */\nexport const MDXContext = React.createContext({})\n\n/**\n * @param {import('react').ComponentType} Component\n * @deprecated\n * This export is marked as a legacy feature.\n * That means it’s no longer recommended for use as it might be removed\n * in a future major release.\n *\n * Please use `useMDXComponents` to get context based components instead.\n */\nexport function withMDXComponents(Component) {\n return boundMDXComponent\n\n /**\n * @param {Record & {components?: Components | null | undefined}} props\n * @returns {JSX.Element}\n */\n function boundMDXComponent(props) {\n const allComponents = useMDXComponents(props.components)\n return React.createElement(Component, {...props, allComponents})\n }\n}\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Components | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that takes the current\n * components and filters/merges/changes them.\n * @returns {Components}\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 // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n }, [contextComponents, components])\n}\n\n/** @type {Components} */\nconst emptyObject = {}\n\n/**\n * Provider for MDX context\n *\n * @param {Props} props\n * @returns {JSX.Element}\n */\nexport function MDXProvider({components, children, disableParentContext}) {\n /** @type {Components} */\n let allComponents\n\n if (disableParentContext) {\n allComponents =\n typeof components === 'function'\n ? components({})\n : components || emptyObject\n } else {\n allComponents = useMDXComponents(components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n children\n )\n}\n","\nimport React from 'react';\n\n/*@jsxRuntime automatic @jsxImportSource react*/\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\";\nimport {Meta, Title} from '@storybook/blocks';\nimport * as MetadataBaseStories from './MetadataBase.stories';\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n h2: \"h2\",\n a: \"a\",\n pre: \"pre\",\n code: \"code\",\n h3: \"h3\",\n table: \"table\",\n thead: \"thead\",\n tr: \"tr\",\n th: \"th\",\n tbody: \"tbody\",\n td: \"td\",\n h4: \"h4\"\n }, _provideComponents(), props.components);\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: MetadataBaseStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"A component to quickly and easily lay out several pieces of 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/MetadataBase/MetadataBase.js\",\n target: \"_blank\",\n rel: \"nofollow noopener noreferrer\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"MetadataBase can be used with any combination of title, description, data (inline content), call-to-action (text), and/or a logo.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { MetadataBase } from '@lightningjs/ui-components';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport circle from '../../assets/images/circle.svg';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n MetadataBase: {\\n type: MetadataBase,\\n w: 400,\\n h: 300,\\n title: 'Title',\\n subtitle: 'Subtitle',\\n details: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoWidth: 32,\\n logoHeight: 32\\n }\\n };\\n }\\n}\\n\"\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: \"subtitle\"\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: \"subtitle text\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"description\"\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: \"third line or description of the content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"details\"\n }), _jsx(_components.td, {\n children: \"inline content\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"relevant content data in the middle\"\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: \"logo to display at bottom of component\"\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: \"true (if using logo)\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"height of logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoPosition\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"'right'\"\n }), _jsxs(_components.td, {\n children: [\"which side to place logo (\", _jsx(_components.code, {\n children: \"right\"\n }), \" or \", _jsx(_components.code, {\n children: \"left\"\n }), \")\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoTitle\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"true (if using logo)\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"title of logo to use for announcer\"\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: \"true (if using logo)\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"width of logo\"\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: \"first line or headline of the content\"\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: \"descriptionTextStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsx(_components.td, {\n children: \"text style for description\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"detailsTextStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsx(_components.td, {\n children: \"text style for details\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"fadeWidth\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"width of fade applied to second line if text encroaches on logo\"\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: \"height for logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoPadding\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing between logo and secondLine\"\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: \"width for logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"titleTextStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsx(_components.td, {\n children: \"text style for title\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"methods\",\n children: \"Methods\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"resetmarquee-void\",\n children: \"resetMarquee(): void\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"This will call \", _jsx(_components.a, {\n href: \"?path=/docs/components-textbox--docs\",\n children: \"TextBox\"\n }), \"'s \", _jsx(_components.code, {\n children: \"toggleMarquee\"\n }), \" method in order to restart or stop marquee scrolling if the marquee flag has changed.\"]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nexport default MDXContent;\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;","/**\n * @license React\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var f=require(\"react\"),k=Symbol.for(\"react.element\"),l=Symbol.for(\"react.fragment\"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};\nfunction q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=\"\"+g);void 0!==a.key&&(e=\"\"+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.min.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/components-MetadataBase-MetadataBase-mdx.c32fbb6c.iframe.bundle.js.map b/components-MetadataBase-MetadataBase-mdx.c32fbb6c.iframe.bundle.js.map deleted file mode 100644 index 63f0d7ea4..000000000 --- a/components-MetadataBase-MetadataBase-mdx.c32fbb6c.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-MetadataBase-MetadataBase-mdx.c32fbb6c.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;;;;;;;;;;;;;;;;;;AC3GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC9RA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACVA;AACA;AACA;AACA;AACA","sources":["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/MetadataBase/MetadataBase.mdx","webpack://lightning-ui-docs/../../../node_modules/memoizerific/ sync","webpack://lightning-ui-docs/../../../node_modules/react/cjs/react-jsx-runtime.production.min.js","webpack://lightning-ui-docs/../../../node_modules/react/jsx-runtime.js"],"sourcesContent":["/**\n * @typedef {import('react').ReactNode} ReactNode\n * @typedef {import('mdx/types.js').MDXComponents} Components\n *\n * @typedef Props\n * Configuration.\n * @property {Components | MergeComponents | null | undefined} [components]\n * Mapping of names for JSX components to React components.\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context.\n * @property {ReactNode | null | undefined} [children]\n * Children.\n *\n * @callback MergeComponents\n * Custom merge function.\n * @param {Components} currentComponents\n * Current components from the context.\n * @returns {Components}\n * Merged components.\n */\n\nimport React from 'react'\n\n/**\n * @type {import('react').Context}\n * @deprecated\n * This export is marked as a legacy feature.\n * That means it’s no longer recommended for use as it might be removed\n * in a future major release.\n *\n * Please use `useMDXComponents` to get context based components and\n * `MDXProvider` to set context based components instead.\n */\nexport const MDXContext = React.createContext({})\n\n/**\n * @param {import('react').ComponentType} Component\n * @deprecated\n * This export is marked as a legacy feature.\n * That means it’s no longer recommended for use as it might be removed\n * in a future major release.\n *\n * Please use `useMDXComponents` to get context based components instead.\n */\nexport function withMDXComponents(Component) {\n return boundMDXComponent\n\n /**\n * @param {Record & {components?: Components | null | undefined}} props\n * @returns {JSX.Element}\n */\n function boundMDXComponent(props) {\n const allComponents = useMDXComponents(props.components)\n return React.createElement(Component, {...props, allComponents})\n }\n}\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Components | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that takes the current\n * components and filters/merges/changes them.\n * @returns {Components}\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 // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n }, [contextComponents, components])\n}\n\n/** @type {Components} */\nconst emptyObject = {}\n\n/**\n * Provider for MDX context\n *\n * @param {Props} props\n * @returns {JSX.Element}\n */\nexport function MDXProvider({components, children, disableParentContext}) {\n /** @type {Components} */\n let allComponents\n\n if (disableParentContext) {\n allComponents =\n typeof components === 'function'\n ? components({})\n : components || emptyObject\n } else {\n allComponents = useMDXComponents(components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n children\n )\n}\n","\nimport React from 'react';\n\n/*@jsxRuntime automatic @jsxImportSource react*/\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\";\nimport {Meta, Title} from '@storybook/blocks';\nimport * as MetadataBaseStories from './MetadataBase.stories';\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n h2: \"h2\",\n a: \"a\",\n pre: \"pre\",\n code: \"code\",\n h3: \"h3\",\n table: \"table\",\n thead: \"thead\",\n tr: \"tr\",\n th: \"th\",\n tbody: \"tbody\",\n td: \"td\",\n h4: \"h4\"\n }, _provideComponents(), props.components);\n return _jsxs(_Fragment, {\n children: [\"\\n\", \"\\n\", \"\\n\", _jsx(Meta, {\n of: MetadataBaseStories\n }), \"\\n\", _jsx(Title, {}), \"\\n\", _jsx(_components.p, {\n children: \"A component to quickly and easily lay out several pieces of 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/MetadataBase/MetadataBase.js\",\n target: \"_blank\",\n rel: \"nofollow noopener noreferrer\",\n children: \"https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js\"\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: \"Usage\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"MetadataBase can be used with any combination of title, description, data (inline content), call-to-action (text), and/or a logo.\"\n }), \"\\n\", _jsx(_components.pre, {\n children: _jsx(_components.code, {\n className: \"language-js\",\n children: \"import { MetadataBase } from '@lightningjs/ui-components';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport circle from '../../assets/images/circle.svg';\\n\\nclass Example extends lng.Component {\\n static _template() {\\n return {\\n MetadataBase: {\\n type: MetadataBase,\\n w: 400,\\n h: 300,\\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: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoWidth: 32,\\n logoHeight: 32\\n }\\n };\\n }\\n}\\n\"\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: \"description\"\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: \"third line or description of the content\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"details\"\n }), _jsx(_components.td, {\n children: \"inline content\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"relevant content data in the middle\"\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: \"logo to display at bottom of component\"\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: \"true (if using logo)\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"height of logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoPosition\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"false\"\n }), _jsx(_components.td, {\n children: \"'right'\"\n }), _jsxs(_components.td, {\n children: [\"which side to place logo (\", _jsx(_components.code, {\n children: \"right\"\n }), \" or \", _jsx(_components.code, {\n children: \"left\"\n }), \")\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoTitle\"\n }), _jsx(_components.td, {\n children: \"string\"\n }), _jsx(_components.td, {\n children: \"true (if using logo)\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"title of logo to use for announcer\"\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: \"true (if using logo)\"\n }), _jsx(_components.td, {\n children: \"undefined\"\n }), _jsx(_components.td, {\n children: \"width of logo\"\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: \"first line or headline of the content\"\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: \"descriptionTextStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsx(_components.td, {\n children: \"text style for description\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"detailsTextStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsx(_components.td, {\n children: \"text style for details\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"fadeWidth\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"width of fade applied to second line if text encroaches on logo\"\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: \"height for logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"logoPadding\"\n }), _jsx(_components.td, {\n children: \"number\"\n }), _jsx(_components.td, {\n children: \"spacing between logo and secondLine\"\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: \"width for logo\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: \"titleTextStyle\"\n }), _jsx(_components.td, {\n children: \"string | object\"\n }), _jsx(_components.td, {\n children: \"text style for title\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"methods\",\n children: \"Methods\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"resetmarquee-void\",\n children: \"resetMarquee(): void\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"This will call \", _jsx(_components.a, {\n href: \"?path=/docs/components-textbox--docs\",\n children: \"TextBox\"\n }), \"'s \", _jsx(_components.code, {\n children: \"toggleMarquee\"\n }), \" method in order to restart or stop marquee scrolling if the marquee flag has changed.\"]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nexport default MDXContent;\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;","/**\n * @license React\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var f=require(\"react\"),k=Symbol.for(\"react.element\"),l=Symbol.for(\"react.fragment\"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};\nfunction q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=\"\"+g);void 0!==a.key&&(e=\"\"+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.min.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/iframe.html b/iframe.html index 81a6b0fdc..78b2a7c0c 100644 --- a/iframe.html +++ b/iframe.html @@ -367,7 +367,7 @@ window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":false};