diff --git a/iframe.html b/iframe.html index e15459a04..ef105b07a 100644 --- a/iframe.html +++ b/iframe.html @@ -363,4 +363,4 @@ - window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components/src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components\\/src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components/src/docs","files":"*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components\\/src\\/docs\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components-test-utils/src/docs","files":"*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components-test-utils\\/src\\/docs\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components-test-utils/src/docs","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components-test-utils\\/src\\/docs(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}]; \ No newline at end of file + window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components/src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components\\/src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components/src/docs","files":"*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components\\/src\\/docs\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components-test-utils/src/docs","files":"*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components-test-utils\\/src\\/docs\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"},{"titlePrefix":"","directory":"../../@lightningjs/ui-components-test-utils/src/docs","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^(?:\\.\\.\\/\\.\\.\\/@lightningjs\\/ui-components-test-utils\\/src\\/docs(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}]; \ No newline at end of file diff --git a/index.html b/index.html index 085512766..902f83f6c 100644 --- a/index.html +++ b/index.html @@ -105,4 +105,4 @@ - window['DOCS_MODE'] = false; \ No newline at end of file + window['DOCS_MODE'] = false; \ No newline at end of file diff --git a/main.2c8e313339c5701d058c.manager.bundle.js b/main.d11125f0a35ea6d53660.manager.bundle.js similarity index 80% rename from main.2c8e313339c5701d058c.manager.bundle.js rename to main.d11125f0a35ea6d53660.manager.bundle.js index 6d516cca7..80c85cb75 100644 --- a/main.2c8e313339c5701d058c.manager.bundle.js +++ b/main.d11125f0a35ea6d53660.manager.bundle.js @@ -1,14 +1,14 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{443:function(k){k.exports=JSON.parse('{"a":"2.6.0"}')},466:function(k,U,s){s(467),s(860),s(856),s(861),s(857),s(851),s(854),s(855),s(853),s(858),s(859),s(862),k.exports=s(852)},520:function(k,U){},852:function(k,U,s){"use strict";s.r(U);var p=s(0),c=s.n(p),m=s(103),E=s(142),B="lui-addons",M="".concat(B,"/downloadbutton"),J="".concat(B,"/announcetoggle"),z="".concat(B,"/gridoverlaypanel"),ie="".concat(B,"/themepanel"),ue="".concat(B,"/componentstylespanel"),K="".concat(B,"/themepicker"),xe={},Z="".concat(B,"/stagecolortoggle"),kn=s(75),xn=s(8),Ln=s(14),Un=s(5),Qn=s(18),Dn=s(15),Fn=s(10),jn=s(13),Pn=s(21),Hn=s(19),Wn=s(23),O=s(3),y=s(2);function Le(e,n){return Fe(e)||De(e,n)||Qe(e,n)||Ue()}function Ue(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. -In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Qe(e,n){if(e){if(typeof e=="string")return se(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if(t==="Object"&&e.constructor&&(t=e.constructor.name),t==="Map"||t==="Set")return Array.from(e);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return se(e,n)}}function se(e,n){(n==null||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);t=0?r=setTimeout(i,n-A):(r=null,t||(l=e.apply(o,a),o=a=null))}var f=function(){o=this,a=arguments,u=Date.now();var d=t&&!r;return r||(r=setTimeout(i,n)),d&&(l=e.apply(o,a),o=a=null),l};return f.clear=function(){r&&(clearTimeout(r),r=null)},f.flush=function(){r&&(l=e.apply(o,a),o=a=null,clearTimeout(r),r=null)},f}function q(e,n,t,r){var a=e-t,o=n-r;return Math.sqrt(Math.pow(a,2)+Math.sqrt(Math.pow(o,2)))}function hr(e,n){var t=x(e,2),r=t[0],a=t[1],o=n.core?n.core.getAbsoluteCoords(0,0):[0,0],u=x(o,2),l=u[0],i=u[1],f=q(r,a,l,i),A=q(r,a,l+n.w/2,i+n.h/2),d=q(r,a,l+n.w,i+n.h);return Math.min(f,A,d)}function br(e){if(!e)return!1;var n=e.w,t=e.h,r=e.core;r=r===void 0?{}:r;var a=r.renderContext,o=a.px,u=a.py,l=r._scissor,i=l===void 0?[]:l,f=e.stage.h/e.stage.getRenderPrecision(),A=e.stage.w/e.stage.getRenderPrecision(),d=o>=0&&o+n<=A,g=u>=0&&u+t<=f;if(!d||!g)return!1;if(i&&i.length){var v=x(i,4),C=v[0],F=C===void 0?null:C,V=v[1],b=V===void 0?null:V,h=v[2],I=h===void 0?null:h,L=v[3],S=L===void 0?null:L,j=Math.round(o+n)>=Math.round(F),le=Math.round(o)<=Math.round(F+I),P=Math.round(u+t)>=Math.round(b),Nn=Math.round(u+t)<=Math.round(b+S);return j&&le&&P&&Nn}return!0}function Q(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1,t=e.layout.screenW,r=e.layout.columnCount,a=e.layout.marginX,o=e.layout.gutterX.xs;if(n<1||n>r){console.error("Column expects a number between 1 & ".concat(r,". Received ").concat(n));return}var u=t-a*2,l=(n-1)*o,i=u-l;return i/n}function qe(e,n){var t=e.layout.columnCount,r=e.layout.gutterX.xs;return Q(e,t)*n+r*(n-1)}function pr(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1,t=e.layout.columnCount,r=e.layout.marginX,a=e.layout.gutterX.xs;return r+(Q(e,t)+a)*n}function $e(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{},r=n.w,a=n.h,o=n.ratioX,u=n.ratioY,l=n.upCount,i=t.w||0,f=t.h||0,A={};return r&&a?A={w:r,h:a}:a&&o&&u?A={w:Math.round(a*o/u),h:a}:o&&u&&l?A=_e(e,o,u,l):a&&l?A={w:Math.round(Q(e,l)),h:a}:a?A={w:i,h:a}:r?A={w:r,h:f}:A={w:i,h:f},A=Object.assign({},A,{ratioX:o,ratioY:u,upCount:l}),A}function _e(e,n,t,r){var a,o;return n&&t&&r?(a=Math.round(Q(e,r)),o=Math.round(a/n*t)):(a=0,o=0),{w:a,h:o}}function et(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"16:9",t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:":",r=n.split(t),a=x(r,2),o=a[0],u=a[1];return e*(o/u)}function tt(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"16:9",t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:":",r=n.split(t),a=x(r,2),o=a[0],u=a[1];return e/(o/u)}function de(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1;if(!e)return 0;typeof e=="number"&&(e=e.toString(16).slice(2)),e=e.replace("#","");var t=Math.round(n*255).toString(16),r="0x".concat(t).concat(e);return Number(r)}function nt(e){if(/^0x[0-9a-fA-F]{8}/g.test(e))return Number(e);if(/^#[0-9a-fA-F]{6}/g.test(e))return de(e.substr(1,6));if(typeof e=="string"&&/^[0-9]{8,10}/g.test(e))return parseInt(e);if(typeof e=="number"&&/^[0-9]{8,10}/g.test(e.toString()))return e;if(typeof e=="string"&&e.indexOf("rgba")>-1)return ge(e);if(typeof e=="string"&&e.indexOf("rgb")>-1){var n=[].concat(fe(e.replace(/rgb\(|\)/g,"").split(",")),["255"]);return Y.a.StageUtils.getArgbNumber(n)}return null}function rt(e){for(var n=x(e,2),t=n[0],r=n[1],a=t;a>0;a--)if(!(t%a)&&!(r%a))return[t/a,r/a]}function at(e){return rt(e.split("/").map(function(n){return+n})).join("/")}var ot=function(n,t){return typeof t=="string"&&(t=t.split(".").filter(function(r){return r.length})),t.reduce(function(r,a){return r&&r[a]},n)};function ge(e){var n=e.replace(/rgba\(|\)/g,"").split(",");return n[3]=n[3]*255,Y.a.StageUtils.getArgbNumber(n)}function lt(e){return e.charAt(0).toUpperCase()+e.slice(1)}function Sr(e){return e.charAt(0).toLowerCase()+e.slice(1)}var it={getWidth:function(n){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=Object.assign({padding:0,paddingLeft:0,paddingRight:0,strokeWidth:0},t),a=r.padding,o=r.paddingLeft,u=r.paddingRight,l=r.strokeWidth;return n?n-(o||a)-(u||a)-l:0},getHeight:function(n){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=Object.assign({padding:0,paddingBottom:0,paddingTop:0,strokeWidth:0},t),a=r.padding,o=r.paddingBottom,u=r.paddingTop,l=r.strokeWidth;return n?n-(o||a)-(u||a)-l:0}};function me(e,n){var t=Object.create(Object.getPrototypeOf(e));if(Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)),!n||e===n)return t;for(var r in n){var a=n[r];e.hasOwnProperty(r)?t[r]=ye(r,e,n):t[r]=a}return t}function ye(e,n,t){var r=n[e],a=t[e],o=typeof r,u=typeof a;return o!==u||u==="function"||Array.isArray(a)?a:a&&u==="object"?me(r,a):a}function ut(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},n=document.createElement("canvas"),t=n.getContext("2d"),r=e.fontStyle,a=e.fontWeight,o=e.fontSize,u=e.fontFamily,l=u===void 0?e.fontFace||"sans-serif":u,i=[r,a,o?"".concat(o,"px"):"0","'".concat(l,"'")].filter(Boolean).join(" ");t.font=i;var f=t.measureText(e.text||"");return Math.round(f.width)}function st(){for(var e=arguments.length,n=new Array(e),t=0;t1&&arguments[1]!==void 0?arguments[1]:16;setTimeout(e,n)}function dt(e,n,t){var r=["plain","json"];r.includes(t)||(t="plain");var a="data:text/".concat(t,";charset=utf-8,")+encodeURIComponent(JSON.stringify(e)),o=document.createElement("a");o.setAttribute("href",a),o.setAttribute("download",n),o.click()}var gt=function(n){return n*(Math.PI/180)},he=/({ICON.*?}|{BADGE:.*?}|{NEWLINE}|{TEXT:.*?})/g;function mt(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:"";return typeof e!="string"?!1:he.test(e)}function Ir(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:"",n=[];if(e&&typeof e=="string"||e.text){var t=typeof e=="string"?e:e.text,r=/^{ICON:(.*?)?\|(.*?)?}$/g,a=/^{BADGE:(.*?)}$/g,o=/^{NEWLINE}$/g,u=/^{TEXT:(.*?)?\|(.*?)?}$/g,l=t.split(he);l&&l.length&&l.forEach(function(i){var f=i,A=a.exec(i),d=r.exec(i),g=o.exec(i),v=u.exec(i);A&&A[1]?f={badge:A[1]}:d&&d[1]?f={title:d[1],icon:d[2]||d[1]}:g?f={newline:!0}:v&&v[1]&&(f={text:v[1],style:v[2]}),n.push(f)})}return n}function Or(){if(arguments){var e=Array.from(arguments).filter(function(n){return!isNaN(n)&&n!=null});if(e.length)return Math.max.apply(Math,fe(e))}}function yt(e,n){!e.zIndex&&typeof n!="undefined"&&n!==0&&(e.forceZIndexContext=!0,e.zIndex=0)}function vt(e){var n,t=e.element,r=e.watchProps,a=r===void 0?[]:r,o=e.sideEffect,u=o===void 0?function(){}:o;t!=null&&t.isElement||Me.error("watchForUpdates: Expected a Lightning Element passed to element parameter, received ".concat(typeof t));var l=(n=t.__core)===null||n===void 0?void 0:n._onAfterUpdate;return t.onAfterUpdate=function(i){var f=!1;a.forEach(function(A){if(!(i.transition(A)&&i.transition(A).isRunning())){var d="__watchPrev".concat(A),g=i[A];g!==i[d]&&(i[d]=g,f=!0)}}),f&&u(),l&&l(i)}.bind(this),t}var ht={isMarkupString:mt,capitalizeFirstLetter:lt,degreesToRadians:gt,downloadFile:dt,delayForAnimation:At,stringifyCompare:ft,objectPropertyOf:ct,flatten:ve,getDimension:D,getFirstNumber:st,measureTextWidth:ut,clone:me,getMergeValue:ye,RoundRect:it,rgba2argb:ge,getValFromObjPath:ot,reduceFraction:at,getValidColor:nt,getHexColor:de,getAspectRatioH:tt,getAspectRatioW:et,getWidthByUpCount:Q,getDimensions:$e,getWidthByColumnSpan:qe,createConditionalZContext:yt,watchForUpdates:vt},w=ht,bt=s(226),be=s.n(bt),pt=function(){return document&&document.querySelector("iframe")&&document.querySelector("iframe").contentWindow&&document.querySelector("iframe").contentWindow.APP},H=function(){return document&&document.querySelector("iframe")&&document.querySelector("iframe").contentWindow&&document.querySelector("iframe").contentWindow.CONTEXT},W=function(){var n=H();return n&&n.theme},$=function(){return W()||Pe};function pe(e,n){document&&document.querySelector("iframe")&&document.querySelector("iframe").contentWindow&&document.querySelector("iframe").contentWindow.postMessage({theme:e}),n&&n({LUITheme:e})}var _=function(n,t){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!0,a=H();if(a&&(a.updateTheme(n),r)){var o=W(),u=Object.keys(o).reduce(function(l,i){return typeof o[i]=="function"&&(l[i]=o[i]),l},{});H().storybookCustomTheme=Object.assign({},JSON.parse(JSON.stringify(W())),u),t({LUITheme:"custom"})}},St=be()(function(e,n,t){var r;_({color:(r={},r[e]=w.getValidColor(n),r)},t)},500);function Ct(){St.apply(void 0,arguments)}function Et(e){return It(e)||Tt(e)||Se(e)||Bt()}function Bt(){throw new TypeError(`Invalid attempt to spread non-iterable instance. -In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Tt(e){if(typeof Symbol!="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function It(e){if(Array.isArray(e))return te(e)}function ee(e,n){return Nt(e)||wt(e,n)||Se(e,n)||Ot()}function Ot(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. -In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Se(e,n){if(e){if(typeof e=="string")return te(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if(t==="Object"&&e.constructor&&(t=e.constructor.name),t==="Map"||t==="Set")return Array.from(e);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return te(e,n)}}function te(e,n){(n==null||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);t=0?r=setTimeout(i,n-A):(r=null,t||(l=e.apply(o,a),o=a=null))}var f=function(){o=this,a=arguments,u=Date.now();var d=t&&!r;return r||(r=setTimeout(i,n)),d&&(l=e.apply(o,a),o=a=null),l};return f.clear=function(){r&&(clearTimeout(r),r=null)},f.flush=function(){r&&(l=e.apply(o,a),o=a=null,clearTimeout(r),r=null)},f}function q(e,n,t,r){var a=e-t,o=n-r;return Math.sqrt(Math.pow(a,2)+Math.sqrt(Math.pow(o,2)))}function br(e,n){var t=k(e,2),r=t[0],a=t[1],o=n.core?n.core.getAbsoluteCoords(0,0):[0,0],u=k(o,2),l=u[0],i=u[1],f=q(r,a,l,i),A=q(r,a,l+n.w/2,i+n.h/2),d=q(r,a,l+n.w,i+n.h);return Math.min(f,A,d)}function pr(e){if(!e)return!1;var n=e.w,t=e.h,r=e.core;r=r===void 0?{}:r;var a=r.renderContext,o=a.px,u=a.py,l=r._scissor,i=l===void 0?[]:l,f=e.stage.h/e.stage.getRenderPrecision(),A=e.stage.w/e.stage.getRenderPrecision(),d=o>=0&&o+n<=A,g=u>=0&&u+t<=f;if(!d||!g)return!1;if(i&&i.length){var v=k(i,4),C=v[0],F=C===void 0?null:C,V=v[1],b=V===void 0?null:V,h=v[2],I=h===void 0?null:h,L=v[3],S=L===void 0?null:L,j=Math.round(o+n)>=Math.round(F),le=Math.round(o)<=Math.round(F+I),P=Math.round(u+t)>=Math.round(b),Nn=Math.round(u+t)<=Math.round(b+S);return j&&le&&P&&Nn}return!0}function Q(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1,t=e.layout.screenW,r=e.layout.columnCount,a=e.layout.marginX,o=e.layout.gutterX.xs;if(n<1||n>r){console.error("Column expects a number between 1 & ".concat(r,". Received ").concat(n));return}var u=t-a*2,l=(n-1)*o,i=u-l;return i/n}function qe(e,n){var t=e.layout.columnCount,r=e.layout.gutterX.xs;return Q(e,t)*n+r*(n-1)}function Sr(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1,t=e.layout.columnCount,r=e.layout.marginX,a=e.layout.gutterX.xs;return r+(Q(e,t)+a)*n}function $e(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{},r=n.w,a=n.h,o=n.ratioX,u=n.ratioY,l=n.upCount,i=t.w||0,f=t.h||0,A={};return r&&a?A={w:r,h:a}:a&&o&&u?A={w:Math.round(a*o/u),h:a}:o&&u&&l?A=_e(e,o,u,l):a&&l?A={w:Math.round(Q(e,l)),h:a}:a?A={w:i,h:a}:r?A={w:r,h:f}:A={w:i,h:f},A=Object.assign({},A,{ratioX:o,ratioY:u,upCount:l}),A}function _e(e,n,t,r){var a,o;return n&&t&&r?(a=Math.round(Q(e,r)),o=Math.round(a/n*t)):(a=0,o=0),{w:a,h:o}}function et(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"16:9",t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:":",r=n.split(t),a=k(r,2),o=a[0],u=a[1];return e*(o/u)}function tt(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"16:9",t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:":",r=n.split(t),a=k(r,2),o=a[0],u=a[1];return e/(o/u)}function de(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1;if(!e)return 0;typeof e=="number"&&(e=e.toString(16).slice(2)),e=e.replace("#","");var t=Math.round(n*255).toString(16),r="0x".concat(t).concat(e);return Number(r)}function nt(e){if(/^0x[0-9a-fA-F]{8}/g.test(e))return Number(e);if(/^#[0-9a-fA-F]{6}/g.test(e))return de(e.substr(1,6));if(typeof e=="string"&&/^[0-9]{8,10}/g.test(e))return parseInt(e);if(typeof e=="number"&&/^[0-9]{8,10}/g.test(e.toString()))return e;if(typeof e=="string"&&e.indexOf("rgba")>-1)return ge(e);if(typeof e=="string"&&e.indexOf("rgb")>-1){var n=[].concat(fe(e.replace(/rgb\(|\)/g,"").split(",")),["255"]);return Y.a.StageUtils.getArgbNumber(n)}return null}function rt(e){for(var n=k(e,2),t=n[0],r=n[1],a=t;a>0;a--)if(!(t%a)&&!(r%a))return[t/a,r/a]}function at(e){return rt(e.split("/").map(function(n){return+n})).join("/")}var ot=function(n,t){return typeof t=="string"&&(t=t.split(".").filter(function(r){return r.length})),t.reduce(function(r,a){return r&&r[a]},n)};function ge(e){var n=e.replace(/rgba\(|\)/g,"").split(",");return n[3]=n[3]*255,Y.a.StageUtils.getArgbNumber(n)}function lt(e){return e.charAt(0).toUpperCase()+e.slice(1)}function Cr(e){return e.charAt(0).toLowerCase()+e.slice(1)}var it={getWidth:function(n){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=Object.assign({padding:0,paddingLeft:0,paddingRight:0,strokeWidth:0},t),a=r.padding,o=r.paddingLeft,u=r.paddingRight,l=r.strokeWidth;return n?n-(o||a)-(u||a)-l:0},getHeight:function(n){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=Object.assign({padding:0,paddingBottom:0,paddingTop:0,strokeWidth:0},t),a=r.padding,o=r.paddingBottom,u=r.paddingTop,l=r.strokeWidth;return n?n-(o||a)-(u||a)-l:0}};function me(e,n){var t=Object.create(Object.getPrototypeOf(e));if(Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)),!n||e===n)return t;for(var r in n){var a=n[r];e.hasOwnProperty(r)?t[r]=ye(r,e,n):t[r]=a}return t}function ye(e,n,t){var r=n[e],a=t[e],o=typeof r,u=typeof a;return o!==u||u==="function"||Array.isArray(a)?a:a&&u==="object"?me(r,a):a}function ut(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},n=document.createElement("canvas"),t=n.getContext("2d"),r=e.fontStyle,a=e.fontWeight,o=e.fontSize,u=e.fontFamily,l=u===void 0?e.fontFace||"sans-serif":u,i=[r,a,o?"".concat(o,"px"):"0","'".concat(l,"'")].filter(Boolean).join(" ");t.font=i;var f=t.measureText(e.text||"");return Math.round(f.width)}function st(){for(var e=arguments.length,n=new Array(e),t=0;t1&&arguments[1]!==void 0?arguments[1]:16;setTimeout(e,n)}function dt(e,n,t){var r=["plain","json"];r.includes(t)||(t="plain");var a="data:text/".concat(t,";charset=utf-8,")+encodeURIComponent(JSON.stringify(e)),o=document.createElement("a");o.setAttribute("href",a),o.setAttribute("download",n),o.click()}var gt=function(n){return n*(Math.PI/180)},he=/({ICON.*?}|{BADGE:.*?}|{NEWLINE}|{TEXT:.*?})/g;function mt(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:"";return typeof e!="string"?!1:he.test(e)}function Or(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:"",n=[];if(e&&typeof e=="string"||e.text){var t=typeof e=="string"?e:e.text,r=/^{ICON:(.*?)?\|(.*?)?}$/g,a=/^{BADGE:(.*?)}$/g,o=/^{NEWLINE}$/g,u=/^{TEXT:(.*?)?\|(.*?)?}$/g,l=t.split(he);l&&l.length&&l.forEach(function(i){var f=i,A=a.exec(i),d=r.exec(i),g=o.exec(i),v=u.exec(i);A&&A[1]?f={badge:A[1]}:d&&d[1]?f={title:d[1],icon:d[2]||d[1]}:g?f={newline:!0}:v&&v[1]&&(f={text:v[1],style:v[2]}),n.push(f)})}return n}function wr(){if(arguments){var e=Array.from(arguments).filter(function(n){return!isNaN(n)&&n!=null});if(e.length)return Math.max.apply(Math,fe(e))}}function yt(e,n){!e.zIndex&&typeof n!="undefined"&&n!==0&&(e.forceZIndexContext=!0,e.zIndex=0)}function vt(e){var n,t=e.element,r=e.watchProps,a=r===void 0?[]:r,o=e.sideEffect,u=o===void 0?function(){}:o;t!=null&&t.isElement||Me.error("watchForUpdates: Expected a Lightning Element passed to element parameter, received ".concat(typeof t));var l=(n=t.__core)===null||n===void 0?void 0:n._onAfterUpdate;return t.onAfterUpdate=function(i){var f=!1;a.forEach(function(A){if(!(i.transition(A)&&i.transition(A).isRunning())){var d="__watchPrev".concat(A),g=i[A];g!==i[d]&&(i[d]=g,f=!0)}}),f&&u(),l&&l(i)}.bind(this),t}function ht(e){switch(e){case"left":return"flex-start";case"center":return"center";case"right":return"flex-end";default:return console.warn('Expected "textAlign" values are "left," "center," and "right," but instead, '.concat(e,' was received and will fall back to "left."')),"flex-start"}}var bt={isMarkupString:mt,capitalizeFirstLetter:lt,degreesToRadians:gt,downloadFile:dt,delayForAnimation:At,stringifyCompare:ft,objectPropertyOf:ct,flatten:ve,getDimension:D,getFirstNumber:st,measureTextWidth:ut,clone:me,getMergeValue:ye,RoundRect:it,rgba2argb:ge,getValFromObjPath:ot,reduceFraction:at,getValidColor:nt,getHexColor:de,getAspectRatioH:tt,getAspectRatioW:et,getWidthByUpCount:Q,getDimensions:$e,getWidthByColumnSpan:qe,createConditionalZContext:yt,watchForUpdates:vt,convertTextAlignToFlexJustify:ht},w=bt,pt=s(226),be=s.n(pt),St=function(){return document&&document.querySelector("iframe")&&document.querySelector("iframe").contentWindow&&document.querySelector("iframe").contentWindow.APP},H=function(){return document&&document.querySelector("iframe")&&document.querySelector("iframe").contentWindow&&document.querySelector("iframe").contentWindow.CONTEXT},W=function(){var n=H();return n&&n.theme},$=function(){return W()||Pe};function pe(e,n){document&&document.querySelector("iframe")&&document.querySelector("iframe").contentWindow&&document.querySelector("iframe").contentWindow.postMessage({theme:e}),n&&n({LUITheme:e})}var _=function(n,t){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!0,a=H();if(a&&(a.updateTheme(n),r)){var o=W(),u=Object.keys(o).reduce(function(l,i){return typeof o[i]=="function"&&(l[i]=o[i]),l},{});H().storybookCustomTheme=Object.assign({},JSON.parse(JSON.stringify(W())),u),t({LUITheme:"custom"})}},Ct=be()(function(e,n,t){var r;_({color:(r={},r[e]=w.getValidColor(n),r)},t)},500);function Et(){Ct.apply(void 0,arguments)}function Bt(e){return Ot(e)||It(e)||Se(e)||Tt()}function Tt(){throw new TypeError(`Invalid attempt to spread non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function It(e){if(typeof Symbol!="undefined"&&e[Symbol.iterator]!=null||e["@@iterator"]!=null)return Array.from(e)}function Ot(e){if(Array.isArray(e))return te(e)}function ee(e,n){return Nt(e)||xt(e,n)||Se(e,n)||wt()}function wt(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Se(e,n){if(e){if(typeof e=="string")return te(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if(t==="Object"&&e.constructor&&(t=e.constructor.name),t==="Map"||t==="Set")return Array.from(e);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return te(e,n)}}function te(e,n){(n==null||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);te.length)&&(n=e.length);for(var t=0,r=new Array(n);t\\n class Artwork extends lng.Component {\\n static _template() {\\n return {\\n Artwork: {\\n type: ArtworkComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nArtwork.args = {\\n blur: false,\\n foregroundSrc: false,\\n gradient: false,\\n format: 'default',\\n srcCallback: false,\\n fill: false,\\n shouldScale: false\\n};\\n\\nArtwork.argTypes = {\\n format: {\\n control: 'radio',\\n options: ['default', 'circle', 'square', 'contain'],\\n description: 'Updates the treatment of src image',\\n table: {\\n defaultValue: { summary: 'default' }\\n }\\n },\\n blur: {\\n control: 'boolean',\\n description: 'Adds blur effect to image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n gradient: {\\n control: 'boolean',\\n description: 'Adds gradient to artwork area',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n foregroundSrc: {\\n control: 'select',\\n options: [\\n 'none',\\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\\n ],\\n description: 'Image to be displayed on top of artwork',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n srcCallback: {\\n control: 'boolean',\\n description:\\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fill: {\\n control: 'boolean',\\n description: 'When true it will apply opacity on the image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n shouldScale: {\\n control: 'boolean',\\n description:\\n 'When true it will scale the image to the value specified by the imageScale property',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: '8501866671289235112',\\n srcCallback: ({ w, closestAspectRatio, src }) => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Artwork\":{\"startLoc\":{\"col\":23,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":23,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ArtworkComponent } from '.';\nimport mdx from './Artwork.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Artwork`,\n 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 { default as ArtworkComponent } from '.';\\nimport mdx from './Artwork.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Artwork`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Artwork = () =>\\n class Artwork extends lng.Component {\\n static _template() {\\n return {\\n Artwork: {\\n type: ArtworkComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nArtwork.args = {\\n blur: false,\\n foregroundSrc: false,\\n gradient: false,\\n format: 'default',\\n srcCallback: false,\\n fill: false,\\n shouldScale: false\\n};\\n\\nArtwork.argTypes = {\\n format: {\\n control: 'radio',\\n options: ['default', 'circle', 'square', 'contain'],\\n description: 'Updates the treatment of src image',\\n table: {\\n defaultValue: { summary: 'default' }\\n }\\n },\\n blur: {\\n control: 'boolean',\\n description: 'Adds blur effect to image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n gradient: {\\n control: 'boolean',\\n description: 'Adds gradient to artwork area',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n foregroundSrc: {\\n control: 'select',\\n options: [\\n 'none',\\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\\n ],\\n description: 'Image to be displayed on top of artwork',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n srcCallback: {\\n control: 'boolean',\\n description:\\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fill: {\\n control: 'boolean',\\n description: 'When true it will apply opacity on the image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n shouldScale: {\\n control: 'boolean',\\n description:\\n 'When true it will scale the image to the value specified by the imageScale property',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: '8501866671289235112',\\n srcCallback: ({ w, closestAspectRatio, src }) => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"artwork\":{\"startLoc\":{\"col\":23,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":23,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: '8501866671289235112',\n srcCallback: ({ w, closestAspectRatio, src }) => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\n srcCallback: undefined\n });\n }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ArtworkComponent } from '.';\\nimport mdx from './Artwork.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Artwork`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Artwork = () =>\\n class Artwork extends lng.Component {\\n static _template() {\\n return {\\n Artwork: {\\n type: ArtworkComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nArtwork.args = {\\n blur: false,\\n foregroundSrc: false,\\n gradient: false,\\n format: 'default',\\n srcCallback: false,\\n fill: false,\\n shouldScale: false\\n};\\n\\nArtwork.argTypes = {\\n format: {\\n control: 'radio',\\n options: ['default', 'circle', 'square', 'contain'],\\n description: 'Updates the treatment of src image',\\n table: {\\n defaultValue: { summary: 'default' }\\n }\\n },\\n blur: {\\n control: 'boolean',\\n description: 'Adds blur effect to image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n gradient: {\\n control: 'boolean',\\n description: 'Adds gradient to artwork area',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n foregroundSrc: {\\n control: 'select',\\n options: [\\n 'none',\\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\\n ],\\n description: 'Image to be displayed on top of artwork',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n srcCallback: {\\n control: 'boolean',\\n description:\\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fill: {\\n control: 'boolean',\\n description: 'When true it will apply opacity on the image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n shouldScale: {\\n control: 'boolean',\\n description:\\n 'When true it will scale the image to the value specified by the imageScale property',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: '8501866671289235112',\\n srcCallback: ({ w, closestAspectRatio, src }) => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Artwork\":{\"startLoc\":{\"col\":23,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":23,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ArtworkComponent } from '.';\nimport mdx from './Artwork.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Artwork`,\n 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 { default as ArtworkComponent } from '.';\\nimport mdx from './Artwork.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Artwork`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Artwork = () =>\\n class Artwork extends lng.Component {\\n static _template() {\\n return {\\n Artwork: {\\n type: ArtworkComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nArtwork.args = {\\n blur: false,\\n foregroundSrc: false,\\n gradient: false,\\n format: 'default',\\n srcCallback: false,\\n fill: false,\\n shouldScale: false\\n};\\n\\nArtwork.argTypes = {\\n format: {\\n control: 'radio',\\n options: ['default', 'circle', 'square', 'contain'],\\n description: 'Updates the treatment of src image',\\n table: {\\n defaultValue: { summary: 'default' }\\n }\\n },\\n blur: {\\n control: 'boolean',\\n description: 'Adds blur effect to image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n gradient: {\\n control: 'boolean',\\n description: 'Adds gradient to artwork area',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n foregroundSrc: {\\n control: 'select',\\n options: [\\n 'none',\\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\\n ],\\n description: 'Image to be displayed on top of artwork',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n srcCallback: {\\n control: 'boolean',\\n description:\\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fill: {\\n control: 'boolean',\\n description: 'When true it will apply opacity on the image',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n shouldScale: {\\n control: 'boolean',\\n description:\\n 'When true it will scale the image to the value specified by the imageScale property',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: '8501866671289235112',\\n srcCallback: ({ w, closestAspectRatio, src }) => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\\nArtwork.parameters = {\\n argActions: {\\n foregroundSrc: (foregroundSrc, component) => {\\n component.tag('Artwork').foregroundSrc =\\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\\n },\\n srcCallback: (active, component) => {\\n if (active) {\\n // Accepts a regular function or function that returns a promise\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(\\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\\n );\\n }, 500);\\n });\\n }\\n });\\n } else {\\n component.tag('Artwork').patch({\\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\\n srcCallback: undefined\\n });\\n }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"artwork\":{\"startLoc\":{\"col\":23,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":23,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: '8501866671289235112',\n srcCallback: ({ w, closestAspectRatio, src }) => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\n srcCallback: undefined\n });\n }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Artwork": { @@ -3268,7 +3268,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ArtworkComponent } from '.';\nimport mdx from './Artwork.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Artwork`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: '8501866671289235112',\n srcCallback: ({ w, closestAspectRatio, src }) => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\n srcCallback: undefined\n });\n }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n"; +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 { default as ArtworkComponent } from '.';\nimport mdx from './Artwork.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Artwork`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: '8501866671289235112',\n srcCallback: ({ w, closestAspectRatio, src }) => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\n srcCallback: undefined\n });\n }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Artwork": { @@ -3314,10 +3314,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Artwork_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][4] + "/Artwork", + title: constants["a" /* CATEGORIES */][8] + "/Artwork", 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 { default as ArtworkComponent } from '.';\nimport mdx from './Artwork.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Artwork`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: '8501866671289235112',\n srcCallback: ({ w, closestAspectRatio, src }) => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\n srcCallback: undefined\n });\n }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n", + "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 { default as ArtworkComponent } from '.';\nimport mdx from './Artwork.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Artwork`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Artwork = () =>\n class Artwork extends lng.Component {\n static _template() {\n return {\n Artwork: {\n type: ArtworkComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nArtwork.args = {\n blur: false,\n foregroundSrc: false,\n gradient: false,\n format: 'default',\n srcCallback: false,\n fill: false,\n shouldScale: false\n};\n\nArtwork.argTypes = {\n format: {\n control: 'radio',\n options: ['default', 'circle', 'square', 'contain'],\n description: 'Updates the treatment of src image',\n table: {\n defaultValue: { summary: 'default' }\n }\n },\n blur: {\n control: 'boolean',\n description: 'Adds blur effect to image',\n table: {\n defaultValue: { summary: false }\n }\n },\n gradient: {\n control: 'boolean',\n description: 'Adds gradient to artwork area',\n table: {\n defaultValue: { summary: false }\n }\n },\n foregroundSrc: {\n control: 'select',\n options: [\n 'none',\n 'https://image.tmdb.org/t/p/w500/uBZlZ8yN3zScGIsbIRnyWg14JeM.png'\n ],\n description: 'Image to be displayed on top of artwork',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n srcCallback: {\n control: 'boolean',\n description:\n 'This property can be supplied with your own custom callback function to generate the src value. The values passed back into the srcCallback can help you make the proper request from a service for the image that will best fit your artwork space.',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fill: {\n control: 'boolean',\n description: 'When true it will apply opacity on the image',\n table: {\n defaultValue: { summary: false }\n }\n },\n shouldScale: {\n control: 'boolean',\n description:\n 'When true it will scale the image to the value specified by the imageScale property',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: '8501866671289235112',\n srcCallback: ({ w, closestAspectRatio, src }) => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n `https://myriad.merlin.comcast.com/select/image?entityId=${src}&width=${w}&ratio=${closestAspectRatio}&rule=noTitle`\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://myriad.merlin.comcast.com/select/image?entityId=8501866671289235112&width=400&ratio=3x4&rule=noTitle',\n srcCallback: undefined\n });\n }\n }\n }\n};\n\nArtwork.parameters = {\n argActions: {\n foregroundSrc: (foregroundSrc, component) => {\n component.tag('Artwork').foregroundSrc =\n 'none' !== foregroundSrc ? foregroundSrc : undefined;\n },\n srcCallback: (active, component) => {\n if (active) {\n // Accepts a regular function or function that returns a promise\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(\n 'https://image.tmdb.org/t/p/w500/o7qi2v4uWQ8bZ1tW3KI0Ztn2epk.jpg'\n );\n }, 500);\n });\n }\n });\n } else {\n component.tag('Artwork').patch({\n src: 'https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg',\n srcCallback: undefined\n });\n }\n }\n }\n};\n", "locationsMap": { "artwork": { "startLoc": { @@ -3583,6 +3583,7 @@ var Icon = __webpack_require__("../../@lightningjs/ui-components/src/components/ var utils = __webpack_require__("../../@lightningjs/ui-components/src/utils/index.js"); // CONCATENATED MODULE: /home/runner/work/Lightning-UI-Components/Lightning-UI-Components/packages/@lightningjs/ui-components/src/components/Badge/Badge.styles.js + /** * Copyright 2023 Comcast Cable Communications Management, LLC * @@ -3604,36 +3605,41 @@ var utils = __webpack_require__("../../@lightningjs/ui-components/src/utils/inde var base = function base(theme) { return { contentSpacing: theme.spacer.sm, - paddingX: theme.spacer.md, + offsetY: 1, + paddingX: theme.spacer.md + theme.spacer.xxs, paddingY: theme.spacer.xs, - offsetY: theme.spacer.xxs, radius: theme.radius.sm, - textAlign: 'center', - textStyle: theme.typography.caption1 + strokeWidth: theme.stroke.sm, + textStyle: Object.assign({}, theme.typography.caption1, { + textAlign: 'center' + }) }; }; var tone = function tone(theme) { return { neutral: { backgroundColor: theme.color.fillInverseSecondary, - iconColor: theme.color.fillNeutral, + iconColor: theme.color.textNeutral, textStyle: { textColor: theme.color.textNeutral - } + }, + strokeColor: theme.color.strokeNeutral }, inverse: { backgroundColor: theme.color.fillNeutralSecondary, - iconColor: theme.color.fillInverse, + iconColor: theme.color.textInverse, textStyle: { textColor: theme.color.textInverse - } + }, + strokeColor: theme.color.strokeInverse }, brand: { backgroundColor: theme.color.fillBrand, - iconColor: theme.color.fillNeutral, + iconColor: theme.color.textNeutral, textStyle: { textColor: theme.color.textNeutral - } + }, + strokeColor: theme.color.strokeInverse } }; }; @@ -3716,6 +3722,12 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { this._updateText(); this._updateIcon(); this._updateLayout(); + this._updateVisibility(); + } + }, { + key: "_updateVisibility", + value: function _updateVisibility() { + this.alpha = this.title || this.icon ? 1 : 0; } }, { key: "_updateLayout", @@ -3723,16 +3735,15 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { this._updateWidth(); this._updateBackground(); this._updatePositions(); + this.signal('loadedBadge', this); } }, { key: "_updateBackground", value: function _updateBackground() { + var height = Math.max(this._Text.renderHeight, this._Icon.h) + this.style.paddingY * 2; this.patch({ - h: Math.max(this._Text.renderHeight, this._Icon.h) + this.style.paddingY * 2, - color: this.style.backgroundColor, - shader: { - radius: this.style.radius - } + h: height, + texture: core["a" /* default */].Tools.getRoundRect(this.w, height, this.style.radius, this.style.strokeWidth, this.style.strokeColor, true, this.style.backgroundColor) }); } }, { @@ -3740,9 +3751,7 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { value: function _updateText() { if (this._Text) { this._Text.patch({ - text: Object.assign({ - textAlign: this.style.textAlign - }, this.style.textStyle, { + text: Object.assign({}, this.style.textStyle, { text: this.title || '' }) }); @@ -3763,20 +3772,24 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { }, { key: "_updateWidth", value: function _updateWidth() { - var contentSpacing = 0; - if (this.icon && this.title) { - contentSpacing = this.style.contentSpacing; + var width = 0; + if (this.title && this.icon) { + width = this._Text.renderWidth + this._Icon.finalW + this.style.contentSpacing + this.style.paddingX * 2; + } else if (this.title) { + width = this._Text.renderWidth + this.style.paddingX * 2; + } else if (this.icon) { + width = this._Icon.finalW + this.style.paddingX * 2; } - this.w = this.title ? this._Text.renderWidth + this.style.paddingX * 2 + (this._Icon.finalW || 0) + contentSpacing : this.style.paddingX * 2 + (this._Icon.finalW || 0); + this.w = width; } }, { key: "_updatePositions", value: function _updatePositions() { this._Icon.y = this.h / 2; - if (this.iconAlign === 'left' && this.title) { + if (this.iconAlign === 'left' && this.title && this.icon) { this._Icon.x = this.style.paddingX; this._Text.x = this._Icon.x + this._Icon.finalW + this.style.contentSpacing; - } else if (this.iconAlign === 'right' && this.title) { + } else if (this.iconAlign === 'right' && this.title && this.icon) { this._Text.x = this.style.paddingX; this._Icon.x = this._Text.x + this._Text.renderWidth + this.style.contentSpacing; } else { @@ -3784,7 +3797,6 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { this._Icon.x = this.style.paddingX; } this._Text.y = this._h / 2 + this.style.offsetY; - this.signal('loadedBadge', this); } }, { key: "_getIconHeight", @@ -3797,7 +3809,7 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { }, { key: "announce", get: function get() { - return this._announce || this._Text && this._Text.text.text; + return this._announce || this.title; }, set: function set(announce) { _set(_getPrototypeOf(Badge.prototype), "announce", announce, this, true); @@ -3806,13 +3818,8 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { key: "_template", value: function _template() { return { - rect: true, - shader: { - type: core["a" /* default */].shaders.RoundedRectangle - }, Text: { - mountY: 0.5, - text: {} + mountY: 0.5 }, Icon: { type: Icon["a" /* default */], @@ -3841,7 +3848,7 @@ var Badge_Badge = /*#__PURE__*/function (_Base) { }, { key: "tags", get: function get() { - return ['Text', 'Icon']; + return ['Background', 'Text', 'Icon']; } }]); return Badge; @@ -3962,10 +3969,10 @@ function MDXContent(_ref) { }, "Usage"), Object(esm["b" /* mdx */])("p", null, "The basic component just requires a title:"), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" - }, "import { Badge } from '@lightningjs/ui-components';\nimport circle from 'src/assets/images/circle.svg';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: 'HD'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { + }, "import { Badge } from '@lightningjs/ui-components';\nimport circle from '../../assets/images/circle.svg';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: 'HD'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-badge--text", + id: "components-badge--text", mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "Or an icon:"), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", @@ -3973,15 +3980,15 @@ function MDXContent(_ref) { }, "import { Badge } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 50,\n iconHeight: 50\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-badge--icon-png", + id: "components-badge--icon-png", mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "A title and an icon can also be used together:"), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" - }, "import { Badge } from '@lightningjs/ui-components';\nimport lightning from 'src/assets/images/lightning.png';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: 'HD',\n icon: lightning\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { + }, "import { Badge } from '@lightningjs/ui-components';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: 'HD',\n icon: lightning\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-badge--text-with-icon", + id: "components-badge--text-with-icon", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -4013,7 +4020,7 @@ function MDXContent(_ref) { }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "title"), Object(esm["b" /* mdx */])("td", { + }, "icon"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "string"), Object(esm["b" /* mdx */])("td", { @@ -4025,15 +4032,15 @@ function MDXContent(_ref) { }, "undefined"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "text to render")), Object(esm["b" /* mdx */])("tr", { + }, "path to image or inline SVG XML")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "icon"), Object(esm["b" /* mdx */])("td", { + }, "iconWidth"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "string"), Object(esm["b" /* mdx */])("td", { + }, "number"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "false"), Object(esm["b" /* mdx */])("td", { @@ -4042,12 +4049,12 @@ function MDXContent(_ref) { }, "undefined"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "path to image or inline SVG XML")), Object(esm["b" /* mdx */])("tr", { + }, "width of icon (required for SVG icons)")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "padding"), Object(esm["b" /* mdx */])("td", { + }, "iconHeight"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "number"), Object(esm["b" /* mdx */])("td", { @@ -4059,12 +4066,12 @@ function MDXContent(_ref) { }, "undefined"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "padding to add on the left and right between the text and background")), Object(esm["b" /* mdx */])("tr", { + }, "height of icon (required for SVG icons)")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "iconWidth"), Object(esm["b" /* mdx */])("td", { + }, "iconAlign"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "string"), Object(esm["b" /* mdx */])("td", { @@ -4076,12 +4083,16 @@ function MDXContent(_ref) { }, "undefined"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "icon width (required for SVG icons)")), Object(esm["b" /* mdx */])("tr", { + }, "side of the text where icon will appear on (", Object(esm["b" /* mdx */])("inlineCode", { + parentName: "td" + }, "left"), " or ", Object(esm["b" /* mdx */])("inlineCode", { + parentName: "td" + }, "right"), ")")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "iconAlign"), Object(esm["b" /* mdx */])("td", { + }, "title"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "string"), Object(esm["b" /* mdx */])("td", { @@ -4093,11 +4104,7 @@ function MDXContent(_ref) { }, "undefined"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "side of the text the icon will appear on (", Object(esm["b" /* mdx */])("inlineCode", { - parentName: "td" - }, "left"), " or ", Object(esm["b" /* mdx */])("inlineCode", { - parentName: "td" - }, "right"), ")")))), Object(esm["b" /* mdx */])("h3", { + }, "text to render")))), Object(esm["b" /* mdx */])("h3", { "id": "style-properties" }, "Style Properties"), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { parentName: "table" @@ -4112,13 +4119,7 @@ function MDXContent(_ref) { }, "type"), Object(esm["b" /* mdx */])("th", { parentName: "tr", "align": null - }, "description"), Object(esm["b" /* mdx */])("th", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("th", { - parentName: "tr", - "align": null - }))), Object(esm["b" /* mdx */])("tbody", { + }, "description"))), Object(esm["b" /* mdx */])("tbody", { parentName: "table" }, Object(esm["b" /* mdx */])("tr", { parentName: "tbody" @@ -4131,13 +4132,7 @@ function MDXContent(_ref) { }, "string"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "background style properties such as shader and color"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - })), Object(esm["b" /* mdx */])("tr", { + }, "background style properties such as shader and color")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", @@ -4148,13 +4143,7 @@ function MDXContent(_ref) { }, "number"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "padding to add between the icon and the text"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - })), Object(esm["b" /* mdx */])("tr", { + }, "padding to add between the icon and the text")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", @@ -4165,64 +4154,40 @@ function MDXContent(_ref) { }, "string"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "false"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }, "undefined"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null }, "color to be applied to the icon (only works with pure white PNGs)")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "paddingX"), Object(esm["b" /* mdx */])("td", { + }, "offsetY"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "number"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "padding to add on the left and right between the text and background"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - })), Object(esm["b" /* mdx */])("tr", { + }, "offset used to vertically center the text within the container")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "paddingY"), Object(esm["b" /* mdx */])("td", { + }, "paddingX"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "number"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "padding to add on the top and bottom between the text and background"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - })), Object(esm["b" /* mdx */])("tr", { + }, "padding to add on the left and right between the text and background")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "offsetY"), Object(esm["b" /* mdx */])("td", { + }, "paddingY"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "number"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "Used to ensure text is positioned correctly"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - })), Object(esm["b" /* mdx */])("tr", { + }, "padding to add on the top and bottom between the text and background")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", @@ -4233,34 +4198,29 @@ function MDXContent(_ref) { }, "number ", "|", " array"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "shape of component"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - })), Object(esm["b" /* mdx */])("tr", { + }, "shape of component")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "textAlign"), Object(esm["b" /* mdx */])("td", { + }, "strokeColor"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "string"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "side of the component the text will appear on (", Object(esm["b" /* mdx */])("inlineCode", { - parentName: "td" - }, "left"), " or ", Object(esm["b" /* mdx */])("inlineCode", { - parentName: "td" - }, "right"), ")"), Object(esm["b" /* mdx */])("td", { + }, "color of the Badge border")), Object(esm["b" /* mdx */])("tr", { + parentName: "tbody" + }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }), Object(esm["b" /* mdx */])("td", { + }, "strokeWidth"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - })), Object(esm["b" /* mdx */])("tr", { + }, "number"), Object(esm["b" /* mdx */])("td", { + parentName: "tr", + "align": null + }, "width of the Badge border")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", @@ -4271,17 +4231,11 @@ function MDXContent(_ref) { }, "string ", "|", " object"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "text style to apply to the title"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - })))), Object(esm["b" /* mdx */])("h3", { + }, "text style to apply to the title")))), Object(esm["b" /* mdx */])("h3", { "id": "events" }, "Events"), Object(esm["b" /* mdx */])("h4", { "id": "loadedbadgevoid" - }, "$loadedBadge():void"), Object(esm["b" /* mdx */])("p", null, "Fires when the contents of the badge have finished loading and the background has been appropriately sized based on the text input.")); + }, "$loadedBadge():void"), Object(esm["b" /* mdx */])("p", null, "This event is fired when the contents of the badge have finished loading and the background has been appropriately sized based on the text input.")); } ; MDXContent.isMDXComponent = true; @@ -4325,7 +4279,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Badge from '.';\\nimport mdx from './Badge.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport circle from '../../assets/images/circle.svg';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/Badge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Text = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n title: args.title\\n }\\n };\\n }\\n };\\nText.args = {\\n title: 'HD'\\n};\\nText.argTypes = {\\n title: {\\n description: 'Badge text',\\n control: 'text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nexport const IconSVG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: circle,\\n iconWidth: 24,\\n title: 'HD'\\n }\\n };\\n }\\n };\\nIconSVG.args = {\\n iconAlign: 'left'\\n};\\n\\nIconSVG.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nexport const IconPNG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nexport const TextWithIcon = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nTextWithIcon.args = {\\n title: 'HD',\\n iconAlign: 'left'\\n};\\n\\nTextWithIcon.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Text\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}},\"IconSVG\":{\"startLoc\":{\"col\":23,\"line\":59},\"endLoc\":{\"col\":3,\"line\":71},\"startBody\":{\"col\":23,\"line\":59},\"endBody\":{\"col\":3,\"line\":71}},\"IconPNG\":{\"startLoc\":{\"col\":23,\"line\":86},\"endLoc\":{\"col\":3,\"line\":96},\"startBody\":{\"col\":23,\"line\":86},\"endBody\":{\"col\":3,\"line\":96}},\"TextWithIcon\":{\"startLoc\":{\"col\":28,\"line\":98},\"endLoc\":{\"col\":3,\"line\":108},\"startBody\":{\"col\":28,\"line\":98},\"endBody\":{\"col\":3,\"line\":108}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Badge from '.';\nimport mdx from './Badge.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/Badge`,\n 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 Badge from '.';\\nimport mdx from './Badge.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport circle from '../../assets/images/circle.svg';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/Badge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Text = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n title: args.title\\n }\\n };\\n }\\n };\\nText.args = {\\n title: 'HD'\\n};\\nText.argTypes = {\\n title: {\\n description: 'Badge text',\\n control: 'text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nexport const IconSVG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: circle,\\n iconWidth: 24,\\n title: 'HD'\\n }\\n };\\n }\\n };\\nIconSVG.args = {\\n iconAlign: 'left'\\n};\\n\\nIconSVG.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nexport const IconPNG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nexport const TextWithIcon = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nTextWithIcon.args = {\\n title: 'HD',\\n iconAlign: 'left'\\n};\\n\\nTextWithIcon.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"text\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}},\"icon-svg\":{\"startLoc\":{\"col\":23,\"line\":59},\"endLoc\":{\"col\":3,\"line\":71},\"startBody\":{\"col\":23,\"line\":59},\"endBody\":{\"col\":3,\"line\":71}},\"icon-png\":{\"startLoc\":{\"col\":23,\"line\":86},\"endLoc\":{\"col\":3,\"line\":96},\"startBody\":{\"col\":23,\"line\":86},\"endBody\":{\"col\":3,\"line\":96}},\"text-with-icon\":{\"startLoc\":{\"col\":28,\"line\":98},\"endLoc\":{\"col\":3,\"line\":108},\"startBody\":{\"col\":28,\"line\":98},\"endBody\":{\"col\":3,\"line\":108}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };;\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };;\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };;\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Badge from '.';\\nimport mdx from './Badge.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport circle from '../../assets/images/circle.svg';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Badge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Text = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n title: args.title\\n }\\n };\\n }\\n };\\nText.args = {\\n title: 'HD'\\n};\\nText.argTypes = {\\n title: {\\n description: 'Badge text',\\n control: 'text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nexport const IconSVG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: circle,\\n iconWidth: 24,\\n title: 'HD'\\n }\\n };\\n }\\n };\\nIconSVG.args = {\\n iconAlign: 'left'\\n};\\n\\nIconSVG.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nexport const IconPNG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nexport const TextWithIcon = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nTextWithIcon.args = {\\n title: 'HD',\\n iconAlign: 'left'\\n};\\n\\nTextWithIcon.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Text\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}},\"IconSVG\":{\"startLoc\":{\"col\":23,\"line\":59},\"endLoc\":{\"col\":3,\"line\":71},\"startBody\":{\"col\":23,\"line\":59},\"endBody\":{\"col\":3,\"line\":71}},\"IconPNG\":{\"startLoc\":{\"col\":23,\"line\":86},\"endLoc\":{\"col\":3,\"line\":96},\"startBody\":{\"col\":23,\"line\":86},\"endBody\":{\"col\":3,\"line\":96}},\"TextWithIcon\":{\"startLoc\":{\"col\":28,\"line\":98},\"endLoc\":{\"col\":3,\"line\":108},\"startBody\":{\"col\":28,\"line\":98},\"endBody\":{\"col\":3,\"line\":108}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Badge from '.';\nimport mdx from './Badge.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Badge`,\n 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 Badge from '.';\\nimport mdx from './Badge.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport circle from '../../assets/images/circle.svg';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Badge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Text = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n title: args.title\\n }\\n };\\n }\\n };\\nText.args = {\\n title: 'HD'\\n};\\nText.argTypes = {\\n title: {\\n description: 'Badge text',\\n control: 'text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nexport const IconSVG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: circle,\\n iconWidth: 24,\\n title: 'HD'\\n }\\n };\\n }\\n };\\nIconSVG.args = {\\n iconAlign: 'left'\\n};\\n\\nIconSVG.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nexport const IconPNG = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nexport const TextWithIcon = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Badge: {\\n type: Badge,\\n icon: lightning\\n }\\n };\\n }\\n };\\n\\nTextWithIcon.args = {\\n title: 'HD',\\n iconAlign: 'left'\\n};\\n\\nTextWithIcon.argTypes = {\\n iconAlign: {\\n control: 'select',\\n options: ['left', 'right'],\\n description: 'Side of the text the icon will appear on',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"text\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}},\"icon-svg\":{\"startLoc\":{\"col\":23,\"line\":59},\"endLoc\":{\"col\":3,\"line\":71},\"startBody\":{\"col\":23,\"line\":59},\"endBody\":{\"col\":3,\"line\":71}},\"icon-png\":{\"startLoc\":{\"col\":23,\"line\":86},\"endLoc\":{\"col\":3,\"line\":96},\"startBody\":{\"col\":23,\"line\":86},\"endBody\":{\"col\":3,\"line\":96}},\"text-with-icon\":{\"startLoc\":{\"col\":28,\"line\":98},\"endLoc\":{\"col\":3,\"line\":108},\"startBody\":{\"col\":28,\"line\":98},\"endBody\":{\"col\":3,\"line\":108}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };;\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };;\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };;\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Text": { @@ -4405,7 +4359,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 Badge from '.';\nimport mdx from './Badge.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/Badge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; +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 Badge from '.';\nimport mdx from './Badge.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Badge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Text": { @@ -4507,10 +4461,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Badge_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][32] + "/Badge", + title: constants["a" /* CATEGORIES */][8] + "/Badge", 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 Badge from '.';\nimport mdx from './Badge.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/Badge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n", + "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 Badge from '.';\nimport mdx from './Badge.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Badge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Text = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n title: args.title\n }\n };\n }\n };\nText.args = {\n title: 'HD'\n};\nText.argTypes = {\n title: {\n description: 'Badge text',\n control: 'text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nexport const IconSVG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: circle,\n iconWidth: 24,\n title: 'HD'\n }\n };\n }\n };\nIconSVG.args = {\n iconAlign: 'left'\n};\n\nIconSVG.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nexport const IconPNG = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nexport const TextWithIcon = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Badge: {\n type: Badge,\n icon: lightning\n }\n };\n }\n };\n\nTextWithIcon.args = {\n title: 'HD',\n iconAlign: 'left'\n};\n\nTextWithIcon.argTypes = {\n iconAlign: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Side of the text the icon will appear on',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Badge text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n", "locationsMap": { "text": { "startLoc": { @@ -6396,7 +6350,7 @@ function MDXContent(_ref) { }, "import { Button } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Button: {\n type: Button,\n title: 'Button'\n }\n };\n }\n}\n")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Canvas */ "b"], { mdxType: "Canvas" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Story */ "f"], { - id: "controls-button--button", + id: "components-button--button", mdxType: "Story" })), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h3", { "id": "sizing" @@ -6715,7 +6669,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ButtonComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/Button`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getComponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nexport const Button = () =>\\n class Button extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonComponent\\n }\\n };\\n }\\n };\\n\\nButton.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: Button.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getComponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getComponentArray(suffix);\\n }\\n};\\n\\nButton.argTypes = sharedArgTypes;\\nButton.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Button\":{\"startLoc\":{\"col\":22,\"line\":57},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":22,\"line\":57},\"endBody\":{\"col\":3,\"line\":66}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ButtonComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/Button`,\n 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 { default as ButtonComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/Button`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getComponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nexport const Button = () =>\\n class Button extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonComponent\\n }\\n };\\n }\\n };\\n\\nButton.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: Button.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getComponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getComponentArray(suffix);\\n }\\n};\\n\\nButton.argTypes = sharedArgTypes;\\nButton.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"button\":{\"startLoc\":{\"col\":22,\"line\":57},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":22,\"line\":57},\"endBody\":{\"col\":3,\"line\":66}}}},\n docs: {\n page: mdx\n }\n },};\n\nfunction getComponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nexport const Button = () =>\n class Button extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonComponent\n }\n };\n }\n };\n\nButton.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: Button.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getComponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getComponentArray(suffix);\n }\n};\n\nButton.argTypes = sharedArgTypes;\nButton.parameters = { argActions: sharedArgActions };\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ButtonComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Button`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getComponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nexport const Button = () =>\\n class Button extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonComponent\\n }\\n };\\n }\\n };\\n\\nButton.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: Button.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getComponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getComponentArray(suffix);\\n }\\n};\\n\\nButton.argTypes = sharedArgTypes;\\nButton.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Button\":{\"startLoc\":{\"col\":22,\"line\":57},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":22,\"line\":57},\"endBody\":{\"col\":3,\"line\":66}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ButtonComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Button`,\n 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 { default as ButtonComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Button`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getComponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nexport const Button = () =>\\n class Button extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonComponent\\n }\\n };\\n }\\n };\\n\\nButton.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: Button.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getComponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getComponentArray(suffix);\\n }\\n};\\n\\nButton.argTypes = sharedArgTypes;\\nButton.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"button\":{\"startLoc\":{\"col\":22,\"line\":57},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":22,\"line\":57},\"endBody\":{\"col\":3,\"line\":66}}}},\n docs: {\n page: mdx\n }\n },};\n\nfunction getComponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nexport const Button = () =>\n class Button extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonComponent\n }\n };\n }\n };\n\nButton.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: Button.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getComponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getComponentArray(suffix);\n }\n};\n\nButton.argTypes = sharedArgTypes;\nButton.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Button": { @@ -6741,7 +6695,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ButtonComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/Button`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getComponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nexport const Button = () =>\n class Button extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonComponent\n }\n };\n }\n };\n\nButton.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: Button.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getComponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getComponentArray(suffix);\n }\n};\n\nButton.argTypes = sharedArgTypes;\nButton.parameters = { argActions: sharedArgActions };\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 { default as ButtonComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Button`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getComponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nexport const Button = () =>\n class Button extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonComponent\n }\n };\n }\n };\n\nButton.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: Button.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getComponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getComponentArray(suffix);\n }\n};\n\nButton.argTypes = sharedArgTypes;\nButton.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Button": { @@ -6792,10 +6746,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_21__[/* CATEGORIES */ "a"][2] + "/Button", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_21__[/* CATEGORIES */ "a"][8] + "/Button", 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 { default as ButtonComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/Button`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getComponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nexport const Button = () =>\n class Button extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonComponent\n }\n };\n }\n };\n\nButton.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: Button.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getComponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getComponentArray(suffix);\n }\n};\n\nButton.argTypes = sharedArgTypes;\nButton.parameters = { argActions: sharedArgActions };\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 { default as ButtonComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Button`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getComponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nexport const Button = () =>\n class Button extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonComponent\n }\n };\n }\n };\n\nButton.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: Button.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getComponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getComponentArray(suffix);\n }\n};\n\nButton.argTypes = sharedArgTypes;\nButton.parameters = { argActions: sharedArgActions };\n", "locationsMap": { "button": { "startLoc": { @@ -7186,7 +7140,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { ButtonSmall as ButtonSmallComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ButtonSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getCommponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getCommponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getCommponentArray(suffix);\\n }\\n};\\n\\nexport const ButtonSmall = () =>\\n class ButtonSmall extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonSmallComponent\\n }\\n };\\n }\\n };\\nButtonSmall.storyName = 'ButtonSmall';\\nButtonSmall.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\nButtonSmall.argTypes = sharedArgTypes;\\nButtonSmall.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ButtonSmall\":{\"startLoc\":{\"col\":27,\"line\":115},\"endLoc\":{\"col\":3,\"line\":124},\"startBody\":{\"col\":27,\"line\":115},\"endBody\":{\"col\":3,\"line\":124}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { ButtonSmall as ButtonSmallComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ButtonSmall`,\n 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 { ButtonSmall as ButtonSmallComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ButtonSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getCommponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getCommponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getCommponentArray(suffix);\\n }\\n};\\n\\nexport const ButtonSmall = () =>\\n class ButtonSmall extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonSmallComponent\\n }\\n };\\n }\\n };\\nButtonSmall.storyName = 'ButtonSmall';\\nButtonSmall.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\nButtonSmall.argTypes = sharedArgTypes;\\nButtonSmall.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"button-small\":{\"startLoc\":{\"col\":27,\"line\":115},\"endLoc\":{\"col\":3,\"line\":124},\"startBody\":{\"col\":27,\"line\":115},\"endBody\":{\"col\":3,\"line\":124}}}},\n docs: {\n page: mdx\n }\n },};\n\nfunction getCommponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getCommponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getCommponentArray(suffix);\n }\n};\n\nexport const ButtonSmall = () =>\n class ButtonSmall extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonSmallComponent\n }\n };\n }\n };\nButtonSmall.storyName = 'ButtonSmall';\nButtonSmall.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\nButtonSmall.argTypes = sharedArgTypes;\nButtonSmall.parameters = { argActions: sharedArgActions };\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { ButtonSmall as ButtonSmallComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ButtonSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getCommponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getCommponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getCommponentArray(suffix);\\n }\\n};\\n\\nexport const ButtonSmall = () =>\\n class ButtonSmall extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonSmallComponent\\n }\\n };\\n }\\n };\\nButtonSmall.storyName = 'ButtonSmall';\\nButtonSmall.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\nButtonSmall.argTypes = sharedArgTypes;\\nButtonSmall.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ButtonSmall\":{\"startLoc\":{\"col\":27,\"line\":115},\"endLoc\":{\"col\":3,\"line\":124},\"startBody\":{\"col\":27,\"line\":115},\"endBody\":{\"col\":3,\"line\":124}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { ButtonSmall as ButtonSmallComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ButtonSmall`,\n 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 { ButtonSmall as ButtonSmallComponent } from '.';\\nimport Icon from '../Icon';\\nimport Checkbox from '../Checkbox';\\nimport mdx from './Button.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ButtonSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nfunction getCommponentArray(comps) {\\n let arr = [];\\n switch (comps) {\\n case 'icon':\\n arr = [{ type: Icon, icon: lightning }];\\n break;\\n case 'checkbox':\\n arr = [{ type: Checkbox, checked: true }];\\n break;\\n case 'combo':\\n arr = [\\n { type: Icon, icon: lightning },\\n { type: Checkbox, checked: true }\\n ];\\n break;\\n }\\n return arr;\\n}\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description: 'Justification of button content',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'icon', 'checkbox', 'combo'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n component.tag('Button').prefix = getCommponentArray(prefix);\\n },\\n suffix: (suffix, component) => {\\n component.tag('Button').suffix = getCommponentArray(suffix);\\n }\\n};\\n\\nexport const ButtonSmall = () =>\\n class ButtonSmall extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: ButtonSmallComponent\\n }\\n };\\n }\\n };\\nButtonSmall.storyName = 'ButtonSmall';\\nButtonSmall.args = {\\n title: 'Button',\\n fixed: false,\\n w: 200,\\n justify: 'center',\\n prefix: null,\\n suffix: null,\\n mode: 'focused'\\n};\\nButtonSmall.argTypes = sharedArgTypes;\\nButtonSmall.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"button-small\":{\"startLoc\":{\"col\":27,\"line\":115},\"endLoc\":{\"col\":3,\"line\":124},\"startBody\":{\"col\":27,\"line\":115},\"endBody\":{\"col\":3,\"line\":124}}}},\n docs: {\n page: mdx\n }\n },};\n\nfunction getCommponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getCommponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getCommponentArray(suffix);\n }\n};\n\nexport const ButtonSmall = () =>\n class ButtonSmall extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonSmallComponent\n }\n };\n }\n };\nButtonSmall.storyName = 'ButtonSmall';\nButtonSmall.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\nButtonSmall.argTypes = sharedArgTypes;\nButtonSmall.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ButtonSmall": { @@ -7212,7 +7166,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { ButtonSmall as ButtonSmallComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ButtonSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getCommponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getCommponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getCommponentArray(suffix);\n }\n};\n\nexport const ButtonSmall = () =>\n class ButtonSmall extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonSmallComponent\n }\n };\n }\n };\nButtonSmall.storyName = 'ButtonSmall';\nButtonSmall.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\nButtonSmall.argTypes = sharedArgTypes;\nButtonSmall.parameters = { argActions: sharedArgActions };\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 { ButtonSmall as ButtonSmallComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ButtonSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getCommponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getCommponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getCommponentArray(suffix);\n }\n};\n\nexport const ButtonSmall = () =>\n class ButtonSmall extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonSmallComponent\n }\n };\n }\n };\nButtonSmall.storyName = 'ButtonSmall';\nButtonSmall.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\nButtonSmall.argTypes = sharedArgTypes;\nButtonSmall.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ButtonSmall": { @@ -7263,10 +7217,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_21__[/* CATEGORIES */ "a"][2] + "/ButtonSmall", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_21__[/* CATEGORIES */ "a"][8] + "/ButtonSmall", 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 { ButtonSmall as ButtonSmallComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ButtonSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getCommponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getCommponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getCommponentArray(suffix);\n }\n};\n\nexport const ButtonSmall = () =>\n class ButtonSmall extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonSmallComponent\n }\n };\n }\n };\nButtonSmall.storyName = 'ButtonSmall';\nButtonSmall.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\nButtonSmall.argTypes = sharedArgTypes;\nButtonSmall.parameters = { argActions: sharedArgActions };\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 { ButtonSmall as ButtonSmallComponent } from '.';\nimport Icon from '../Icon';\nimport Checkbox from '../Checkbox';\nimport mdx from './Button.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ButtonSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nfunction getCommponentArray(comps) {\n let arr = [];\n switch (comps) {\n case 'icon':\n arr = [{ type: Icon, icon: lightning }];\n break;\n case 'checkbox':\n arr = [{ type: Checkbox, checked: true }];\n break;\n case 'combo':\n arr = [\n { type: Icon, icon: lightning },\n { type: Checkbox, checked: true }\n ];\n break;\n }\n return arr;\n}\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description: 'Justification of button content',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'icon', 'checkbox', 'combo'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n component.tag('Button').prefix = getCommponentArray(prefix);\n },\n suffix: (suffix, component) => {\n component.tag('Button').suffix = getCommponentArray(suffix);\n }\n};\n\nexport const ButtonSmall = () =>\n class ButtonSmall extends lng.Component {\n static _template() {\n return {\n Button: {\n type: ButtonSmallComponent\n }\n };\n }\n };\nButtonSmall.storyName = 'ButtonSmall';\nButtonSmall.args = {\n title: 'Button',\n fixed: false,\n w: 200,\n justify: 'center',\n prefix: null,\n suffix: null,\n mode: 'focused'\n};\nButtonSmall.argTypes = sharedArgTypes;\nButtonSmall.parameters = { argActions: sharedArgActions };\n", "locationsMap": { "button-small": { "startLoc": { @@ -7877,7 +7831,7 @@ function MDXContent(_ref) { }, "import { Card } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Card: {\n type: Card,\n title: 'Card'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "tiles-cards-card--card", + id: "components-card--card", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -7912,7 +7866,7 @@ function MDXContent(_ref) { }, "title"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "string"), Object(esm["b" /* mdx */])("td", { + }, "string ", "|", " object"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "false"), Object(esm["b" /* mdx */])("td", { @@ -7943,35 +7897,13 @@ function MDXContent(_ref) { }, Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "backgroundColorDisabled"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }, "string"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }, "color of the card when disabled")), Object(esm["b" /* mdx */])("tr", { - parentName: "tbody" - }, Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }, "backgroundColorFocused"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }, "string"), Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }, "color of the card when not disabled and when focused")), Object(esm["b" /* mdx */])("tr", { - parentName: "tbody" - }, Object(esm["b" /* mdx */])("td", { - parentName: "tr", - "align": null - }, "backgroundColorUnfocused"), Object(esm["b" /* mdx */])("td", { + }, "backgroundColor"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "string"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "color of the card when unfocused and not disabled")), Object(esm["b" /* mdx */])("tr", { + }, "color of the card")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", @@ -8048,7 +7980,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as CardComponent } from './Card.js';\\nimport mdx from './Card.mdx';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/Card`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const Card = args =>\\n class Card extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n title: args.title,\\n type: CardComponent\\n }\\n };\\n }\\n };\\n\\nCard.args = {\\n title: 'Title',\\n mode: 'focused'\\n};\\n\\nCard.argTypes = {\\n ...createModeControl({ summaryValue: Card.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Card\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\nimport { default as CardComponent } from './Card.js';\nimport mdx from './Card.mdx';\n\nexport default {\n title: `${CATEGORIES[128]}/Card`,\n tag: 'Card',\n\n 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 { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as CardComponent } from './Card.js';\\nimport mdx from './Card.mdx';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/Card`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const Card = args =>\\n class Card extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n title: args.title,\\n type: CardComponent\\n }\\n };\\n }\\n };\\n\\nCard.args = {\\n title: 'Title',\\n mode: 'focused'\\n};\\n\\nCard.argTypes = {\\n ...createModeControl({ summaryValue: Card.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"card\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}}}},\n docs: {\n page: mdx\n }\n },};\nexport const Card = args =>\n class Card extends lng.Component {\n static _template() {\n return {\n Card: {\n title: args.title,\n type: CardComponent\n }\n };\n }\n };\n\nCard.args = {\n title: 'Title',\n mode: 'focused'\n};\n\nCard.argTypes = {\n ...createModeControl({ summaryValue: Card.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as CardComponent } from './Card.js';\\nimport mdx from './Card.mdx';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Card`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const Card = args =>\\n class Card extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n title: args.title,\\n type: CardComponent\\n }\\n };\\n }\\n };\\n\\nCard.args = {\\n title: 'Title',\\n mode: 'focused'\\n};\\n\\nCard.argTypes = {\\n ...createModeControl({ summaryValue: Card.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Card\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\nimport { default as CardComponent } from './Card.js';\nimport mdx from './Card.mdx';\n\nexport default {\n title: `${CATEGORIES[8]}/Card`,\n tag: 'Card',\n\n 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 { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as CardComponent } from './Card.js';\\nimport mdx from './Card.mdx';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Card`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const Card = args =>\\n class Card extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n title: args.title,\\n type: CardComponent\\n }\\n };\\n }\\n };\\n\\nCard.args = {\\n title: 'Title',\\n mode: 'focused'\\n};\\n\\nCard.argTypes = {\\n ...createModeControl({ summaryValue: Card.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"card\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":45}}}},\n docs: {\n page: mdx\n }\n },};\nexport const Card = args =>\n class Card extends lng.Component {\n static _template() {\n return {\n Card: {\n title: args.title,\n type: CardComponent\n }\n };\n }\n };\n\nCard.args = {\n title: 'Title',\n mode: 'focused'\n};\n\nCard.argTypes = {\n ...createModeControl({ summaryValue: Card.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Card": { @@ -8074,7 +8006,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\nimport { default as CardComponent } from './Card.js';\nimport mdx from './Card.mdx';\n\nexport default {\n title: `${CATEGORIES[128]}/Card`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const Card = args =>\n class Card extends lng.Component {\n static _template() {\n return {\n Card: {\n title: args.title,\n type: CardComponent\n }\n };\n }\n };\n\nCard.args = {\n title: 'Title',\n mode: 'focused'\n};\n\nCard.argTypes = {\n ...createModeControl({ summaryValue: Card.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\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 { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\nimport { default as CardComponent } from './Card.js';\nimport mdx from './Card.mdx';\n\nexport default {\n title: `${CATEGORIES[8]}/Card`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const Card = args =>\n class Card extends lng.Component {\n static _template() {\n return {\n Card: {\n title: args.title,\n type: CardComponent\n }\n };\n }\n };\n\nCard.args = {\n title: 'Title',\n mode: 'focused'\n};\n\nCard.argTypes = {\n ...createModeControl({ summaryValue: Card.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Card": { @@ -8121,11 +8053,11 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Card_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][128] + "/Card", + title: constants["a" /* CATEGORIES */][8] + "/Card", tag: 'Card', 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 { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\nimport { default as CardComponent } from './Card.js';\nimport mdx from './Card.mdx';\n\nexport default {\n title: `${CATEGORIES[128]}/Card`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const Card = args =>\n class Card extends lng.Component {\n static _template() {\n return {\n Card: {\n title: args.title,\n type: CardComponent\n }\n };\n }\n };\n\nCard.args = {\n title: 'Title',\n mode: 'focused'\n};\n\nCard.argTypes = {\n ...createModeControl({ summaryValue: Card.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\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 { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\nimport { default as CardComponent } from './Card.js';\nimport mdx from './Card.mdx';\n\nexport default {\n title: `${CATEGORIES[8]}/Card`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const Card = args =>\n class Card extends lng.Component {\n static _template() {\n return {\n Card: {\n title: args.title,\n type: CardComponent\n }\n };\n }\n };\n\nCard.args = {\n title: 'Title',\n mode: 'focused'\n};\n\nCard.argTypes = {\n ...createModeControl({ summaryValue: Card.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n", "locationsMap": { "card": { "startLoc": { @@ -8588,14 +8520,14 @@ function MDXContent(_ref) { parentName: "p" }, "CardRadio"), " extends ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/tiles-cards-cardtitle--card-title" + "href": "?path=/docs/components-cardtitle--card-title" }, "CardTitle")), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" }, "import { CardRadio } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n CardRadio: {\n type: CardRadio,\n title: 'Title',\n subtitile: 'subtitle',\n description: 'description',\n details: 'details'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "tiles-cards-cardradio--card-radio", + id: "components-cardradio--card-radio", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -8641,7 +8573,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/utilities-radio--radio" + "href": "?path=/docs/components-radio--radio" }, "Radio component"))), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { @@ -8650,7 +8582,7 @@ function MDXContent(_ref) { }, "subtitle"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "string"), Object(esm["b" /* mdx */])("td", { + }, "string ", "|", " object"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "false"), Object(esm["b" /* mdx */])("td", { @@ -8740,7 +8672,7 @@ function CardRadio_stories_getPrototypeOf(o) { CardRadio_stories_getPrototypeOf /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CardRadioComponent } from './CardRadio.js';\\nimport mdx from './CardRadio.mdx';\\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardRadio`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst description =\\n \\\"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\\\";\\n\\nconst Details =\\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\\n\\nexport const CardRadio = () =>\\n class CardRadio extends lng.Component {\\n static _template() {\\n return {\\n CardRadio: {\\n type: CardRadioComponent\\n }\\n };\\n }\\n };\\n\\nCardRadio.storyName = 'CardRadio';\\n\\nCardRadio.args = {\\n title: 'Hulu (ad-supported)',\\n description: description,\\n details: Details,\\n subtitle: '$6.99 per month plus taxes & fees',\\n mode: 'focused'\\n};\\n\\nCardRadio.argTypes = {\\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 subtitle: {\\n control: 'text',\\n description: 'subtitle text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardRadio',\\n baseStory: CardRadio,\\n subStory: RadioStory,\\n targetProperty: 'radio',\\n include: ['checked']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardRadio\":{\"startLoc\":{\"col\":25,\"line\":42},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":25,\"line\":42},\"endBody\":{\"col\":3,\"line\":51}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CardRadioComponent } from './CardRadio.js';\nimport mdx from './CardRadio.mdx';\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardRadio`,\n tag: 'Card',\n 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 { default as CardRadioComponent } from './CardRadio.js';\\nimport mdx from './CardRadio.mdx';\\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardRadio`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst description =\\n \\\"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\\\";\\n\\nconst Details =\\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\\n\\nexport const CardRadio = () =>\\n class CardRadio extends lng.Component {\\n static _template() {\\n return {\\n CardRadio: {\\n type: CardRadioComponent\\n }\\n };\\n }\\n };\\n\\nCardRadio.storyName = 'CardRadio';\\n\\nCardRadio.args = {\\n title: 'Hulu (ad-supported)',\\n description: description,\\n details: Details,\\n subtitle: '$6.99 per month plus taxes & fees',\\n mode: 'focused'\\n};\\n\\nCardRadio.argTypes = {\\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 subtitle: {\\n control: 'text',\\n description: 'subtitle text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardRadio',\\n baseStory: CardRadio,\\n subStory: RadioStory,\\n targetProperty: 'radio',\\n include: ['checked']\\n});\\n\",\"locationsMap\":{\"card-radio\":{\"startLoc\":{\"col\":25,\"line\":42},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":25,\"line\":42},\"endBody\":{\"col\":3,\"line\":51}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst description =\n \"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\";\n\nconst Details =\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\n\nexport const CardRadio = () =>\n class CardRadio extends lng.Component {\n static _template() {\n return {\n CardRadio: {\n type: CardRadioComponent\n }\n };\n }\n };\n\nCardRadio.storyName = 'CardRadio';\n\nCardRadio.args = {\n title: 'Hulu (ad-supported)',\n description: description,\n details: Details,\n subtitle: '$6.99 per month plus taxes & fees',\n mode: 'focused'\n};\n\nCardRadio.argTypes = {\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 subtitle: {\n control: 'text',\n description: 'subtitle text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'CardRadio',\n baseStory: CardRadio,\n subStory: RadioStory,\n targetProperty: 'radio',\n include: ['checked']\n});\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CardRadioComponent } from './CardRadio.js';\\nimport mdx from './CardRadio.mdx';\\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardRadio`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst description =\\n \\\"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\\\";\\n\\nconst Details =\\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\\n\\nexport const CardRadio = () =>\\n class CardRadio extends lng.Component {\\n static _template() {\\n return {\\n CardRadio: {\\n type: CardRadioComponent\\n }\\n };\\n }\\n };\\n\\nCardRadio.storyName = 'CardRadio';\\n\\nCardRadio.args = {\\n title: 'Hulu (ad-supported)',\\n description: description,\\n details: Details,\\n subtitle: '$6.99 per month plus taxes & fees',\\n mode: 'focused'\\n};\\n\\nCardRadio.argTypes = {\\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 subtitle: {\\n control: 'text',\\n description: 'subtitle text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardRadio',\\n baseStory: CardRadio,\\n subStory: RadioStory,\\n targetProperty: 'radio',\\n include: ['checked']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardRadio\":{\"startLoc\":{\"col\":25,\"line\":42},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":25,\"line\":42},\"endBody\":{\"col\":3,\"line\":51}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CardRadioComponent } from './CardRadio.js';\nimport mdx from './CardRadio.mdx';\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardRadio`,\n tag: 'Card',\n 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 { default as CardRadioComponent } from './CardRadio.js';\\nimport mdx from './CardRadio.mdx';\\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardRadio`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst description =\\n \\\"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\\\";\\n\\nconst Details =\\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\\n\\nexport const CardRadio = () =>\\n class CardRadio extends lng.Component {\\n static _template() {\\n return {\\n CardRadio: {\\n type: CardRadioComponent\\n }\\n };\\n }\\n };\\n\\nCardRadio.storyName = 'CardRadio';\\n\\nCardRadio.args = {\\n title: 'Hulu (ad-supported)',\\n description: description,\\n details: Details,\\n subtitle: '$6.99 per month plus taxes & fees',\\n mode: 'focused'\\n};\\n\\nCardRadio.argTypes = {\\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 subtitle: {\\n control: 'text',\\n description: 'subtitle text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardRadio',\\n baseStory: CardRadio,\\n subStory: RadioStory,\\n targetProperty: 'radio',\\n include: ['checked']\\n});\\n\",\"locationsMap\":{\"card-radio\":{\"startLoc\":{\"col\":25,\"line\":42},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":25,\"line\":42},\"endBody\":{\"col\":3,\"line\":51}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst description =\n \"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\";\n\nconst Details =\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\n\nexport const CardRadio = () =>\n class CardRadio extends lng.Component {\n static _template() {\n return {\n CardRadio: {\n type: CardRadioComponent\n }\n };\n }\n };\n\nCardRadio.storyName = 'CardRadio';\n\nCardRadio.args = {\n title: 'Hulu (ad-supported)',\n description: description,\n details: Details,\n subtitle: '$6.99 per month plus taxes & fees',\n mode: 'focused'\n};\n\nCardRadio.argTypes = {\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 subtitle: {\n control: 'text',\n description: 'subtitle text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'CardRadio',\n baseStory: CardRadio,\n subStory: RadioStory,\n targetProperty: 'radio',\n include: ['checked']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardRadio": { @@ -8766,7 +8698,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as CardRadioComponent } from './CardRadio.js';\nimport mdx from './CardRadio.mdx';\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardRadio`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst description =\n \"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\";\n\nconst Details =\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\n\nexport const CardRadio = () =>\n class CardRadio extends lng.Component {\n static _template() {\n return {\n CardRadio: {\n type: CardRadioComponent\n }\n };\n }\n };\n\nCardRadio.storyName = 'CardRadio';\n\nCardRadio.args = {\n title: 'Hulu (ad-supported)',\n description: description,\n details: Details,\n subtitle: '$6.99 per month plus taxes & fees',\n mode: 'focused'\n};\n\nCardRadio.argTypes = {\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 subtitle: {\n control: 'text',\n description: 'subtitle text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'CardRadio',\n baseStory: CardRadio,\n subStory: RadioStory,\n targetProperty: 'radio',\n include: ['checked']\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 { default as CardRadioComponent } from './CardRadio.js';\nimport mdx from './CardRadio.mdx';\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardRadio`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst description =\n \"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\";\n\nconst Details =\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\n\nexport const CardRadio = () =>\n class CardRadio extends lng.Component {\n static _template() {\n return {\n CardRadio: {\n type: CardRadioComponent\n }\n };\n }\n };\n\nCardRadio.storyName = 'CardRadio';\n\nCardRadio.args = {\n title: 'Hulu (ad-supported)',\n description: description,\n details: Details,\n subtitle: '$6.99 per month plus taxes & fees',\n mode: 'focused'\n};\n\nCardRadio.argTypes = {\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 subtitle: {\n control: 'text',\n description: 'subtitle text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'CardRadio',\n baseStory: CardRadio,\n subStory: RadioStory,\n targetProperty: 'radio',\n include: ['checked']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardRadio": { @@ -8814,11 +8746,11 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var CardRadio_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][128] + "/CardRadio", + title: constants["a" /* CATEGORIES */][8] + "/CardRadio", tag: 'Card', 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 { default as CardRadioComponent } from './CardRadio.js';\nimport mdx from './CardRadio.mdx';\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardRadio`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst description =\n \"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\";\n\nconst Details =\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\n\nexport const CardRadio = () =>\n class CardRadio extends lng.Component {\n static _template() {\n return {\n CardRadio: {\n type: CardRadioComponent\n }\n };\n }\n };\n\nCardRadio.storyName = 'CardRadio';\n\nCardRadio.args = {\n title: 'Hulu (ad-supported)',\n description: description,\n details: Details,\n subtitle: '$6.99 per month plus taxes & fees',\n mode: 'focused'\n};\n\nCardRadio.argTypes = {\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 subtitle: {\n control: 'text',\n description: 'subtitle text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'CardRadio',\n baseStory: CardRadio,\n subStory: RadioStory,\n targetProperty: 'radio',\n include: ['checked']\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 { default as CardRadioComponent } from './CardRadio.js';\nimport mdx from './CardRadio.mdx';\nimport { Radio as RadioStory } from '../Radio/Radio.stories.js';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardRadio`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst description =\n \"Get Hulu and stream the TV you love, anytime, on your favorite devices. We're talking new TV, classic TV, laugh-your-face-off TV, cry-your-eyes-out TV, and every other kind of TV. Plus, get Hulu Originals –- shows you can't watch anywhere else -- and movies, docs, kids shows, and more. It's all on Hulu, and it's all waiting for you\";\n\nconst Details =\n 'This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer. This is a sample disclaimer';\n\nexport const CardRadio = () =>\n class CardRadio extends lng.Component {\n static _template() {\n return {\n CardRadio: {\n type: CardRadioComponent\n }\n };\n }\n };\n\nCardRadio.storyName = 'CardRadio';\n\nCardRadio.args = {\n title: 'Hulu (ad-supported)',\n description: description,\n details: Details,\n subtitle: '$6.99 per month plus taxes & fees',\n mode: 'focused'\n};\n\nCardRadio.argTypes = {\n ...createModeControl({ summaryValue: CardRadio.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 subtitle: {\n control: 'text',\n description: 'subtitle text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'CardRadio',\n baseStory: CardRadio,\n subStory: RadioStory,\n targetProperty: 'radio',\n include: ['checked']\n});\n", "locationsMap": { "card-radio": { "startLoc": { @@ -9247,14 +9179,14 @@ function MDXContent(_ref) { parentName: "p" }, "CardSection"), " extends ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/tiles-cards-card--card" + "href": "?path=/docs/components-card--card" }, "Card")), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" }, "import { CardSection } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n CardSection: {\n type: CardSection,\n title: 'Card Section'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "tiles-cards-cardsection--card-section", + id: "components-cardsection--card-section", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -9421,7 +9353,7 @@ function CardSection_stories_getPrototypeOf(o) { CardSection_stories_getPrototyp /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CardSectionComponent } from './CardSection.js';\\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\\nimport mdx from './CardSection.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardSection`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardSection = () =>\\n class CardSection extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardSectionComponent\\n }\\n };\\n }\\n };\\n\\nCardSection.args = {\\n iconSrc: sectionIcon,\\n title: 'Section',\\n mode: 'focused'\\n};\\n\\nCardSection.argTypes = {\\n ...createModeControl({ summaryValue: CardSection.args.mode }),\\n iconSrc: {\\n control: 'select',\\n options: [sectionIcon, 'null'],\\n description: 'Icon source',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardSection.storyName = 'CardSection';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardSection\":{\"startLoc\":{\"col\":27,\"line\":36},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":27,\"line\":36},\"endBody\":{\"col\":3,\"line\":45}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CardSectionComponent } from './CardSection.js';\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\nimport mdx from './CardSection.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardSection`,\n tag: 'Card',\n 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 { default as CardSectionComponent } from './CardSection.js';\\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\\nimport mdx from './CardSection.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardSection`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardSection = () =>\\n class CardSection extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardSectionComponent\\n }\\n };\\n }\\n };\\n\\nCardSection.args = {\\n iconSrc: sectionIcon,\\n title: 'Section',\\n mode: 'focused'\\n};\\n\\nCardSection.argTypes = {\\n ...createModeControl({ summaryValue: CardSection.args.mode }),\\n iconSrc: {\\n control: 'select',\\n options: [sectionIcon, 'null'],\\n description: 'Icon source',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardSection.storyName = 'CardSection';\\n\",\"locationsMap\":{\"card-section\":{\"startLoc\":{\"col\":27,\"line\":36},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":27,\"line\":36},\"endBody\":{\"col\":3,\"line\":45}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardSection = () =>\n class CardSection extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardSectionComponent\n }\n };\n }\n };\n\nCardSection.args = {\n iconSrc: sectionIcon,\n title: 'Section',\n mode: 'focused'\n};\n\nCardSection.argTypes = {\n ...createModeControl({ summaryValue: CardSection.args.mode }),\n iconSrc: {\n control: 'select',\n options: [sectionIcon, 'null'],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardSection.storyName = 'CardSection';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CardSectionComponent } from './CardSection.js';\\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\\nimport mdx from './CardSection.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardSection`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardSection = () =>\\n class CardSection extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardSectionComponent\\n }\\n };\\n }\\n };\\n\\nCardSection.args = {\\n iconSrc: sectionIcon,\\n title: 'Section',\\n mode: 'focused'\\n};\\n\\nCardSection.argTypes = {\\n ...createModeControl({ summaryValue: CardSection.args.mode }),\\n iconSrc: {\\n control: 'select',\\n options: [sectionIcon, 'null'],\\n description: 'Icon source',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardSection.storyName = 'CardSection';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardSection\":{\"startLoc\":{\"col\":27,\"line\":36},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":27,\"line\":36},\"endBody\":{\"col\":3,\"line\":45}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CardSectionComponent } from './CardSection.js';\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\nimport mdx from './CardSection.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardSection`,\n tag: 'Card',\n 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 { default as CardSectionComponent } from './CardSection.js';\\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\\nimport mdx from './CardSection.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardSection`,\\n tag: 'Card',\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardSection = () =>\\n class CardSection extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardSectionComponent\\n }\\n };\\n }\\n };\\n\\nCardSection.args = {\\n iconSrc: sectionIcon,\\n title: 'Section',\\n mode: 'focused'\\n};\\n\\nCardSection.argTypes = {\\n ...createModeControl({ summaryValue: CardSection.args.mode }),\\n iconSrc: {\\n control: 'select',\\n options: [sectionIcon, 'null'],\\n description: 'Icon source',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardSection.storyName = 'CardSection';\\n\",\"locationsMap\":{\"card-section\":{\"startLoc\":{\"col\":27,\"line\":36},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":27,\"line\":36},\"endBody\":{\"col\":3,\"line\":45}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardSection = () =>\n class CardSection extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardSectionComponent\n }\n };\n }\n };\n\nCardSection.args = {\n iconSrc: sectionIcon,\n title: 'Section',\n mode: 'focused'\n};\n\nCardSection.argTypes = {\n ...createModeControl({ summaryValue: CardSection.args.mode }),\n iconSrc: {\n control: 'select',\n options: [sectionIcon, 'null'],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardSection.storyName = 'CardSection';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardSection": { @@ -9447,7 +9379,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as CardSectionComponent } from './CardSection.js';\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\nimport mdx from './CardSection.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardSection`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardSection = () =>\n class CardSection extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardSectionComponent\n }\n };\n }\n };\n\nCardSection.args = {\n iconSrc: sectionIcon,\n title: 'Section',\n mode: 'focused'\n};\n\nCardSection.argTypes = {\n ...createModeControl({ summaryValue: CardSection.args.mode }),\n iconSrc: {\n control: 'select',\n options: [sectionIcon, 'null'],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardSection.storyName = 'CardSection';\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 { default as CardSectionComponent } from './CardSection.js';\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\nimport mdx from './CardSection.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardSection`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardSection = () =>\n class CardSection extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardSectionComponent\n }\n };\n }\n };\n\nCardSection.args = {\n iconSrc: sectionIcon,\n title: 'Section',\n mode: 'focused'\n};\n\nCardSection.argTypes = {\n ...createModeControl({ summaryValue: CardSection.args.mode }),\n iconSrc: {\n control: 'select',\n options: [sectionIcon, 'null'],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardSection.storyName = 'CardSection';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardSection": { @@ -9495,11 +9427,11 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var CardSection_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][128] + "/CardSection", + title: constants["a" /* CATEGORIES */][8] + "/CardSection", tag: 'Card', 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 { default as CardSectionComponent } from './CardSection.js';\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\nimport mdx from './CardSection.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardSection`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardSection = () =>\n class CardSection extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardSectionComponent\n }\n };\n }\n };\n\nCardSection.args = {\n iconSrc: sectionIcon,\n title: 'Section',\n mode: 'focused'\n};\n\nCardSection.argTypes = {\n ...createModeControl({ summaryValue: CardSection.args.mode }),\n iconSrc: {\n control: 'select',\n options: [sectionIcon, 'null'],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardSection.storyName = 'CardSection';\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 { default as CardSectionComponent } from './CardSection.js';\nimport sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';\nimport mdx from './CardSection.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardSection`,\n tag: 'Card',\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardSection = () =>\n class CardSection extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardSectionComponent\n }\n };\n }\n };\n\nCardSection.args = {\n iconSrc: sectionIcon,\n title: 'Section',\n mode: 'focused'\n};\n\nCardSection.argTypes = {\n ...createModeControl({ summaryValue: CardSection.args.mode }),\n iconSrc: {\n control: 'select',\n options: [sectionIcon, 'null'],\n description: 'Icon source',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardSection.storyName = 'CardSection';\n", "locationsMap": { "card-section": { "startLoc": { @@ -10016,14 +9948,14 @@ function MDXContent(_ref) { parentName: "p" }, "CardTitle"), " extends ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/tiles-cards-card--card" + "href": "?path=/docs/components-card--card" }, "Card")), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" }, "import { CardTitle } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardTitle,\n title: 'CardTitle',\n description: 'Description for the Card Title',\n details: 'Details'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "tiles-cards-cardtitle--card-title", + id: "components-cardtitle--card-title", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -10058,7 +9990,7 @@ function MDXContent(_ref) { }, "description"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "string"), Object(esm["b" /* mdx */])("td", { + }, "string ", "|", " object"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "false"), Object(esm["b" /* mdx */])("td", { @@ -10075,7 +10007,7 @@ function MDXContent(_ref) { }, "details"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "string"), Object(esm["b" /* mdx */])("td", { + }, "string ", "|", " object"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null }, "false"), Object(esm["b" /* mdx */])("td", { @@ -10162,7 +10094,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CardTitleComponent } from './CardTitle.js';\\nimport mdx from './CardTitle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardTitle`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const CardTitle = () =>\\n class CardTitle extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardTitleComponent\\n }\\n };\\n }\\n };\\n\\nCardTitle.args = {\\n title: 'Title',\\n description: 'Description',\\n details: 'Details',\\n mode: 'focused'\\n};\\n\\nCardTitle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardTitle.storyName = 'CardTitle';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardTitle\":{\"startLoc\":{\"col\":25,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":25,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CardTitleComponent } from './CardTitle.js';\nimport mdx from './CardTitle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardTitle`,\n tag: 'Card',\n\n 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 { default as CardTitleComponent } from './CardTitle.js';\\nimport mdx from './CardTitle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardTitle`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const CardTitle = () =>\\n class CardTitle extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardTitleComponent\\n }\\n };\\n }\\n };\\n\\nCardTitle.args = {\\n title: 'Title',\\n description: 'Description',\\n details: 'Details',\\n mode: 'focused'\\n};\\n\\nCardTitle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardTitle.storyName = 'CardTitle';\\n\",\"locationsMap\":{\"card-title\":{\"startLoc\":{\"col\":25,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":25,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\nexport const CardTitle = () =>\n class CardTitle extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardTitleComponent\n }\n };\n }\n };\n\nCardTitle.args = {\n title: 'Title',\n description: 'Description',\n details: 'Details',\n mode: 'focused'\n};\n\nCardTitle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\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 details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardTitle.storyName = 'CardTitle';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CardTitleComponent } from './CardTitle.js';\\nimport mdx from './CardTitle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardTitle`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const CardTitle = () =>\\n class CardTitle extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardTitleComponent\\n }\\n };\\n }\\n };\\n\\nCardTitle.args = {\\n title: 'Title',\\n description: 'Description',\\n details: 'Details',\\n mode: 'focused'\\n};\\n\\nCardTitle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardTitle.storyName = 'CardTitle';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardTitle\":{\"startLoc\":{\"col\":25,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":25,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CardTitleComponent } from './CardTitle.js';\nimport mdx from './CardTitle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardTitle`,\n tag: 'Card',\n\n 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 { default as CardTitleComponent } from './CardTitle.js';\\nimport mdx from './CardTitle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardTitle`,\\n tag: 'Card',\\n\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\nexport const CardTitle = () =>\\n class CardTitle extends lng.Component {\\n static _template() {\\n return {\\n Card: {\\n type: CardTitleComponent\\n }\\n };\\n }\\n };\\n\\nCardTitle.args = {\\n title: 'Title',\\n description: 'Description',\\n details: 'Details',\\n mode: 'focused'\\n};\\n\\nCardTitle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 details: {\\n control: 'text',\\n description: 'Details text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nCardTitle.storyName = 'CardTitle';\\n\",\"locationsMap\":{\"card-title\":{\"startLoc\":{\"col\":25,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":25,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\nexport const CardTitle = () =>\n class CardTitle extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardTitleComponent\n }\n };\n }\n };\n\nCardTitle.args = {\n title: 'Title',\n description: 'Description',\n details: 'Details',\n mode: 'focused'\n};\n\nCardTitle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\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 details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardTitle.storyName = 'CardTitle';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardTitle": { @@ -10188,7 +10120,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as CardTitleComponent } from './CardTitle.js';\nimport mdx from './CardTitle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardTitle`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const CardTitle = () =>\n class CardTitle extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardTitleComponent\n }\n };\n }\n };\n\nCardTitle.args = {\n title: 'Title',\n description: 'Description',\n details: 'Details',\n mode: 'focused'\n};\n\nCardTitle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\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 details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardTitle.storyName = 'CardTitle';\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 { default as CardTitleComponent } from './CardTitle.js';\nimport mdx from './CardTitle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardTitle`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const CardTitle = () =>\n class CardTitle extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardTitleComponent\n }\n };\n }\n };\n\nCardTitle.args = {\n title: 'Title',\n description: 'Description',\n details: 'Details',\n mode: 'focused'\n};\n\nCardTitle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\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 details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardTitle.storyName = 'CardTitle';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardTitle": { @@ -10235,11 +10167,11 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var CardTitle_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][128] + "/CardTitle", + title: constants["a" /* CATEGORIES */][8] + "/CardTitle", tag: 'Card', 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 { default as CardTitleComponent } from './CardTitle.js';\nimport mdx from './CardTitle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardTitle`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const CardTitle = () =>\n class CardTitle extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardTitleComponent\n }\n };\n }\n };\n\nCardTitle.args = {\n title: 'Title',\n description: 'Description',\n details: 'Details',\n mode: 'focused'\n};\n\nCardTitle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\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 details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardTitle.storyName = 'CardTitle';\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 { default as CardTitleComponent } from './CardTitle.js';\nimport mdx from './CardTitle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardTitle`,\n tag: 'Card',\n\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\nexport const CardTitle = () =>\n class CardTitle extends lng.Component {\n static _template() {\n return {\n Card: {\n type: CardTitleComponent\n }\n };\n }\n };\n\nCardTitle.args = {\n title: 'Title',\n description: 'Description',\n details: 'Details',\n mode: 'focused'\n};\n\nCardTitle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\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 details: {\n control: 'text',\n description: 'Details text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nCardTitle.storyName = 'CardTitle';\n", "locationsMap": { "card-title": { "startLoc": { @@ -10726,7 +10658,7 @@ function MDXContent(_ref) { }, "import { CardContent } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n CardContent: {\n type: CardContent\n }\n };\n }\n}\n")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Canvas */ "b"], { mdxType: "Canvas" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Story */ "f"], { - id: "tiles-cards-cardcontent--card-content", + id: "components-cardcontent--card-content", mdxType: "Story" })), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h2", { "id": "api" @@ -10862,7 +10794,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("a", { parentName: "td", - "href": "?path=/docs/elements-tile--basic" + "href": "?path=/docs/components-tile--basic" }, "Tile component"))))), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h3", { "id": "style-properties" }, "Style Properties"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("table", null, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("thead", { @@ -11065,7 +10997,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport CardContentComponent from '.';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContent = args =>\\n class CardContent extends lng.Component {\\n static _template() {\\n return {\\n CardContent: {\\n type: CardContentComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n orientation: 'horizontal'\\n }\\n };\\n }\\n };\\n\\nconst tileCategory = 'Tile';\\nCardContent.tileProps = {\\n argActions: tagName => ({\\n badge: (badgeTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n badge: { title: badgeTitle }\\n };\\n },\\n label: (labelTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n label: {\\n title: labelTitle,\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n };\\n },\\n progress: (progress, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n progressBar: { progress }\\n };\\n }\\n })\\n};\\nCardContent.storyName = 'CardContent';\\n\\nCardContent.args = {\\n shouldCollapse: false,\\n badge: 'HD',\\n label: 'Live',\\n progress: 0.5,\\n mode: 'focused'\\n};\\n\\nCardContent.argTypes = {\\n ...createModeControl({ summaryValue: CardContent.args.mode }),\\n shouldCollapse: {\\n control: 'boolean',\\n description: controlDescriptions.shouldCollapse,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n badge: {\\n name: 'title',\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n category: tileCategory,\\n subcategory: 'Badge',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n label: {\\n name: 'title',\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n category: tileCategory,\\n subcategory: 'Label',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'percentage of the current progress from 0 to 1',\\n table: {\\n category: tileCategory,\\n subcategory: 'ProgressBar',\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nCardContent.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContent')\\n};\\ngenerateSubStory({\\n componentName: 'CardContent',\\n baseStory: CardContent,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details', 'visible']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContent\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":49}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport CardContentComponent from '.';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContent`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport CardContentComponent from '.';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContent = args =>\\n class CardContent extends lng.Component {\\n static _template() {\\n return {\\n CardContent: {\\n type: CardContentComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n orientation: 'horizontal'\\n }\\n };\\n }\\n };\\n\\nconst tileCategory = 'Tile';\\nCardContent.tileProps = {\\n argActions: tagName => ({\\n badge: (badgeTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n badge: { title: badgeTitle }\\n };\\n },\\n label: (labelTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n label: {\\n title: labelTitle,\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n };\\n },\\n progress: (progress, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n progressBar: { progress }\\n };\\n }\\n })\\n};\\nCardContent.storyName = 'CardContent';\\n\\nCardContent.args = {\\n shouldCollapse: false,\\n badge: 'HD',\\n label: 'Live',\\n progress: 0.5,\\n mode: 'focused'\\n};\\n\\nCardContent.argTypes = {\\n ...createModeControl({ summaryValue: CardContent.args.mode }),\\n shouldCollapse: {\\n control: 'boolean',\\n description: controlDescriptions.shouldCollapse,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n badge: {\\n name: 'title',\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n category: tileCategory,\\n subcategory: 'Badge',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n label: {\\n name: 'title',\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n category: tileCategory,\\n subcategory: 'Label',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'percentage of the current progress from 0 to 1',\\n table: {\\n category: tileCategory,\\n subcategory: 'ProgressBar',\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nCardContent.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContent')\\n};\\ngenerateSubStory({\\n componentName: 'CardContent',\\n baseStory: CardContent,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details', 'visible']\\n});\\n\",\"locationsMap\":{\"card-content\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":49}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContent = args =>\n class CardContent extends lng.Component {\n static _template() {\n return {\n CardContent: {\n type: CardContentComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n orientation: 'horizontal'\n }\n };\n }\n };\n\nconst tileCategory = 'Tile';\nCardContent.tileProps = {\n argActions: tagName => ({\n badge: (badgeTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n badge: { title: badgeTitle }\n };\n },\n label: (labelTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n label: {\n title: labelTitle,\n table: { defaultValue: { summary: 'undefined' } }\n }\n };\n },\n progress: (progress, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n progressBar: { progress }\n };\n }\n })\n};\nCardContent.storyName = 'CardContent';\n\nCardContent.args = {\n shouldCollapse: false,\n badge: 'HD',\n label: 'Live',\n progress: 0.5,\n mode: 'focused'\n};\n\nCardContent.argTypes = {\n ...createModeControl({ summaryValue: CardContent.args.mode }),\n shouldCollapse: {\n control: 'boolean',\n description: controlDescriptions.shouldCollapse,\n table: {\n defaultValue: { summary: false }\n }\n },\n badge: {\n name: 'title',\n control: 'text',\n description: 'Badge text',\n table: {\n category: tileCategory,\n subcategory: 'Badge',\n defaultValue: { summary: 'undefined' }\n }\n },\n label: {\n name: 'title',\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n category: tileCategory,\n subcategory: 'Label',\n defaultValue: { summary: 'undefined' }\n }\n },\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'percentage of the current progress from 0 to 1',\n table: {\n category: tileCategory,\n subcategory: 'ProgressBar',\n defaultValue: { summary: 0 }\n }\n }\n};\n\nCardContent.parameters = {\n argActions: CardContent.tileProps.argActions('CardContent')\n};\ngenerateSubStory({\n componentName: 'CardContent',\n baseStory: CardContent,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details', 'visible']\n});\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport CardContentComponent from '.';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContent = args =>\\n class CardContent extends lng.Component {\\n static _template() {\\n return {\\n CardContent: {\\n type: CardContentComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n orientation: 'horizontal'\\n }\\n };\\n }\\n };\\n\\nconst tileCategory = 'Tile';\\nCardContent.tileProps = {\\n argActions: tagName => ({\\n badge: (badgeTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n badge: { title: badgeTitle }\\n };\\n },\\n label: (labelTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n label: {\\n title: labelTitle,\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n };\\n },\\n progress: (progress, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n progressBar: { progress }\\n };\\n }\\n })\\n};\\nCardContent.storyName = 'CardContent';\\n\\nCardContent.args = {\\n shouldCollapse: false,\\n badge: 'HD',\\n label: 'Live',\\n progress: 0.5,\\n mode: 'focused'\\n};\\n\\nCardContent.argTypes = {\\n ...createModeControl({ summaryValue: CardContent.args.mode }),\\n shouldCollapse: {\\n control: 'boolean',\\n description: controlDescriptions.shouldCollapse,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n badge: {\\n name: 'title',\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n category: tileCategory,\\n subcategory: 'Badge',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n label: {\\n name: 'title',\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n category: tileCategory,\\n subcategory: 'Label',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'percentage of the current progress from 0 to 1',\\n table: {\\n category: tileCategory,\\n subcategory: 'ProgressBar',\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nCardContent.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContent')\\n};\\ngenerateSubStory({\\n componentName: 'CardContent',\\n baseStory: CardContent,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details', 'visible']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContent\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":49}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport CardContentComponent from '.';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContent`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport CardContentComponent from '.';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContent = args =>\\n class CardContent extends lng.Component {\\n static _template() {\\n return {\\n CardContent: {\\n type: CardContentComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n orientation: 'horizontal'\\n }\\n };\\n }\\n };\\n\\nconst tileCategory = 'Tile';\\nCardContent.tileProps = {\\n argActions: tagName => ({\\n badge: (badgeTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n badge: { title: badgeTitle }\\n };\\n },\\n label: (labelTitle, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n label: {\\n title: labelTitle,\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n };\\n },\\n progress: (progress, component) => {\\n component.tag(tagName).tile = {\\n ...component.tag(tagName).tile,\\n progressBar: { progress }\\n };\\n }\\n })\\n};\\nCardContent.storyName = 'CardContent';\\n\\nCardContent.args = {\\n shouldCollapse: false,\\n badge: 'HD',\\n label: 'Live',\\n progress: 0.5,\\n mode: 'focused'\\n};\\n\\nCardContent.argTypes = {\\n ...createModeControl({ summaryValue: CardContent.args.mode }),\\n shouldCollapse: {\\n control: 'boolean',\\n description: controlDescriptions.shouldCollapse,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n badge: {\\n name: 'title',\\n control: 'text',\\n description: 'Badge text',\\n table: {\\n category: tileCategory,\\n subcategory: 'Badge',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n label: {\\n name: 'title',\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n category: tileCategory,\\n subcategory: 'Label',\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'percentage of the current progress from 0 to 1',\\n table: {\\n category: tileCategory,\\n subcategory: 'ProgressBar',\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nCardContent.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContent')\\n};\\ngenerateSubStory({\\n componentName: 'CardContent',\\n baseStory: CardContent,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details', 'visible']\\n});\\n\",\"locationsMap\":{\"card-content\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":49}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContent = args =>\n class CardContent extends lng.Component {\n static _template() {\n return {\n CardContent: {\n type: CardContentComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n orientation: 'horizontal'\n }\n };\n }\n };\n\nconst tileCategory = 'Tile';\nCardContent.tileProps = {\n argActions: tagName => ({\n badge: (badgeTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n badge: { title: badgeTitle }\n };\n },\n label: (labelTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n label: {\n title: labelTitle,\n table: { defaultValue: { summary: 'undefined' } }\n }\n };\n },\n progress: (progress, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n progressBar: { progress }\n };\n }\n })\n};\nCardContent.storyName = 'CardContent';\n\nCardContent.args = {\n shouldCollapse: false,\n badge: 'HD',\n label: 'Live',\n progress: 0.5,\n mode: 'focused'\n};\n\nCardContent.argTypes = {\n ...createModeControl({ summaryValue: CardContent.args.mode }),\n shouldCollapse: {\n control: 'boolean',\n description: controlDescriptions.shouldCollapse,\n table: {\n defaultValue: { summary: false }\n }\n },\n badge: {\n name: 'title',\n control: 'text',\n description: 'Badge text',\n table: {\n category: tileCategory,\n subcategory: 'Badge',\n defaultValue: { summary: 'undefined' }\n }\n },\n label: {\n name: 'title',\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n category: tileCategory,\n subcategory: 'Label',\n defaultValue: { summary: 'undefined' }\n }\n },\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'percentage of the current progress from 0 to 1',\n table: {\n category: tileCategory,\n subcategory: 'ProgressBar',\n defaultValue: { summary: 0 }\n }\n }\n};\n\nCardContent.parameters = {\n argActions: CardContent.tileProps.argActions('CardContent')\n};\ngenerateSubStory({\n componentName: 'CardContent',\n baseStory: CardContent,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details', 'visible']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContent": { @@ -11091,7 +11023,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 tileImage from '../../assets/images/tile-image.png';\nimport CardContentComponent from '.';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContent = args =>\n class CardContent extends lng.Component {\n static _template() {\n return {\n CardContent: {\n type: CardContentComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n orientation: 'horizontal'\n }\n };\n }\n };\n\nconst tileCategory = 'Tile';\nCardContent.tileProps = {\n argActions: tagName => ({\n badge: (badgeTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n badge: { title: badgeTitle }\n };\n },\n label: (labelTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n label: {\n title: labelTitle,\n table: { defaultValue: { summary: 'undefined' } }\n }\n };\n },\n progress: (progress, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n progressBar: { progress }\n };\n }\n })\n};\nCardContent.storyName = 'CardContent';\n\nCardContent.args = {\n shouldCollapse: false,\n badge: 'HD',\n label: 'Live',\n progress: 0.5,\n mode: 'focused'\n};\n\nCardContent.argTypes = {\n ...createModeControl({ summaryValue: CardContent.args.mode }),\n shouldCollapse: {\n control: 'boolean',\n description: controlDescriptions.shouldCollapse,\n table: {\n defaultValue: { summary: false }\n }\n },\n badge: {\n name: 'title',\n control: 'text',\n description: 'Badge text',\n table: {\n category: tileCategory,\n subcategory: 'Badge',\n defaultValue: { summary: 'undefined' }\n }\n },\n label: {\n name: 'title',\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n category: tileCategory,\n subcategory: 'Label',\n defaultValue: { summary: 'undefined' }\n }\n },\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'percentage of the current progress from 0 to 1',\n table: {\n category: tileCategory,\n subcategory: 'ProgressBar',\n defaultValue: { summary: 0 }\n }\n }\n};\n\nCardContent.parameters = {\n argActions: CardContent.tileProps.argActions('CardContent')\n};\ngenerateSubStory({\n componentName: 'CardContent',\n baseStory: CardContent,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details', 'visible']\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 tileImage from '../../assets/images/tile-image.png';\nimport CardContentComponent from '.';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContent = args =>\n class CardContent extends lng.Component {\n static _template() {\n return {\n CardContent: {\n type: CardContentComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n orientation: 'horizontal'\n }\n };\n }\n };\n\nconst tileCategory = 'Tile';\nCardContent.tileProps = {\n argActions: tagName => ({\n badge: (badgeTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n badge: { title: badgeTitle }\n };\n },\n label: (labelTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n label: {\n title: labelTitle,\n table: { defaultValue: { summary: 'undefined' } }\n }\n };\n },\n progress: (progress, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n progressBar: { progress }\n };\n }\n })\n};\nCardContent.storyName = 'CardContent';\n\nCardContent.args = {\n shouldCollapse: false,\n badge: 'HD',\n label: 'Live',\n progress: 0.5,\n mode: 'focused'\n};\n\nCardContent.argTypes = {\n ...createModeControl({ summaryValue: CardContent.args.mode }),\n shouldCollapse: {\n control: 'boolean',\n description: controlDescriptions.shouldCollapse,\n table: {\n defaultValue: { summary: false }\n }\n },\n badge: {\n name: 'title',\n control: 'text',\n description: 'Badge text',\n table: {\n category: tileCategory,\n subcategory: 'Badge',\n defaultValue: { summary: 'undefined' }\n }\n },\n label: {\n name: 'title',\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n category: tileCategory,\n subcategory: 'Label',\n defaultValue: { summary: 'undefined' }\n }\n },\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'percentage of the current progress from 0 to 1',\n table: {\n category: tileCategory,\n subcategory: 'ProgressBar',\n defaultValue: { summary: 0 }\n }\n }\n};\n\nCardContent.parameters = {\n argActions: CardContent.tileProps.argActions('CardContent')\n};\ngenerateSubStory({\n componentName: 'CardContent',\n baseStory: CardContent,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details', 'visible']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContent": { @@ -11141,10 +11073,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_19__[/* CATEGORIES */ "a"][128] + "/CardContent", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_19__[/* CATEGORIES */ "a"][8] + "/CardContent", 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 tileImage from '../../assets/images/tile-image.png';\nimport CardContentComponent from '.';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContent = args =>\n class CardContent extends lng.Component {\n static _template() {\n return {\n CardContent: {\n type: CardContentComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n orientation: 'horizontal'\n }\n };\n }\n };\n\nconst tileCategory = 'Tile';\nCardContent.tileProps = {\n argActions: tagName => ({\n badge: (badgeTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n badge: { title: badgeTitle }\n };\n },\n label: (labelTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n label: {\n title: labelTitle,\n table: { defaultValue: { summary: 'undefined' } }\n }\n };\n },\n progress: (progress, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n progressBar: { progress }\n };\n }\n })\n};\nCardContent.storyName = 'CardContent';\n\nCardContent.args = {\n shouldCollapse: false,\n badge: 'HD',\n label: 'Live',\n progress: 0.5,\n mode: 'focused'\n};\n\nCardContent.argTypes = {\n ...createModeControl({ summaryValue: CardContent.args.mode }),\n shouldCollapse: {\n control: 'boolean',\n description: controlDescriptions.shouldCollapse,\n table: {\n defaultValue: { summary: false }\n }\n },\n badge: {\n name: 'title',\n control: 'text',\n description: 'Badge text',\n table: {\n category: tileCategory,\n subcategory: 'Badge',\n defaultValue: { summary: 'undefined' }\n }\n },\n label: {\n name: 'title',\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n category: tileCategory,\n subcategory: 'Label',\n defaultValue: { summary: 'undefined' }\n }\n },\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'percentage of the current progress from 0 to 1',\n table: {\n category: tileCategory,\n subcategory: 'ProgressBar',\n defaultValue: { summary: 0 }\n }\n }\n};\n\nCardContent.parameters = {\n argActions: CardContent.tileProps.argActions('CardContent')\n};\ngenerateSubStory({\n componentName: 'CardContent',\n baseStory: CardContent,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details', 'visible']\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 tileImage from '../../assets/images/tile-image.png';\nimport CardContentComponent from '.';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContent = args =>\n class CardContent extends lng.Component {\n static _template() {\n return {\n CardContent: {\n type: CardContentComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n orientation: 'horizontal'\n }\n };\n }\n };\n\nconst tileCategory = 'Tile';\nCardContent.tileProps = {\n argActions: tagName => ({\n badge: (badgeTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n badge: { title: badgeTitle }\n };\n },\n label: (labelTitle, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n label: {\n title: labelTitle,\n table: { defaultValue: { summary: 'undefined' } }\n }\n };\n },\n progress: (progress, component) => {\n component.tag(tagName).tile = {\n ...component.tag(tagName).tile,\n progressBar: { progress }\n };\n }\n })\n};\nCardContent.storyName = 'CardContent';\n\nCardContent.args = {\n shouldCollapse: false,\n badge: 'HD',\n label: 'Live',\n progress: 0.5,\n mode: 'focused'\n};\n\nCardContent.argTypes = {\n ...createModeControl({ summaryValue: CardContent.args.mode }),\n shouldCollapse: {\n control: 'boolean',\n description: controlDescriptions.shouldCollapse,\n table: {\n defaultValue: { summary: false }\n }\n },\n badge: {\n name: 'title',\n control: 'text',\n description: 'Badge text',\n table: {\n category: tileCategory,\n subcategory: 'Badge',\n defaultValue: { summary: 'undefined' }\n }\n },\n label: {\n name: 'title',\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n category: tileCategory,\n subcategory: 'Label',\n defaultValue: { summary: 'undefined' }\n }\n },\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'percentage of the current progress from 0 to 1',\n table: {\n category: tileCategory,\n subcategory: 'ProgressBar',\n defaultValue: { summary: 0 }\n }\n }\n};\n\nCardContent.parameters = {\n argActions: CardContent.tileProps.argActions('CardContent')\n};\ngenerateSubStory({\n componentName: 'CardContent',\n baseStory: CardContent,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details', 'visible']\n});\n", "locationsMap": { "card-content": { "startLoc": { @@ -11550,7 +11482,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentHorizontal`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontal = () =>\\n class CardContentHorizontal extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontal: {\\n type: CardContentHorizontalComponent,\\n src: tileImage,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontal.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontal.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontal.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontal',\\n baseStory: CardContentHorizontal,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontal.storyName = 'CardContentHorizontal';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentHorizontal\":{\"startLoc\":{\"col\":37,\"line\":40},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":37,\"line\":40},\"endBody\":{\"col\":3,\"line\":62}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentHorizontal`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentHorizontal`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontal = () =>\\n class CardContentHorizontal extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontal: {\\n type: CardContentHorizontalComponent,\\n src: tileImage,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontal.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontal.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontal.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontal',\\n baseStory: CardContentHorizontal,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontal.storyName = 'CardContentHorizontal';\\n\",\"locationsMap\":{\"card-content-horizontal\":{\"startLoc\":{\"col\":37,\"line\":40},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":37,\"line\":40},\"endBody\":{\"col\":3,\"line\":62}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentHorizontal = () =>\n class CardContentHorizontal extends lng.Component {\n static _template() {\n return {\n CardContentHorizontal: {\n type: CardContentHorizontalComponent,\n src: tileImage,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentHorizontal.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontal.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontal.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontal',\n baseStory: CardContentHorizontal,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontal.storyName = 'CardContentHorizontal';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentHorizontal`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontal = () =>\\n class CardContentHorizontal extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontal: {\\n type: CardContentHorizontalComponent,\\n src: tileImage,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontal.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontal.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontal.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontal',\\n baseStory: CardContentHorizontal,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontal.storyName = 'CardContentHorizontal';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentHorizontal\":{\"startLoc\":{\"col\":37,\"line\":40},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":37,\"line\":40},\"endBody\":{\"col\":3,\"line\":62}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentHorizontal`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentHorizontal`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontal = () =>\\n class CardContentHorizontal extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontal: {\\n type: CardContentHorizontalComponent,\\n src: tileImage,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontal.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontal.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontal.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontal',\\n baseStory: CardContentHorizontal,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontal.storyName = 'CardContentHorizontal';\\n\",\"locationsMap\":{\"card-content-horizontal\":{\"startLoc\":{\"col\":37,\"line\":40},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":37,\"line\":40},\"endBody\":{\"col\":3,\"line\":62}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentHorizontal = () =>\n class CardContentHorizontal extends lng.Component {\n static _template() {\n return {\n CardContentHorizontal: {\n type: CardContentHorizontalComponent,\n src: tileImage,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentHorizontal.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontal.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontal.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontal',\n baseStory: CardContentHorizontal,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontal.storyName = 'CardContentHorizontal';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentHorizontal": { @@ -11576,7 +11508,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentHorizontal`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontal = () =>\n class CardContentHorizontal extends lng.Component {\n static _template() {\n return {\n CardContentHorizontal: {\n type: CardContentHorizontalComponent,\n src: tileImage,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentHorizontal.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontal.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontal.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontal',\n baseStory: CardContentHorizontal,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontal.storyName = 'CardContentHorizontal';\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentHorizontal`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontal = () =>\n class CardContentHorizontal extends lng.Component {\n static _template() {\n return {\n CardContentHorizontal: {\n type: CardContentHorizontalComponent,\n src: tileImage,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentHorizontal.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontal.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontal.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontal',\n baseStory: CardContentHorizontal,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontal.storyName = 'CardContentHorizontal';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentHorizontal": { @@ -11629,10 +11561,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_22__[/* CATEGORIES */ "a"][128] + "/CardContentHorizontal", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_22__[/* CATEGORIES */ "a"][8] + "/CardContentHorizontal", 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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentHorizontal`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontal = () =>\n class CardContentHorizontal extends lng.Component {\n static _template() {\n return {\n CardContentHorizontal: {\n type: CardContentHorizontalComponent,\n src: tileImage,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentHorizontal.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontal.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontal.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontal',\n baseStory: CardContentHorizontal,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontal.storyName = 'CardContentHorizontal';\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalComponent } from './CardContentHorizontal';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentHorizontal`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontal = () =>\n class CardContentHorizontal extends lng.Component {\n static _template() {\n return {\n CardContentHorizontal: {\n type: CardContentHorizontalComponent,\n src: tileImage,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentHorizontal.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontal.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontal.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontal')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontal',\n baseStory: CardContentHorizontal,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontal.storyName = 'CardContentHorizontal';\n", "locationsMap": { "card-content-horizontal": { "startLoc": { @@ -11953,7 +11885,7 @@ function CardContentHorizontalLarge_stories_getPrototypeOf(o) { CardContentHoriz /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentHorizontalLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontalLarge = args =>\\n class CardContentHorizontalLarge extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontalLarge: {\\n type: CardContentHorizontalLargeComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n collapseToMetadata: args.collapseToMetadata,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ],\\n visibleCount: 3\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontalLarge.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontalLarge.argTypes = {\\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontalLarge.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontalLarge',\\n baseStory: CardContentHorizontalLarge,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentHorizontalLarge\":{\"startLoc\":{\"col\":42,\"line\":40},\"endLoc\":{\"col\":3,\"line\":65},\"startBody\":{\"col\":42,\"line\":40},\"endBody\":{\"col\":3,\"line\":65}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentHorizontalLarge`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentHorizontalLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontalLarge = args =>\\n class CardContentHorizontalLarge extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontalLarge: {\\n type: CardContentHorizontalLargeComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n collapseToMetadata: args.collapseToMetadata,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ],\\n visibleCount: 3\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontalLarge.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontalLarge.argTypes = {\\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontalLarge.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontalLarge',\\n baseStory: CardContentHorizontalLarge,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\\n\",\"locationsMap\":{\"card-content-horizontal-large\":{\"startLoc\":{\"col\":42,\"line\":40},\"endLoc\":{\"col\":3,\"line\":65},\"startBody\":{\"col\":42,\"line\":40},\"endBody\":{\"col\":3,\"line\":65}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentHorizontalLarge = args =>\n class CardContentHorizontalLarge extends lng.Component {\n static _template() {\n return {\n CardContentHorizontalLarge: {\n type: CardContentHorizontalLargeComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n collapseToMetadata: args.collapseToMetadata,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ],\n visibleCount: 3\n }\n }\n }\n };\n }\n };\nCardContentHorizontalLarge.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontalLarge.argTypes = {\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontalLarge.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontalLarge',\n baseStory: CardContentHorizontalLarge,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentHorizontalLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontalLarge = args =>\\n class CardContentHorizontalLarge extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontalLarge: {\\n type: CardContentHorizontalLargeComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n collapseToMetadata: args.collapseToMetadata,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ],\\n visibleCount: 3\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontalLarge.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontalLarge.argTypes = {\\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontalLarge.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontalLarge',\\n baseStory: CardContentHorizontalLarge,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentHorizontalLarge\":{\"startLoc\":{\"col\":42,\"line\":40},\"endLoc\":{\"col\":3,\"line\":65},\"startBody\":{\"col\":42,\"line\":40},\"endBody\":{\"col\":3,\"line\":65}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentHorizontalLarge`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentHorizontalLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentHorizontalLarge = args =>\\n class CardContentHorizontalLarge extends lng.Component {\\n static _template() {\\n return {\\n CardContentHorizontalLarge: {\\n type: CardContentHorizontalLargeComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n collapseToMetadata: args.collapseToMetadata,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ],\\n visibleCount: 3\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentHorizontalLarge.args = {\\n collapseToMetadata: false,\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentHorizontalLarge.argTypes = {\\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\\n collapseToMetadata: {\\n control: 'boolean',\\n description: controlDescriptions.collapseToMetadata,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n ...CardContent.argTypes\\n};\\nCardContentHorizontalLarge.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentHorizontalLarge',\\n baseStory: CardContentHorizontalLarge,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\\n\",\"locationsMap\":{\"card-content-horizontal-large\":{\"startLoc\":{\"col\":42,\"line\":40},\"endLoc\":{\"col\":3,\"line\":65},\"startBody\":{\"col\":42,\"line\":40},\"endBody\":{\"col\":3,\"line\":65}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentHorizontalLarge = args =>\n class CardContentHorizontalLarge extends lng.Component {\n static _template() {\n return {\n CardContentHorizontalLarge: {\n type: CardContentHorizontalLargeComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n collapseToMetadata: args.collapseToMetadata,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ],\n visibleCount: 3\n }\n }\n }\n };\n }\n };\nCardContentHorizontalLarge.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontalLarge.argTypes = {\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontalLarge.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontalLarge',\n baseStory: CardContentHorizontalLarge,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentHorizontalLarge": { @@ -11979,7 +11911,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentHorizontalLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontalLarge = args =>\n class CardContentHorizontalLarge extends lng.Component {\n static _template() {\n return {\n CardContentHorizontalLarge: {\n type: CardContentHorizontalLargeComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n collapseToMetadata: args.collapseToMetadata,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ],\n visibleCount: 3\n }\n }\n }\n };\n }\n };\nCardContentHorizontalLarge.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontalLarge.argTypes = {\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontalLarge.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontalLarge',\n baseStory: CardContentHorizontalLarge,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentHorizontalLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontalLarge = args =>\n class CardContentHorizontalLarge extends lng.Component {\n static _template() {\n return {\n CardContentHorizontalLarge: {\n type: CardContentHorizontalLargeComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n collapseToMetadata: args.collapseToMetadata,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ],\n visibleCount: 3\n }\n }\n }\n };\n }\n };\nCardContentHorizontalLarge.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontalLarge.argTypes = {\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontalLarge.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontalLarge',\n baseStory: CardContentHorizontalLarge,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentHorizontalLarge": { @@ -12032,10 +11964,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var CardContentHorizontalLarge_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][128] + "/CardContentHorizontalLarge", + title: constants["a" /* CATEGORIES */][8] + "/CardContentHorizontalLarge", 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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentHorizontalLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontalLarge = args =>\n class CardContentHorizontalLarge extends lng.Component {\n static _template() {\n return {\n CardContentHorizontalLarge: {\n type: CardContentHorizontalLargeComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n collapseToMetadata: args.collapseToMetadata,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ],\n visibleCount: 3\n }\n }\n }\n };\n }\n };\nCardContentHorizontalLarge.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontalLarge.argTypes = {\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontalLarge.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontalLarge',\n baseStory: CardContentHorizontalLarge,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { default as CardContentHorizontalLargeComponent } from './CardContentHorizontalLarge';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentHorizontalLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentHorizontalLarge = args =>\n class CardContentHorizontalLarge extends lng.Component {\n static _template() {\n return {\n CardContentHorizontalLarge: {\n type: CardContentHorizontalLargeComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n collapseToMetadata: args.collapseToMetadata,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ],\n visibleCount: 3\n }\n }\n }\n };\n }\n };\nCardContentHorizontalLarge.args = {\n collapseToMetadata: false,\n mode: 'focused',\n ...CardContent.args\n};\nCardContentHorizontalLarge.argTypes = {\n ...createModeControl({ summaryValue: CardContentHorizontalLarge.args.mode }),\n collapseToMetadata: {\n control: 'boolean',\n description: controlDescriptions.collapseToMetadata,\n table: {\n defaultValue: { summary: false }\n }\n },\n ...CardContent.argTypes\n};\nCardContentHorizontalLarge.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentHorizontalLarge')\n};\n\ngenerateSubStory({\n componentName: 'CardContentHorizontalLarge',\n baseStory: CardContentHorizontalLarge,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n\nCardContentHorizontalLarge.storyName = 'CardContentHorizontalLarge';\n", "locationsMap": { "card-content-horizontal-large": { "startLoc": { @@ -12380,7 +12312,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalComponent from './CardContentVertical';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentVertical`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVertical = args =>\\n class CardContentVertical extends lng.Component {\\n static _template() {\\n return {\\n CardContentVertical: {\\n type: CardContentVerticalComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentVertical.args = {\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentVertical.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n ...CardContent.argTypes\\n};\\n\\nCardContentVertical.storyName = 'CardContentVertical';\\nCardContentVertical.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVertical')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVertical',\\n baseStory: CardContentVertical,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentVertical\":{\"startLoc\":{\"col\":35,\"line\":39},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":35,\"line\":39},\"endBody\":{\"col\":3,\"line\":62}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalComponent from './CardContentVertical';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentVertical`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalComponent from './CardContentVertical';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentVertical`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVertical = args =>\\n class CardContentVertical extends lng.Component {\\n static _template() {\\n return {\\n CardContentVertical: {\\n type: CardContentVerticalComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentVertical.args = {\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentVertical.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n ...CardContent.argTypes\\n};\\n\\nCardContentVertical.storyName = 'CardContentVertical';\\nCardContentVertical.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVertical')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVertical',\\n baseStory: CardContentVertical,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\",\"locationsMap\":{\"card-content-vertical\":{\"startLoc\":{\"col\":35,\"line\":39},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":35,\"line\":39},\"endBody\":{\"col\":3,\"line\":62}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentVertical = args =>\n class CardContentVertical extends lng.Component {\n static _template() {\n return {\n CardContentVertical: {\n type: CardContentVerticalComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentVertical.args = {\n mode: 'focused',\n ...CardContent.args\n};\nCardContentVertical.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n ...CardContent.argTypes\n};\n\nCardContentVertical.storyName = 'CardContentVertical';\nCardContentVertical.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVertical')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVertical',\n baseStory: CardContentVertical,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalComponent from './CardContentVertical';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentVertical`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVertical = args =>\\n class CardContentVertical extends lng.Component {\\n static _template() {\\n return {\\n CardContentVertical: {\\n type: CardContentVerticalComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentVertical.args = {\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentVertical.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n ...CardContent.argTypes\\n};\\n\\nCardContentVertical.storyName = 'CardContentVertical';\\nCardContentVertical.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVertical')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVertical',\\n baseStory: CardContentVertical,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentVertical\":{\"startLoc\":{\"col\":35,\"line\":39},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":35,\"line\":39},\"endBody\":{\"col\":3,\"line\":62}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalComponent from './CardContentVertical';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentVertical`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalComponent from './CardContentVertical';\\nimport { default as Icon } from '../Icon';\\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentVertical`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVertical = args =>\\n class CardContentVertical extends lng.Component {\\n static _template() {\\n return {\\n CardContentVertical: {\\n type: CardContentVerticalComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse,\\n metadata: {\\n provider: {\\n providers: [\\n {\\n type: Icon,\\n w: 96,\\n h: 48,\\n icon: xfinityLogo\\n }\\n ]\\n }\\n }\\n }\\n };\\n }\\n };\\nCardContentVertical.args = {\\n mode: 'focused',\\n ...CardContent.args\\n};\\nCardContentVertical.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n ...CardContent.argTypes\\n};\\n\\nCardContentVertical.storyName = 'CardContentVertical';\\nCardContentVertical.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVertical')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVertical',\\n baseStory: CardContentVertical,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description', 'details']\\n});\\n\",\"locationsMap\":{\"card-content-vertical\":{\"startLoc\":{\"col\":35,\"line\":39},\"endLoc\":{\"col\":3,\"line\":62},\"startBody\":{\"col\":35,\"line\":39},\"endBody\":{\"col\":3,\"line\":62}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentVertical = args =>\n class CardContentVertical extends lng.Component {\n static _template() {\n return {\n CardContentVertical: {\n type: CardContentVerticalComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentVertical.args = {\n mode: 'focused',\n ...CardContent.args\n};\nCardContentVertical.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n ...CardContent.argTypes\n};\n\nCardContentVertical.storyName = 'CardContentVertical';\nCardContentVertical.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVertical')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVertical',\n baseStory: CardContentVertical,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentVertical": { @@ -12406,7 +12338,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalComponent from './CardContentVertical';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentVertical`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVertical = args =>\n class CardContentVertical extends lng.Component {\n static _template() {\n return {\n CardContentVertical: {\n type: CardContentVerticalComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentVertical.args = {\n mode: 'focused',\n ...CardContent.args\n};\nCardContentVertical.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n ...CardContent.argTypes\n};\n\nCardContentVertical.storyName = 'CardContentVertical';\nCardContentVertical.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVertical')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVertical',\n baseStory: CardContentVertical,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalComponent from './CardContentVertical';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentVertical`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVertical = args =>\n class CardContentVertical extends lng.Component {\n static _template() {\n return {\n CardContentVertical: {\n type: CardContentVerticalComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentVertical.args = {\n mode: 'focused',\n ...CardContent.args\n};\nCardContentVertical.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n ...CardContent.argTypes\n};\n\nCardContentVertical.storyName = 'CardContentVertical';\nCardContentVertical.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVertical')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVertical',\n baseStory: CardContentVertical,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentVertical": { @@ -12458,10 +12390,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_22__[/* CATEGORIES */ "a"][128] + "/CardContentVertical", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_22__[/* CATEGORIES */ "a"][8] + "/CardContentVertical", 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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalComponent from './CardContentVertical';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentVertical`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVertical = args =>\n class CardContentVertical extends lng.Component {\n static _template() {\n return {\n CardContentVertical: {\n type: CardContentVerticalComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentVertical.args = {\n mode: 'focused',\n ...CardContent.args\n};\nCardContentVertical.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n ...CardContent.argTypes\n};\n\nCardContentVertical.storyName = 'CardContentVertical';\nCardContentVertical.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVertical')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVertical',\n baseStory: CardContentVertical,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalComponent from './CardContentVertical';\nimport { default as Icon } from '../Icon';\nimport xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentVertical`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVertical = args =>\n class CardContentVertical extends lng.Component {\n static _template() {\n return {\n CardContentVertical: {\n type: CardContentVerticalComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse,\n metadata: {\n provider: {\n providers: [\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n }\n ]\n }\n }\n }\n };\n }\n };\nCardContentVertical.args = {\n mode: 'focused',\n ...CardContent.args\n};\nCardContentVertical.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n ...CardContent.argTypes\n};\n\nCardContentVertical.storyName = 'CardContentVertical';\nCardContentVertical.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVertical')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVertical',\n baseStory: CardContentVertical,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description', 'details']\n});\n", "locationsMap": { "card-content-vertical": { "startLoc": { @@ -12767,7 +12699,7 @@ function CardContentVerticalSmall_stories_getPrototypeOf(o) { CardContentVertica /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentVerticalSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVerticalSmall = args =>\\n class CardContentVerticalSmall extends lng.Component {\\n static _template() {\\n return {\\n CardContentVerticalSmall: {\\n type: CardContentVerticalSmallComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse\\n }\\n };\\n }\\n };\\n\\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\\n\\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\\nconst cardContentArgs = { ...CardContent.args };\\ndelete cardContentArgs.metadata_details;\\n\\nCardContentVerticalSmall.args = {\\n mode: 'focused',\\n ...cardContentArgs\\n};\\n\\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\\nconst cardContentArgsTypes = { ...CardContent.argTypes };\\ndelete cardContentArgsTypes.metadata_details;\\n\\nCardContentVerticalSmall.argTypes = {\\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\\n ...cardContentArgsTypes\\n};\\n\\nCardContentVerticalSmall.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVerticalSmall',\\n baseStory: CardContentVerticalSmall,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentVerticalSmall\":{\"startLoc\":{\"col\":40,\"line\":37},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":40,\"line\":37},\"endBody\":{\"col\":3,\"line\":48}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentVerticalSmall`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/CardContentVerticalSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVerticalSmall = args =>\\n class CardContentVerticalSmall extends lng.Component {\\n static _template() {\\n return {\\n CardContentVerticalSmall: {\\n type: CardContentVerticalSmallComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse\\n }\\n };\\n }\\n };\\n\\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\\n\\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\\nconst cardContentArgs = { ...CardContent.args };\\ndelete cardContentArgs.metadata_details;\\n\\nCardContentVerticalSmall.args = {\\n mode: 'focused',\\n ...cardContentArgs\\n};\\n\\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\\nconst cardContentArgsTypes = { ...CardContent.argTypes };\\ndelete cardContentArgsTypes.metadata_details;\\n\\nCardContentVerticalSmall.argTypes = {\\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\\n ...cardContentArgsTypes\\n};\\n\\nCardContentVerticalSmall.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVerticalSmall',\\n baseStory: CardContentVerticalSmall,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\n\",\"locationsMap\":{\"card-content-vertical-small\":{\"startLoc\":{\"col\":40,\"line\":37},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":40,\"line\":37},\"endBody\":{\"col\":3,\"line\":48}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentVerticalSmall = args =>\n class CardContentVerticalSmall extends lng.Component {\n static _template() {\n return {\n CardContentVerticalSmall: {\n type: CardContentVerticalSmallComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse\n }\n };\n }\n };\n\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\n\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\nconst cardContentArgs = { ...CardContent.args };\ndelete cardContentArgs.metadata_details;\n\nCardContentVerticalSmall.args = {\n mode: 'focused',\n ...cardContentArgs\n};\n\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\nconst cardContentArgsTypes = { ...CardContent.argTypes };\ndelete cardContentArgsTypes.metadata_details;\n\nCardContentVerticalSmall.argTypes = {\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\n ...cardContentArgsTypes\n};\n\nCardContentVerticalSmall.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVerticalSmall',\n baseStory: CardContentVerticalSmall,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentVerticalSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVerticalSmall = args =>\\n class CardContentVerticalSmall extends lng.Component {\\n static _template() {\\n return {\\n CardContentVerticalSmall: {\\n type: CardContentVerticalSmallComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse\\n }\\n };\\n }\\n };\\n\\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\\n\\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\\nconst cardContentArgs = { ...CardContent.args };\\ndelete cardContentArgs.metadata_details;\\n\\nCardContentVerticalSmall.args = {\\n mode: 'focused',\\n ...cardContentArgs\\n};\\n\\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\\nconst cardContentArgsTypes = { ...CardContent.argTypes };\\ndelete cardContentArgsTypes.metadata_details;\\n\\nCardContentVerticalSmall.argTypes = {\\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\\n ...cardContentArgsTypes\\n};\\n\\nCardContentVerticalSmall.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVerticalSmall',\\n baseStory: CardContentVerticalSmall,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CardContentVerticalSmall\":{\"startLoc\":{\"col\":40,\"line\":37},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":40,\"line\":37},\"endBody\":{\"col\":3,\"line\":48}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentVerticalSmall`,\n 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 tileImage from '../../assets/images/tile-image.png';\\nimport mdx from './CardContent.mdx';\\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\\nimport { CardContent } from './CardContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CardContentVerticalSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CardContentVerticalSmall = args =>\\n class CardContentVerticalSmall extends lng.Component {\\n static _template() {\\n return {\\n CardContentVerticalSmall: {\\n type: CardContentVerticalSmallComponent,\\n src: tileImage,\\n shouldCollapse: args.shouldCollapse\\n }\\n };\\n }\\n };\\n\\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\\n\\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\\nconst cardContentArgs = { ...CardContent.args };\\ndelete cardContentArgs.metadata_details;\\n\\nCardContentVerticalSmall.args = {\\n mode: 'focused',\\n ...cardContentArgs\\n};\\n\\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\\nconst cardContentArgsTypes = { ...CardContent.argTypes };\\ndelete cardContentArgsTypes.metadata_details;\\n\\nCardContentVerticalSmall.argTypes = {\\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\\n ...cardContentArgsTypes\\n};\\n\\nCardContentVerticalSmall.parameters = {\\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\\n};\\n\\ngenerateSubStory({\\n componentName: 'CardContentVerticalSmall',\\n baseStory: CardContentVerticalSmall,\\n subStory: MetadataStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\n\",\"locationsMap\":{\"card-content-vertical-small\":{\"startLoc\":{\"col\":40,\"line\":37},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":40,\"line\":37},\"endBody\":{\"col\":3,\"line\":48}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CardContentVerticalSmall = args =>\n class CardContentVerticalSmall extends lng.Component {\n static _template() {\n return {\n CardContentVerticalSmall: {\n type: CardContentVerticalSmallComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse\n }\n };\n }\n };\n\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\n\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\nconst cardContentArgs = { ...CardContent.args };\ndelete cardContentArgs.metadata_details;\n\nCardContentVerticalSmall.args = {\n mode: 'focused',\n ...cardContentArgs\n};\n\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\nconst cardContentArgsTypes = { ...CardContent.argTypes };\ndelete cardContentArgsTypes.metadata_details;\n\nCardContentVerticalSmall.argTypes = {\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\n ...cardContentArgsTypes\n};\n\nCardContentVerticalSmall.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVerticalSmall',\n baseStory: CardContentVerticalSmall,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentVerticalSmall": { @@ -12793,7 +12725,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentVerticalSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVerticalSmall = args =>\n class CardContentVerticalSmall extends lng.Component {\n static _template() {\n return {\n CardContentVerticalSmall: {\n type: CardContentVerticalSmallComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse\n }\n };\n }\n };\n\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\n\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\nconst cardContentArgs = { ...CardContent.args };\ndelete cardContentArgs.metadata_details;\n\nCardContentVerticalSmall.args = {\n mode: 'focused',\n ...cardContentArgs\n};\n\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\nconst cardContentArgsTypes = { ...CardContent.argTypes };\ndelete cardContentArgsTypes.metadata_details;\n\nCardContentVerticalSmall.argTypes = {\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\n ...cardContentArgsTypes\n};\n\nCardContentVerticalSmall.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVerticalSmall',\n baseStory: CardContentVerticalSmall,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentVerticalSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVerticalSmall = args =>\n class CardContentVerticalSmall extends lng.Component {\n static _template() {\n return {\n CardContentVerticalSmall: {\n type: CardContentVerticalSmallComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse\n }\n };\n }\n };\n\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\n\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\nconst cardContentArgs = { ...CardContent.args };\ndelete cardContentArgs.metadata_details;\n\nCardContentVerticalSmall.args = {\n mode: 'focused',\n ...cardContentArgs\n};\n\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\nconst cardContentArgsTypes = { ...CardContent.argTypes };\ndelete cardContentArgsTypes.metadata_details;\n\nCardContentVerticalSmall.argTypes = {\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\n ...cardContentArgsTypes\n};\n\nCardContentVerticalSmall.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVerticalSmall',\n baseStory: CardContentVerticalSmall,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CardContentVerticalSmall": { @@ -12843,10 +12775,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var CardContentVerticalSmall_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][128] + "/CardContentVerticalSmall", + title: constants["a" /* CATEGORIES */][8] + "/CardContentVerticalSmall", 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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[128]}/CardContentVerticalSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVerticalSmall = args =>\n class CardContentVerticalSmall extends lng.Component {\n static _template() {\n return {\n CardContentVerticalSmall: {\n type: CardContentVerticalSmallComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse\n }\n };\n }\n };\n\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\n\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\nconst cardContentArgs = { ...CardContent.args };\ndelete cardContentArgs.metadata_details;\n\nCardContentVerticalSmall.args = {\n mode: 'focused',\n ...cardContentArgs\n};\n\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\nconst cardContentArgsTypes = { ...CardContent.argTypes };\ndelete cardContentArgsTypes.metadata_details;\n\nCardContentVerticalSmall.argTypes = {\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\n ...cardContentArgsTypes\n};\n\nCardContentVerticalSmall.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVerticalSmall',\n baseStory: CardContentVerticalSmall,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\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 tileImage from '../../assets/images/tile-image.png';\nimport mdx from './CardContent.mdx';\nimport { MetadataCardContent as MetadataStory } from '../MetadataCardContent/MetadataCardContent.stories';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport CardContentVerticalSmallComponent from './CardContentVerticalSmall';\nimport { CardContent } from './CardContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CardContentVerticalSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CardContentVerticalSmall = args =>\n class CardContentVerticalSmall extends lng.Component {\n static _template() {\n return {\n CardContentVerticalSmall: {\n type: CardContentVerticalSmallComponent,\n src: tileImage,\n shouldCollapse: args.shouldCollapse\n }\n };\n }\n };\n\nCardContentVerticalSmall.storyName = 'CardContentVerticalSmall';\n\n//Creating a shallow copy of CardContent.args object and removing metadata details property from cardContentArgs\nconst cardContentArgs = { ...CardContent.args };\ndelete cardContentArgs.metadata_details;\n\nCardContentVerticalSmall.args = {\n mode: 'focused',\n ...cardContentArgs\n};\n\n//Creating a shallow copy of CardContent.argTypes object and removing metadata details property from cardContentArgsTypes\nconst cardContentArgsTypes = { ...CardContent.argTypes };\ndelete cardContentArgsTypes.metadata_details;\n\nCardContentVerticalSmall.argTypes = {\n ...createModeControl({ summaryValue: CardContentVerticalSmall.args.mode }),\n ...cardContentArgsTypes\n};\n\nCardContentVerticalSmall.parameters = {\n argActions: CardContent.tileProps.argActions('CardContentVerticalSmall')\n};\n\ngenerateSubStory({\n componentName: 'CardContentVerticalSmall',\n baseStory: CardContentVerticalSmall,\n subStory: MetadataStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\n", "locationsMap": { "card-content-vertical-small": { "startLoc": { @@ -13320,7 +13252,7 @@ function MDXContent(_ref) { }, "import { Checkbox } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: Checkbox\n }\n };\n }\n}\n")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Canvas */ "b"], { mdxType: "Canvas" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Story */ "f"], { - id: "utilities-checkbox--checkbox", + id: "components-checkbox--checkbox", mdxType: "Story" })), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h2", { "id": "api" @@ -13554,7 +13486,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CheckboxComponent } from '.';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Checkbox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Checkbox = () =>\\n class Checkbox extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxComponent\\n }\\n };\\n }\\n };\\n\\nCheckbox.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nCheckbox.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Checkbox\":{\"startLoc\":{\"col\":24,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":24,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxComponent } from '.';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Checkbox`,\n 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 { default as CheckboxComponent } from '.';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Checkbox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Checkbox = () =>\\n class Checkbox extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxComponent\\n }\\n };\\n }\\n };\\n\\nCheckbox.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nCheckbox.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"checkbox\":{\"startLoc\":{\"col\":24,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":24,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CheckboxComponent } from '.';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Checkbox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Checkbox = () =>\\n class Checkbox extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxComponent\\n }\\n };\\n }\\n };\\n\\nCheckbox.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nCheckbox.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Checkbox\":{\"startLoc\":{\"col\":24,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":24,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxComponent } from '.';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Checkbox`,\n 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 { default as CheckboxComponent } from '.';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Checkbox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Checkbox = () =>\\n class Checkbox extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxComponent\\n }\\n };\\n }\\n };\\n\\nCheckbox.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nCheckbox.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"checkbox\":{\"startLoc\":{\"col\":24,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":24,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Checkbox": { @@ -13580,7 +13512,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as CheckboxComponent } from '.';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Checkbox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +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 { default as CheckboxComponent } from '.';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Checkbox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Checkbox": { @@ -13627,10 +13559,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_17__[/* CATEGORIES */ "a"][512] + "/Checkbox", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_17__[/* CATEGORIES */ "a"][8] + "/Checkbox", 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 { default as CheckboxComponent } from '.';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Checkbox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", + "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 { default as CheckboxComponent } from '.';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Checkbox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Checkbox = () =>\n class Checkbox extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxComponent\n }\n };\n }\n };\n\nCheckbox.args = {\n checked: false,\n mode: 'focused'\n};\n\nCheckbox.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", "locationsMap": { "checkbox": { "startLoc": { @@ -13893,7 +13825,7 @@ function CheckboxSmall_stories_getPrototypeOf(o) { CheckboxSmall_stories_getProt /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/CheckboxSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CheckboxSmall = () => {\\n return class CheckboxSmall extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxSmallComponent\\n }\\n };\\n }\\n };\\n};\\nCheckboxSmall.storyName = 'CheckboxSmall';\\nCheckboxSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nCheckboxSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CheckboxSmall\":{\"startLoc\":{\"col\":29,\"line\":34},\"endLoc\":{\"col\":1,\"line\":44},\"startBody\":{\"col\":29,\"line\":34},\"endBody\":{\"col\":1,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxSmallComponent } from './CheckboxSmall.js';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/CheckboxSmall`,\n 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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/CheckboxSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CheckboxSmall = () => {\\n return class CheckboxSmall extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxSmallComponent\\n }\\n };\\n }\\n };\\n};\\nCheckboxSmall.storyName = 'CheckboxSmall';\\nCheckboxSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nCheckboxSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"checkbox-small\":{\"startLoc\":{\"col\":29,\"line\":34},\"endLoc\":{\"col\":1,\"line\":44},\"startBody\":{\"col\":29,\"line\":34},\"endBody\":{\"col\":1,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CheckboxSmall = () => {\n return class CheckboxSmall extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxSmallComponent\n }\n };\n }\n };\n};\nCheckboxSmall.storyName = 'CheckboxSmall';\nCheckboxSmall.args = {\n checked: false,\n mode: 'focused'\n};\nCheckboxSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CheckboxSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CheckboxSmall = () => {\\n return class CheckboxSmall extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxSmallComponent\\n }\\n };\\n }\\n };\\n};\\nCheckboxSmall.storyName = 'CheckboxSmall';\\nCheckboxSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nCheckboxSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"CheckboxSmall\":{\"startLoc\":{\"col\":29,\"line\":34},\"endLoc\":{\"col\":1,\"line\":44},\"startBody\":{\"col\":29,\"line\":34},\"endBody\":{\"col\":1,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as CheckboxSmallComponent } from './CheckboxSmall.js';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CheckboxSmall`,\n 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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\\nimport mdx from './Checkbox.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/CheckboxSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const CheckboxSmall = () => {\\n return class CheckboxSmall extends lng.Component {\\n static _template() {\\n return {\\n Checkbox: {\\n type: CheckboxSmallComponent\\n }\\n };\\n }\\n };\\n};\\nCheckboxSmall.storyName = 'CheckboxSmall';\\nCheckboxSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nCheckboxSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"checkbox-small\":{\"startLoc\":{\"col\":29,\"line\":34},\"endLoc\":{\"col\":1,\"line\":44},\"startBody\":{\"col\":29,\"line\":34},\"endBody\":{\"col\":1,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const CheckboxSmall = () => {\n return class CheckboxSmall extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxSmallComponent\n }\n };\n }\n };\n};\nCheckboxSmall.storyName = 'CheckboxSmall';\nCheckboxSmall.args = {\n checked: false,\n mode: 'focused'\n};\nCheckboxSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CheckboxSmall": { @@ -13919,7 +13851,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/CheckboxSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CheckboxSmall = () => {\n return class CheckboxSmall extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxSmallComponent\n }\n };\n }\n };\n};\nCheckboxSmall.storyName = 'CheckboxSmall';\nCheckboxSmall.args = {\n checked: false,\n mode: 'focused'\n};\nCheckboxSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CheckboxSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CheckboxSmall = () => {\n return class CheckboxSmall extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxSmallComponent\n }\n };\n }\n };\n};\nCheckboxSmall.storyName = 'CheckboxSmall';\nCheckboxSmall.args = {\n checked: false,\n mode: 'focused'\n};\nCheckboxSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "CheckboxSmall": { @@ -13966,10 +13898,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var CheckboxSmall_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/CheckboxSmall", + title: constants["a" /* CATEGORIES */][8] + "/CheckboxSmall", 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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/CheckboxSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CheckboxSmall = () => {\n return class CheckboxSmall extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxSmallComponent\n }\n };\n }\n };\n};\nCheckboxSmall.storyName = 'CheckboxSmall';\nCheckboxSmall.args = {\n checked: false,\n mode: 'focused'\n};\nCheckboxSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", + "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 { default as CheckboxSmallComponent } from './CheckboxSmall.js';\nimport mdx from './Checkbox.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/CheckboxSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const CheckboxSmall = () => {\n return class CheckboxSmall extends lng.Component {\n static _template() {\n return {\n Checkbox: {\n type: CheckboxSmallComponent\n }\n };\n }\n };\n};\nCheckboxSmall.storyName = 'CheckboxSmall';\nCheckboxSmall.args = {\n checked: false,\n mode: 'focused'\n};\nCheckboxSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", "locationsMap": { "checkbox-small": { "startLoc": { @@ -14575,12 +14507,10 @@ function MDXContent(_ref) { "className": "language-js" }, "import { Column } from '@lightningjs/ui-components';\n\nclass BasicExample extends lng.Component {\n static _template() {\n return {\n Column: {\n type: Column,\n items: [\n // list of items\n ]\n }\n };\n }\n\n _getFocused() {\n return this.tag('Column');\n }\n}\n")), Object(esm["b" /* mdx */])("p", null, "The ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" - }, "Column"), " component extends ", Object(esm["b" /* mdx */])("inlineCode", { - parentName: "p" - }, "FocusManager"), Object(esm["b" /* mdx */])("a", { + }, "Column"), " component extends ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/focusmanager--rows" - }, "fm-docs"), ", so you need to make sure that ", Object(esm["b" /* mdx */])("inlineCode", { + "href": "?path=/docs/components-focusmanager--column-with-rows" + }, "FocusManager"), ", so you need to make sure that ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "_getFocused"), " returns the ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" @@ -14594,7 +14524,7 @@ function MDXContent(_ref) { }, "class ExpandingButton extends Button {\n _focus() {\n super._focus();\n this.patch({ h: 100 });\n // triggers recalculation of Column items layout\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.patch({ h: 40 });\n }\n}\n\nclass ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: Column,\n h: 500,\n items: Array.apply(null, { length: 15 }).map((_, i) => ({\n type: ExpandingButton,\n h: 40,\n w: 150,\n buttonText: `Button ${i}`\n }))\n }\n };\n }\n\n _getFocused() {\n return this.tag('Column');\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "navigation-column--column", + id: "components-column--column", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "scrolling" @@ -14732,7 +14662,7 @@ function MDXContent(_ref) { "id": "style-properties" }, "Style Properties"), Object(esm["b" /* mdx */])("p", null, "The Column component shares a few of the same style properties as the ones listed in NavigationManager. For a detailed description, please refer to style properties section in the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/navigation-navigationmanager--row" + "href": "?path=/docs/components-navigationmanager--row" }, "NavigationManager component")), Object(esm["b" /* mdx */])("p", null, "scrollIndex: number\nitemSpacing: number\nitemTransition: ", Object(esm["b" /* mdx */])(docs_utils["a" /* DocsLink */], { id: "lng.Transition", mdxType: "DocsLink" @@ -14818,10 +14748,10 @@ function MDXContent(_ref) { "id": "methods" }, "Methods"), Object(esm["b" /* mdx */])("p", null, "The Column component is a subclass of NavigationManager and FocusManager, so inherits all methods from those parent components. These shared methods are already documented in the NavigationManager and FocusManager documentation. For detailed descriptions of these methods, please refer to the methods section in the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/?path=/docs/navigation-navigationmanager--row" + "href": "/?path=/docs/components-navigationmanager--row" }, "NavigationManager"), " and ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/navigation-focusmanager--column-with-rows" + "href": "/docs/components-focusmanager--column-with-rows" }, "FocusManager"), " documentation."), Object(esm["b" /* mdx */])("h4", { "id": "onscreeneffect-void" }, "onScreenEffect(): void"), Object(esm["b" /* mdx */])("p", null, "A callback that can be overridden to do something with the items that are currently on screen. This will be called on every new render."), Object(esm["b" /* mdx */])("h3", { @@ -14894,7 +14824,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { context } from '../../globals';\\nimport { flatten, getWidthByUpCount } from '../../utils';\\nimport Row from '../Row';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport { default as ColumnComponent } from '.';\\nimport mdx from './Column.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/Column`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nconst columnHeight =\\n context.theme.layout.screenH -\\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\\n return Array.from({ length }).map((_, i) => {\\n const button = {\\n type: buttonType,\\n title: `Button ${i + 1}`\\n };\\n if (!isDynamicWidth) {\\n button.fixed = true;\\n button.w = 250;\\n }\\n if (isVariedHeight) {\\n button.h = 40 + Math.floor(Math.random() * 100);\\n }\\n return button;\\n });\\n};\\n\\nexport const Column = args =>\\n class Column extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h:\\n context.theme.layout.screenH -\\n 2 *\\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\\n scrollIndex: args.scrollIndex,\\n items: createItems(Button, 20)\\n }\\n };\\n }\\n };\\n\\nColumn.args = {\\n scroll: 1,\\n scrollIndex: 0,\\n alwaysScroll: false\\n};\\n\\nColumn.argTypes = {\\n scroll: {\\n control: 'select',\\n options: [1, 5, 15, 20],\\n description: 'Scroll to selected index',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nColumn.parameters = {\\n argActions: {\\n scroll: function (index, component) {\\n component.tag('Column').scrollTo(index - 1);\\n }\\n }\\n};\\n\\nexport const MultiColumn = () =>\\n class MultiColumn extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: Row,\\n items: [\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n },\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const Plinko = () =>\\n class Plinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemHeight = () =>\\n class VaryingItemHeight extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(Button, 10, true)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightItems = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(ExpandingButton, 15)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightRows = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n plinko: true,\\n items: Array.apply(null, { length: 15 }).map(() => ({\\n type: Row,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 3)\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 49 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: { type: 'boolean' },\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const OnScreenEffect = () =>\\n class OnScreenEffect extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n scrollIndex: 2,\\n h: columnHeight,\\n items: createItems(Button, 10)\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Column').onScreenEffect = items => {\\n const { selected } = this.tag('Column');\\n const selectedIndex = items.indexOf(selected);\\n\\n items\\n .slice(0, selectedIndex)\\n .reverse()\\n .forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n items.slice(selectedIndex + 1).forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n };\\n }\\n };\\n\\nexport const StickyTitle = () => {\\n const items = flatten(\\n Array.apply(null, { length: 5 }).map((_, i) => {\\n const headerText = `Sticky Header ${i}`;\\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\\n return {\\n type: Button,\\n title: `Button ${i + 1}`,\\n fixed: true,\\n w: 250,\\n headerText\\n };\\n });\\n\\n return [\\n {\\n type: ColumnHeader,\\n headerText,\\n h: 40,\\n skipFocus: true\\n },\\n ...items\\n ];\\n })\\n );\\n items.shift();\\n\\n return class ColumnExample extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n y: 50,\\n h: 400,\\n autoResizeWidth: true,\\n clipping: true,\\n type: ColumnComponent,\\n items,\\n signals: {\\n selectedChange: '_updateHeader'\\n }\\n },\\n ColumnHeader: {\\n type: ColumnHeader,\\n headerText: 'Sticky Header 0',\\n h: 40\\n }\\n };\\n }\\n\\n _updateHeader(selected) {\\n this.tag('ColumnHeader').headerText = selected.headerText || '';\\n }\\n };\\n};\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n autoResizeWidth: true,\\n items: [\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 2)\\n },\\n {\\n ...createItems(Button, 1)[0],\\n centerInParent: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\\n};\\n\\nclass ColumnHeader extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 5,\\n y: 10,\\n text: {\\n fontSize: 24,\\n textColor: 0xffffffff\\n },\\n zIndex: 2\\n },\\n Line: {\\n color: 0xffffff1f,\\n rect: true,\\n w: 300,\\n y: 35,\\n h: 3\\n }\\n };\\n }\\n\\n set headerText(text) {\\n this.tag('Label').text.text = text;\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').text = this.titleText;\\n }\\n}\\n\\nclass ExpandingButton extends Button {\\n _init() {\\n this.h = 80;\\n super._init();\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _focus() {\\n super._focus();\\n this.smooth = { h: 120 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 80 };\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nexport const SkipPlinko = () =>\\n class SkipPlinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n skipPlinko: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n },\\n metadata: {\\n title: 'Row with skipPlinko set to true'\\n },\\n persistentMetadata: true\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n }\\n ]\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 20),\\n alwaysScroll: args.alwaysScroll\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n scrollIndex: 0,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2,\\n itemTransition: 0.4,\\n alwaysScroll: false,\\n scroll: 1\\n};\\n\\nLazyUpCount.argTypes = {\\n itemTransition: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scroll: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n },\\n alwaysScroll: {\\n control: { type: 'boolean' },\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Column').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Column').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Column').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n scrollIndex: 0,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\\n};\\n\\nexport const RemovingItems = args =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Column').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n scrollIndex: 0\\n};\\nRemovingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Column\":{\"startLoc\":{\"col\":22,\"line\":62},\"endLoc\":{\"col\":3,\"line\":77},\"startBody\":{\"col\":22,\"line\":62},\"endBody\":{\"col\":3,\"line\":77}},\"MultiColumn\":{\"startLoc\":{\"col\":27,\"line\":114},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":27,\"line\":114},\"endBody\":{\"col\":3,\"line\":137}},\"Plinko\":{\"startLoc\":{\"col\":22,\"line\":139},\"endLoc\":{\"col\":3,\"line\":163},\"startBody\":{\"col\":22,\"line\":139},\"endBody\":{\"col\":3,\"line\":163}},\"VaryingItemHeight\":{\"startLoc\":{\"col\":33,\"line\":165},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":33,\"line\":165},\"endBody\":{\"col\":3,\"line\":176}},\"ExpandableHeightItems\":{\"startLoc\":{\"col\":37,\"line\":178},\"endLoc\":{\"col\":3,\"line\":189},\"startBody\":{\"col\":37,\"line\":178},\"endBody\":{\"col\":3,\"line\":189}},\"ExpandableHeightRows\":{\"startLoc\":{\"col\":36,\"line\":191},\"endLoc\":{\"col\":3,\"line\":208},\"startBody\":{\"col\":36,\"line\":191},\"endBody\":{\"col\":3,\"line\":208}},\"SkipFocus\":{\"startLoc\":{\"col\":25,\"line\":210},\"endLoc\":{\"col\":3,\"line\":239},\"startBody\":{\"col\":25,\"line\":210},\"endBody\":{\"col\":3,\"line\":239}},\"OnScreenEffect\":{\"startLoc\":{\"col\":30,\"line\":254},\"endLoc\":{\"col\":3,\"line\":283},\"startBody\":{\"col\":30,\"line\":254},\"endBody\":{\"col\":3,\"line\":283}},\"StickyTitle\":{\"startLoc\":{\"col\":27,\"line\":285},\"endLoc\":{\"col\":1,\"line\":338},\"startBody\":{\"col\":27,\"line\":285},\"endBody\":{\"col\":1,\"line\":338}},\"CenteredInParent\":{\"startLoc\":{\"col\":32,\"line\":340},\"endLoc\":{\"col\":3,\"line\":369},\"startBody\":{\"col\":32,\"line\":340},\"endBody\":{\"col\":3,\"line\":369}},\"SkipPlinko\":{\"startLoc\":{\"col\":26,\"line\":441},\"endLoc\":{\"col\":3,\"line\":554},\"startBody\":{\"col\":26,\"line\":441},\"endBody\":{\"col\":3,\"line\":554}},\"LazyUpCount\":{\"startLoc\":{\"col\":27,\"line\":556},\"endLoc\":{\"col\":3,\"line\":571},\"startBody\":{\"col\":27,\"line\":556},\"endBody\":{\"col\":3,\"line\":571}},\"AddingItems\":{\"startLoc\":{\"col\":27,\"line\":626},\"endLoc\":{\"col\":3,\"line\":694},\"startBody\":{\"col\":27,\"line\":626},\"endBody\":{\"col\":3,\"line\":694}},\"RemovingItems\":{\"startLoc\":{\"col\":29,\"line\":729},\"endLoc\":{\"col\":3,\"line\":756},\"startBody\":{\"col\":29,\"line\":729},\"endBody\":{\"col\":3,\"line\":756}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { context } from '../../globals';\nimport { flatten, getWidthByUpCount } from '../../utils';\nimport Row from '../Row';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport { default as ColumnComponent } from '.';\nimport mdx from './Column.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\n\nexport default {\n title: `${CATEGORIES[64]}/Column`,\n 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 { context } from '../../globals';\\nimport { flatten, getWidthByUpCount } from '../../utils';\\nimport Row from '../Row';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport { default as ColumnComponent } from '.';\\nimport mdx from './Column.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/Column`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nconst columnHeight =\\n context.theme.layout.screenH -\\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\\n return Array.from({ length }).map((_, i) => {\\n const button = {\\n type: buttonType,\\n title: `Button ${i + 1}`\\n };\\n if (!isDynamicWidth) {\\n button.fixed = true;\\n button.w = 250;\\n }\\n if (isVariedHeight) {\\n button.h = 40 + Math.floor(Math.random() * 100);\\n }\\n return button;\\n });\\n};\\n\\nexport const Column = args =>\\n class Column extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h:\\n context.theme.layout.screenH -\\n 2 *\\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\\n scrollIndex: args.scrollIndex,\\n items: createItems(Button, 20)\\n }\\n };\\n }\\n };\\n\\nColumn.args = {\\n scroll: 1,\\n scrollIndex: 0,\\n alwaysScroll: false\\n};\\n\\nColumn.argTypes = {\\n scroll: {\\n control: 'select',\\n options: [1, 5, 15, 20],\\n description: 'Scroll to selected index',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nColumn.parameters = {\\n argActions: {\\n scroll: function (index, component) {\\n component.tag('Column').scrollTo(index - 1);\\n }\\n }\\n};\\n\\nexport const MultiColumn = () =>\\n class MultiColumn extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: Row,\\n items: [\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n },\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const Plinko = () =>\\n class Plinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemHeight = () =>\\n class VaryingItemHeight extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(Button, 10, true)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightItems = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(ExpandingButton, 15)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightRows = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n plinko: true,\\n items: Array.apply(null, { length: 15 }).map(() => ({\\n type: Row,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 3)\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 49 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: { type: 'boolean' },\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const OnScreenEffect = () =>\\n class OnScreenEffect extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n scrollIndex: 2,\\n h: columnHeight,\\n items: createItems(Button, 10)\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Column').onScreenEffect = items => {\\n const { selected } = this.tag('Column');\\n const selectedIndex = items.indexOf(selected);\\n\\n items\\n .slice(0, selectedIndex)\\n .reverse()\\n .forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n items.slice(selectedIndex + 1).forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n };\\n }\\n };\\n\\nexport const StickyTitle = () => {\\n const items = flatten(\\n Array.apply(null, { length: 5 }).map((_, i) => {\\n const headerText = `Sticky Header ${i}`;\\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\\n return {\\n type: Button,\\n title: `Button ${i + 1}`,\\n fixed: true,\\n w: 250,\\n headerText\\n };\\n });\\n\\n return [\\n {\\n type: ColumnHeader,\\n headerText,\\n h: 40,\\n skipFocus: true\\n },\\n ...items\\n ];\\n })\\n );\\n items.shift();\\n\\n return class ColumnExample extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n y: 50,\\n h: 400,\\n autoResizeWidth: true,\\n clipping: true,\\n type: ColumnComponent,\\n items,\\n signals: {\\n selectedChange: '_updateHeader'\\n }\\n },\\n ColumnHeader: {\\n type: ColumnHeader,\\n headerText: 'Sticky Header 0',\\n h: 40\\n }\\n };\\n }\\n\\n _updateHeader(selected) {\\n this.tag('ColumnHeader').headerText = selected.headerText || '';\\n }\\n };\\n};\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n autoResizeWidth: true,\\n items: [\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 2)\\n },\\n {\\n ...createItems(Button, 1)[0],\\n centerInParent: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\\n};\\n\\nclass ColumnHeader extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 5,\\n y: 10,\\n text: {\\n fontSize: 24,\\n textColor: 0xffffffff\\n },\\n zIndex: 2\\n },\\n Line: {\\n color: 0xffffff1f,\\n rect: true,\\n w: 300,\\n y: 35,\\n h: 3\\n }\\n };\\n }\\n\\n set headerText(text) {\\n this.tag('Label').text.text = text;\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').text = this.titleText;\\n }\\n}\\n\\nclass ExpandingButton extends Button {\\n _init() {\\n this.h = 80;\\n super._init();\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _focus() {\\n super._focus();\\n this.smooth = { h: 120 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 80 };\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nexport const SkipPlinko = () =>\\n class SkipPlinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n skipPlinko: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n },\\n metadata: {\\n title: 'Row with skipPlinko set to true'\\n },\\n persistentMetadata: true\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n }\\n ]\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 20),\\n alwaysScroll: args.alwaysScroll\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n scrollIndex: 0,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2,\\n itemTransition: 0.4,\\n alwaysScroll: false,\\n scroll: 1\\n};\\n\\nLazyUpCount.argTypes = {\\n itemTransition: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scroll: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n },\\n alwaysScroll: {\\n control: { type: 'boolean' },\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Column').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Column').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Column').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n scrollIndex: 0,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\\n};\\n\\nexport const RemovingItems = args =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Column').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n scrollIndex: 0\\n};\\nRemovingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\\n};\\n\",\"locationsMap\":{\"column\":{\"startLoc\":{\"col\":22,\"line\":62},\"endLoc\":{\"col\":3,\"line\":77},\"startBody\":{\"col\":22,\"line\":62},\"endBody\":{\"col\":3,\"line\":77}},\"multi-column\":{\"startLoc\":{\"col\":27,\"line\":114},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":27,\"line\":114},\"endBody\":{\"col\":3,\"line\":137}},\"plinko\":{\"startLoc\":{\"col\":22,\"line\":139},\"endLoc\":{\"col\":3,\"line\":163},\"startBody\":{\"col\":22,\"line\":139},\"endBody\":{\"col\":3,\"line\":163}},\"varying-item-height\":{\"startLoc\":{\"col\":33,\"line\":165},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":33,\"line\":165},\"endBody\":{\"col\":3,\"line\":176}},\"expandable-height-items\":{\"startLoc\":{\"col\":37,\"line\":178},\"endLoc\":{\"col\":3,\"line\":189},\"startBody\":{\"col\":37,\"line\":178},\"endBody\":{\"col\":3,\"line\":189}},\"expandable-height-rows\":{\"startLoc\":{\"col\":36,\"line\":191},\"endLoc\":{\"col\":3,\"line\":208},\"startBody\":{\"col\":36,\"line\":191},\"endBody\":{\"col\":3,\"line\":208}},\"skip-focus\":{\"startLoc\":{\"col\":25,\"line\":210},\"endLoc\":{\"col\":3,\"line\":239},\"startBody\":{\"col\":25,\"line\":210},\"endBody\":{\"col\":3,\"line\":239}},\"on-screen-effect\":{\"startLoc\":{\"col\":30,\"line\":254},\"endLoc\":{\"col\":3,\"line\":283},\"startBody\":{\"col\":30,\"line\":254},\"endBody\":{\"col\":3,\"line\":283}},\"sticky-title\":{\"startLoc\":{\"col\":27,\"line\":285},\"endLoc\":{\"col\":1,\"line\":338},\"startBody\":{\"col\":27,\"line\":285},\"endBody\":{\"col\":1,\"line\":338}},\"centered-in-parent\":{\"startLoc\":{\"col\":32,\"line\":340},\"endLoc\":{\"col\":3,\"line\":369},\"startBody\":{\"col\":32,\"line\":340},\"endBody\":{\"col\":3,\"line\":369}},\"skip-plinko\":{\"startLoc\":{\"col\":26,\"line\":441},\"endLoc\":{\"col\":3,\"line\":554},\"startBody\":{\"col\":26,\"line\":441},\"endBody\":{\"col\":3,\"line\":554}},\"lazy-up-count\":{\"startLoc\":{\"col\":27,\"line\":556},\"endLoc\":{\"col\":3,\"line\":571},\"startBody\":{\"col\":27,\"line\":556},\"endBody\":{\"col\":3,\"line\":571}},\"adding-items\":{\"startLoc\":{\"col\":27,\"line\":626},\"endLoc\":{\"col\":3,\"line\":694},\"startBody\":{\"col\":27,\"line\":626},\"endBody\":{\"col\":3,\"line\":694}},\"removing-items\":{\"startLoc\":{\"col\":29,\"line\":729},\"endLoc\":{\"col\":3,\"line\":756},\"startBody\":{\"col\":29,\"line\":729},\"endBody\":{\"col\":3,\"line\":756}}}},\n docs: {\n page: mdx\n },\n remountAll: true\n },};\n\nconst columnHeight =\n context.theme.layout.screenH -\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\n return Array.from({ length }).map((_, i) => {\n const button = {\n type: buttonType,\n title: `Button ${i + 1}`\n };\n if (!isDynamicWidth) {\n button.fixed = true;\n button.w = 250;\n }\n if (isVariedHeight) {\n button.h = 40 + Math.floor(Math.random() * 100);\n }\n return button;\n });\n};\n\nexport const Column = args =>\n class Column extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h:\n context.theme.layout.screenH -\n 2 *\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\n scrollIndex: args.scrollIndex,\n items: createItems(Button, 20)\n }\n };\n }\n };;\n\nColumn.args = {\n scroll: 1,\n scrollIndex: 0,\n alwaysScroll: false\n};\n\nColumn.argTypes = {\n scroll: {\n control: 'select',\n options: [1, 5, 15, 20],\n description: 'Scroll to selected index',\n table: { defaultValue: { summary: 'undefined' } }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\n\nColumn.parameters = {\n argActions: {\n scroll: function (index, component) {\n component.tag('Column').scrollTo(index - 1);\n }\n }\n};\n\nexport const MultiColumn = () =>\n class MultiColumn extends lng.Component {\n static _template() {\n return {\n Row: {\n type: Row,\n items: [\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n },\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n }\n ]\n }\n };\n }\n };;\n\nexport const Plinko = () =>\n class Plinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };;\n\nexport const VaryingItemHeight = () =>\n class VaryingItemHeight extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(Button, 10, true)\n }\n };\n }\n };;\n\nexport const ExpandableHeightItems = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(ExpandingButton, 15)\n }\n };\n }\n };;\n\nexport const ExpandableHeightRows = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n plinko: true,\n items: Array.apply(null, { length: 15 }).map(() => ({\n type: Row,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 3)\n }))\n }\n };\n }\n };;\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 49 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n }\n ]\n }\n };\n }\n };;\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: { type: 'boolean' },\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const OnScreenEffect = () =>\n class OnScreenEffect extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n scrollIndex: 2,\n h: columnHeight,\n items: createItems(Button, 10)\n }\n };\n }\n\n _init() {\n this.tag('Column').onScreenEffect = items => {\n const { selected } = this.tag('Column');\n const selectedIndex = items.indexOf(selected);\n\n items\n .slice(0, selectedIndex)\n .reverse()\n .forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n items.slice(selectedIndex + 1).forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n };\n }\n };;\n\nexport const StickyTitle = () => {\n const items = flatten(\n Array.apply(null, { length: 5 }).map((_, i) => {\n const headerText = `Sticky Header ${i}`;\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\n return {\n type: Button,\n title: `Button ${i + 1}`,\n fixed: true,\n w: 250,\n headerText\n };\n });\n\n return [\n {\n type: ColumnHeader,\n headerText,\n h: 40,\n skipFocus: true\n },\n ...items\n ];\n })\n );\n items.shift();\n\n return class ColumnExample extends lng.Component {\n static _template() {\n return {\n Column: {\n y: 50,\n h: 400,\n autoResizeWidth: true,\n clipping: true,\n type: ColumnComponent,\n items,\n signals: {\n selectedChange: '_updateHeader'\n }\n },\n ColumnHeader: {\n type: ColumnHeader,\n headerText: 'Sticky Header 0',\n h: 40\n }\n };\n }\n\n _updateHeader(selected) {\n this.tag('ColumnHeader').headerText = selected.headerText || '';\n }\n };\n};;\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n autoResizeWidth: true,\n items: [\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 2)\n },\n {\n ...createItems(Button, 1)[0],\n centerInParent: true\n }\n ]\n }\n };\n }\n };;\n\nCenteredInParent.parameters = {\n storyDetails:\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\n};\n\nclass ColumnHeader extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 5,\n y: 10,\n text: {\n fontSize: 24,\n textColor: 0xffffffff\n },\n zIndex: 2\n },\n Line: {\n color: 0xffffff1f,\n rect: true,\n w: 300,\n y: 35,\n h: 3\n }\n };\n }\n\n set headerText(text) {\n this.tag('Label').text.text = text;\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').text = this.titleText;\n }\n}\n\nclass ExpandingButton extends Button {\n _init() {\n this.h = 80;\n super._init();\n this.fireAncestors('$itemChanged');\n }\n\n _focus() {\n super._focus();\n this.smooth = { h: 120 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 80 };\n this.fireAncestors('$itemChanged');\n }\n}\n\nexport const SkipPlinko = () =>\n class SkipPlinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n w: getWidthByUpCount(context.theme, 1),\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n skipPlinko: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n },\n metadata: {\n title: 'Row with skipPlinko set to true'\n },\n persistentMetadata: true\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n }\n ]\n }\n ]\n }\n };\n }\n };;\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 20),\n alwaysScroll: args.alwaysScroll\n }\n };\n }\n };;\nLazyUpCount.args = {\n scrollIndex: 0,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2,\n itemTransition: 0.4,\n alwaysScroll: false,\n scroll: 1\n};\n\nLazyUpCount.argTypes = {\n itemTransition: {\n table: {\n disable: true // removes control from story\n }\n },\n scroll: {\n table: {\n disable: true // removes control from story\n }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n },\n alwaysScroll: {\n control: { type: 'boolean' },\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Column').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Column').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Column').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };;\nAddingItems.args = {\n scrollIndex: 0,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\n};\n\nexport const RemovingItems = args =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Column').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n scrollIndex: 0\n};\nRemovingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n }\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { context } from '../../globals';\\nimport { flatten, getWidthByUpCount } from '../../utils';\\nimport Row from '../Row';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport { default as ColumnComponent } from '.';\\nimport mdx from './Column.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Column`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nconst columnHeight =\\n context.theme.layout.screenH -\\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\\n return Array.from({ length }).map((_, i) => {\\n const button = {\\n type: buttonType,\\n title: `Button ${i + 1}`\\n };\\n if (!isDynamicWidth) {\\n button.fixed = true;\\n button.w = 250;\\n }\\n if (isVariedHeight) {\\n button.h = 40 + Math.floor(Math.random() * 100);\\n }\\n return button;\\n });\\n};\\n\\nexport const Column = args =>\\n class Column extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h:\\n context.theme.layout.screenH -\\n 2 *\\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\\n scrollIndex: args.scrollIndex,\\n items: createItems(Button, 20)\\n }\\n };\\n }\\n };\\n\\nColumn.args = {\\n scroll: 1,\\n scrollIndex: 0,\\n alwaysScroll: false\\n};\\n\\nColumn.argTypes = {\\n scroll: {\\n control: 'select',\\n options: [1, 5, 15, 20],\\n description: 'Scroll to selected index',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nColumn.parameters = {\\n argActions: {\\n scroll: function (index, component) {\\n component.tag('Column').scrollTo(index - 1);\\n }\\n }\\n};\\n\\nexport const MultiColumn = () =>\\n class MultiColumn extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: Row,\\n items: [\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n },\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const Plinko = () =>\\n class Plinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemHeight = () =>\\n class VaryingItemHeight extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(Button, 10, true)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightItems = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(ExpandingButton, 15)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightRows = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n plinko: true,\\n items: Array.apply(null, { length: 15 }).map(() => ({\\n type: Row,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 3)\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 49 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: { type: 'boolean' },\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const OnScreenEffect = () =>\\n class OnScreenEffect extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n scrollIndex: 2,\\n h: columnHeight,\\n items: createItems(Button, 10)\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Column').onScreenEffect = items => {\\n const { selected } = this.tag('Column');\\n const selectedIndex = items.indexOf(selected);\\n\\n items\\n .slice(0, selectedIndex)\\n .reverse()\\n .forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n items.slice(selectedIndex + 1).forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n };\\n }\\n };\\n\\nexport const StickyTitle = () => {\\n const items = flatten(\\n Array.apply(null, { length: 5 }).map((_, i) => {\\n const headerText = `Sticky Header ${i}`;\\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\\n return {\\n type: Button,\\n title: `Button ${i + 1}`,\\n fixed: true,\\n w: 250,\\n headerText\\n };\\n });\\n\\n return [\\n {\\n type: ColumnHeader,\\n headerText,\\n h: 40,\\n skipFocus: true\\n },\\n ...items\\n ];\\n })\\n );\\n items.shift();\\n\\n return class ColumnExample extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n y: 50,\\n h: 400,\\n autoResizeWidth: true,\\n clipping: true,\\n type: ColumnComponent,\\n items,\\n signals: {\\n selectedChange: '_updateHeader'\\n }\\n },\\n ColumnHeader: {\\n type: ColumnHeader,\\n headerText: 'Sticky Header 0',\\n h: 40\\n }\\n };\\n }\\n\\n _updateHeader(selected) {\\n this.tag('ColumnHeader').headerText = selected.headerText || '';\\n }\\n };\\n};\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n autoResizeWidth: true,\\n items: [\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 2)\\n },\\n {\\n ...createItems(Button, 1)[0],\\n centerInParent: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\\n};\\n\\nclass ColumnHeader extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 5,\\n y: 10,\\n text: {\\n fontSize: 24,\\n textColor: 0xffffffff\\n },\\n zIndex: 2\\n },\\n Line: {\\n color: 0xffffff1f,\\n rect: true,\\n w: 300,\\n y: 35,\\n h: 3\\n }\\n };\\n }\\n\\n set headerText(text) {\\n this.tag('Label').text.text = text;\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').text = this.titleText;\\n }\\n}\\n\\nclass ExpandingButton extends Button {\\n _init() {\\n this.h = 80;\\n super._init();\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _focus() {\\n super._focus();\\n this.smooth = { h: 120 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 80 };\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nexport const SkipPlinko = () =>\\n class SkipPlinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n skipPlinko: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n },\\n metadata: {\\n title: 'Row with skipPlinko set to true'\\n },\\n persistentMetadata: true\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n }\\n ]\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 20),\\n alwaysScroll: args.alwaysScroll\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n scrollIndex: 0,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2,\\n itemTransition: 0.4,\\n alwaysScroll: false,\\n scroll: 1\\n};\\n\\nLazyUpCount.argTypes = {\\n itemTransition: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scroll: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n },\\n alwaysScroll: {\\n control: { type: 'boolean' },\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Column').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Column').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Column').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n scrollIndex: 0,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\\n};\\n\\nexport const RemovingItems = args =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Column').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n scrollIndex: 0\\n};\\nRemovingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Column\":{\"startLoc\":{\"col\":22,\"line\":62},\"endLoc\":{\"col\":3,\"line\":77},\"startBody\":{\"col\":22,\"line\":62},\"endBody\":{\"col\":3,\"line\":77}},\"MultiColumn\":{\"startLoc\":{\"col\":27,\"line\":114},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":27,\"line\":114},\"endBody\":{\"col\":3,\"line\":137}},\"Plinko\":{\"startLoc\":{\"col\":22,\"line\":139},\"endLoc\":{\"col\":3,\"line\":163},\"startBody\":{\"col\":22,\"line\":139},\"endBody\":{\"col\":3,\"line\":163}},\"VaryingItemHeight\":{\"startLoc\":{\"col\":33,\"line\":165},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":33,\"line\":165},\"endBody\":{\"col\":3,\"line\":176}},\"ExpandableHeightItems\":{\"startLoc\":{\"col\":37,\"line\":178},\"endLoc\":{\"col\":3,\"line\":189},\"startBody\":{\"col\":37,\"line\":178},\"endBody\":{\"col\":3,\"line\":189}},\"ExpandableHeightRows\":{\"startLoc\":{\"col\":36,\"line\":191},\"endLoc\":{\"col\":3,\"line\":208},\"startBody\":{\"col\":36,\"line\":191},\"endBody\":{\"col\":3,\"line\":208}},\"SkipFocus\":{\"startLoc\":{\"col\":25,\"line\":210},\"endLoc\":{\"col\":3,\"line\":239},\"startBody\":{\"col\":25,\"line\":210},\"endBody\":{\"col\":3,\"line\":239}},\"OnScreenEffect\":{\"startLoc\":{\"col\":30,\"line\":254},\"endLoc\":{\"col\":3,\"line\":283},\"startBody\":{\"col\":30,\"line\":254},\"endBody\":{\"col\":3,\"line\":283}},\"StickyTitle\":{\"startLoc\":{\"col\":27,\"line\":285},\"endLoc\":{\"col\":1,\"line\":338},\"startBody\":{\"col\":27,\"line\":285},\"endBody\":{\"col\":1,\"line\":338}},\"CenteredInParent\":{\"startLoc\":{\"col\":32,\"line\":340},\"endLoc\":{\"col\":3,\"line\":369},\"startBody\":{\"col\":32,\"line\":340},\"endBody\":{\"col\":3,\"line\":369}},\"SkipPlinko\":{\"startLoc\":{\"col\":26,\"line\":441},\"endLoc\":{\"col\":3,\"line\":554},\"startBody\":{\"col\":26,\"line\":441},\"endBody\":{\"col\":3,\"line\":554}},\"LazyUpCount\":{\"startLoc\":{\"col\":27,\"line\":556},\"endLoc\":{\"col\":3,\"line\":571},\"startBody\":{\"col\":27,\"line\":556},\"endBody\":{\"col\":3,\"line\":571}},\"AddingItems\":{\"startLoc\":{\"col\":27,\"line\":626},\"endLoc\":{\"col\":3,\"line\":694},\"startBody\":{\"col\":27,\"line\":626},\"endBody\":{\"col\":3,\"line\":694}},\"RemovingItems\":{\"startLoc\":{\"col\":29,\"line\":729},\"endLoc\":{\"col\":3,\"line\":756},\"startBody\":{\"col\":29,\"line\":729},\"endBody\":{\"col\":3,\"line\":756}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { context } from '../../globals';\nimport { flatten, getWidthByUpCount } from '../../utils';\nimport Row from '../Row';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport { default as ColumnComponent } from '.';\nimport mdx from './Column.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\n\nexport default {\n title: `${CATEGORIES[8]}/Column`,\n 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 { context } from '../../globals';\\nimport { flatten, getWidthByUpCount } from '../../utils';\\nimport Row from '../Row';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport { default as ColumnComponent } from '.';\\nimport mdx from './Column.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Column`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nconst columnHeight =\\n context.theme.layout.screenH -\\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\\n return Array.from({ length }).map((_, i) => {\\n const button = {\\n type: buttonType,\\n title: `Button ${i + 1}`\\n };\\n if (!isDynamicWidth) {\\n button.fixed = true;\\n button.w = 250;\\n }\\n if (isVariedHeight) {\\n button.h = 40 + Math.floor(Math.random() * 100);\\n }\\n return button;\\n });\\n};\\n\\nexport const Column = args =>\\n class Column extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h:\\n context.theme.layout.screenH -\\n 2 *\\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\\n scrollIndex: args.scrollIndex,\\n items: createItems(Button, 20)\\n }\\n };\\n }\\n };\\n\\nColumn.args = {\\n scroll: 1,\\n scrollIndex: 0,\\n alwaysScroll: false\\n};\\n\\nColumn.argTypes = {\\n scroll: {\\n control: 'select',\\n options: [1, 5, 15, 20],\\n description: 'Scroll to selected index',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nColumn.parameters = {\\n argActions: {\\n scroll: function (index, component) {\\n component.tag('Column').scrollTo(index - 1);\\n }\\n }\\n};\\n\\nexport const MultiColumn = () =>\\n class MultiColumn extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: Row,\\n items: [\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n },\\n {\\n type: ColumnComponent,\\n h: columnHeight,\\n autoResizeWidth: true,\\n items: createItems(Button, 20)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const Plinko = () =>\\n class Plinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemHeight = () =>\\n class VaryingItemHeight extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(Button, 10, true)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightItems = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n items: createItems(ExpandingButton, 15)\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableHeightRows = () =>\\n class ExpandableHeightItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n plinko: true,\\n items: Array.apply(null, { length: 15 }).map(() => ({\\n type: Row,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 3)\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: columnHeight,\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 49 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n h: 30,\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: { type: 'boolean' },\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const OnScreenEffect = () =>\\n class OnScreenEffect extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n scrollIndex: 2,\\n h: columnHeight,\\n items: createItems(Button, 10)\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Column').onScreenEffect = items => {\\n const { selected } = this.tag('Column');\\n const selectedIndex = items.indexOf(selected);\\n\\n items\\n .slice(0, selectedIndex)\\n .reverse()\\n .forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n items.slice(selectedIndex + 1).forEach((item, idx) => {\\n item.alpha = 1 / (1 + idx);\\n });\\n };\\n }\\n };\\n\\nexport const StickyTitle = () => {\\n const items = flatten(\\n Array.apply(null, { length: 5 }).map((_, i) => {\\n const headerText = `Sticky Header ${i}`;\\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\\n return {\\n type: Button,\\n title: `Button ${i + 1}`,\\n fixed: true,\\n w: 250,\\n headerText\\n };\\n });\\n\\n return [\\n {\\n type: ColumnHeader,\\n headerText,\\n h: 40,\\n skipFocus: true\\n },\\n ...items\\n ];\\n })\\n );\\n items.shift();\\n\\n return class ColumnExample extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n y: 50,\\n h: 400,\\n autoResizeWidth: true,\\n clipping: true,\\n type: ColumnComponent,\\n items,\\n signals: {\\n selectedChange: '_updateHeader'\\n }\\n },\\n ColumnHeader: {\\n type: ColumnHeader,\\n headerText: 'Sticky Header 0',\\n h: 40\\n }\\n };\\n }\\n\\n _updateHeader(selected) {\\n this.tag('ColumnHeader').headerText = selected.headerText || '';\\n }\\n };\\n};\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n autoResizeWidth: true,\\n items: [\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Row,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 2)\\n },\\n {\\n ...createItems(Button, 1)[0],\\n centerInParent: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\\n};\\n\\nclass ColumnHeader extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 5,\\n y: 10,\\n text: {\\n fontSize: 24,\\n textColor: 0xffffffff\\n },\\n zIndex: 2\\n },\\n Line: {\\n color: 0xffffff1f,\\n rect: true,\\n w: 300,\\n y: 35,\\n h: 3\\n }\\n };\\n }\\n\\n set headerText(text) {\\n this.tag('Label').text.text = text;\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').text = this.titleText;\\n }\\n}\\n\\nclass ExpandingButton extends Button {\\n _init() {\\n this.h = 80;\\n super._init();\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _focus() {\\n super._focus();\\n this.smooth = { h: 120 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 80 };\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nexport const SkipPlinko = () =>\\n class SkipPlinko extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n plinko: true,\\n items: [\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n skipPlinko: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n },\\n metadata: {\\n title: 'Row with skipPlinko set to true'\\n },\\n persistentMetadata: true\\n }\\n ]\\n },\\n {\\n type: Row,\\n autoResizeHeight: true,\\n items: [\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\\n }\\n },\\n {\\n type: Tile,\\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\\n }\\n }\\n ]\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 20),\\n alwaysScroll: args.alwaysScroll\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n scrollIndex: 0,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2,\\n itemTransition: 0.4,\\n alwaysScroll: false,\\n scroll: 1\\n};\\n\\nLazyUpCount.argTypes = {\\n itemTransition: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scroll: {\\n table: {\\n disable: true // removes control from story\\n }\\n },\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n },\\n alwaysScroll: {\\n control: { type: 'boolean' },\\n description:\\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Column').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Column').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Column').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n scrollIndex: 0,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n },\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\\n};\\n\\nexport const RemovingItems = args =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Column: {\\n type: ColumnComponent,\\n h: 500,\\n scrollIndex: args.scrollIndex,\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Column').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n scrollIndex: 0\\n};\\nRemovingItems.argTypes = {\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\\n};\\n\",\"locationsMap\":{\"column\":{\"startLoc\":{\"col\":22,\"line\":62},\"endLoc\":{\"col\":3,\"line\":77},\"startBody\":{\"col\":22,\"line\":62},\"endBody\":{\"col\":3,\"line\":77}},\"multi-column\":{\"startLoc\":{\"col\":27,\"line\":114},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":27,\"line\":114},\"endBody\":{\"col\":3,\"line\":137}},\"plinko\":{\"startLoc\":{\"col\":22,\"line\":139},\"endLoc\":{\"col\":3,\"line\":163},\"startBody\":{\"col\":22,\"line\":139},\"endBody\":{\"col\":3,\"line\":163}},\"varying-item-height\":{\"startLoc\":{\"col\":33,\"line\":165},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":33,\"line\":165},\"endBody\":{\"col\":3,\"line\":176}},\"expandable-height-items\":{\"startLoc\":{\"col\":37,\"line\":178},\"endLoc\":{\"col\":3,\"line\":189},\"startBody\":{\"col\":37,\"line\":178},\"endBody\":{\"col\":3,\"line\":189}},\"expandable-height-rows\":{\"startLoc\":{\"col\":36,\"line\":191},\"endLoc\":{\"col\":3,\"line\":208},\"startBody\":{\"col\":36,\"line\":191},\"endBody\":{\"col\":3,\"line\":208}},\"skip-focus\":{\"startLoc\":{\"col\":25,\"line\":210},\"endLoc\":{\"col\":3,\"line\":239},\"startBody\":{\"col\":25,\"line\":210},\"endBody\":{\"col\":3,\"line\":239}},\"on-screen-effect\":{\"startLoc\":{\"col\":30,\"line\":254},\"endLoc\":{\"col\":3,\"line\":283},\"startBody\":{\"col\":30,\"line\":254},\"endBody\":{\"col\":3,\"line\":283}},\"sticky-title\":{\"startLoc\":{\"col\":27,\"line\":285},\"endLoc\":{\"col\":1,\"line\":338},\"startBody\":{\"col\":27,\"line\":285},\"endBody\":{\"col\":1,\"line\":338}},\"centered-in-parent\":{\"startLoc\":{\"col\":32,\"line\":340},\"endLoc\":{\"col\":3,\"line\":369},\"startBody\":{\"col\":32,\"line\":340},\"endBody\":{\"col\":3,\"line\":369}},\"skip-plinko\":{\"startLoc\":{\"col\":26,\"line\":441},\"endLoc\":{\"col\":3,\"line\":554},\"startBody\":{\"col\":26,\"line\":441},\"endBody\":{\"col\":3,\"line\":554}},\"lazy-up-count\":{\"startLoc\":{\"col\":27,\"line\":556},\"endLoc\":{\"col\":3,\"line\":571},\"startBody\":{\"col\":27,\"line\":556},\"endBody\":{\"col\":3,\"line\":571}},\"adding-items\":{\"startLoc\":{\"col\":27,\"line\":626},\"endLoc\":{\"col\":3,\"line\":694},\"startBody\":{\"col\":27,\"line\":626},\"endBody\":{\"col\":3,\"line\":694}},\"removing-items\":{\"startLoc\":{\"col\":29,\"line\":729},\"endLoc\":{\"col\":3,\"line\":756},\"startBody\":{\"col\":29,\"line\":729},\"endBody\":{\"col\":3,\"line\":756}}}},\n docs: {\n page: mdx\n },\n remountAll: true\n },};\n\nconst columnHeight =\n context.theme.layout.screenH -\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\n return Array.from({ length }).map((_, i) => {\n const button = {\n type: buttonType,\n title: `Button ${i + 1}`\n };\n if (!isDynamicWidth) {\n button.fixed = true;\n button.w = 250;\n }\n if (isVariedHeight) {\n button.h = 40 + Math.floor(Math.random() * 100);\n }\n return button;\n });\n};\n\nexport const Column = args =>\n class Column extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h:\n context.theme.layout.screenH -\n 2 *\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\n scrollIndex: args.scrollIndex,\n items: createItems(Button, 20)\n }\n };\n }\n };;\n\nColumn.args = {\n scroll: 1,\n scrollIndex: 0,\n alwaysScroll: false\n};\n\nColumn.argTypes = {\n scroll: {\n control: 'select',\n options: [1, 5, 15, 20],\n description: 'Scroll to selected index',\n table: { defaultValue: { summary: 'undefined' } }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\n\nColumn.parameters = {\n argActions: {\n scroll: function (index, component) {\n component.tag('Column').scrollTo(index - 1);\n }\n }\n};\n\nexport const MultiColumn = () =>\n class MultiColumn extends lng.Component {\n static _template() {\n return {\n Row: {\n type: Row,\n items: [\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n },\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n }\n ]\n }\n };\n }\n };;\n\nexport const Plinko = () =>\n class Plinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };;\n\nexport const VaryingItemHeight = () =>\n class VaryingItemHeight extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(Button, 10, true)\n }\n };\n }\n };;\n\nexport const ExpandableHeightItems = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(ExpandingButton, 15)\n }\n };\n }\n };;\n\nexport const ExpandableHeightRows = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n plinko: true,\n items: Array.apply(null, { length: 15 }).map(() => ({\n type: Row,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 3)\n }))\n }\n };\n }\n };;\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 49 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n }\n ]\n }\n };\n }\n };;\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: { type: 'boolean' },\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const OnScreenEffect = () =>\n class OnScreenEffect extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n scrollIndex: 2,\n h: columnHeight,\n items: createItems(Button, 10)\n }\n };\n }\n\n _init() {\n this.tag('Column').onScreenEffect = items => {\n const { selected } = this.tag('Column');\n const selectedIndex = items.indexOf(selected);\n\n items\n .slice(0, selectedIndex)\n .reverse()\n .forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n items.slice(selectedIndex + 1).forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n };\n }\n };;\n\nexport const StickyTitle = () => {\n const items = flatten(\n Array.apply(null, { length: 5 }).map((_, i) => {\n const headerText = `Sticky Header ${i}`;\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\n return {\n type: Button,\n title: `Button ${i + 1}`,\n fixed: true,\n w: 250,\n headerText\n };\n });\n\n return [\n {\n type: ColumnHeader,\n headerText,\n h: 40,\n skipFocus: true\n },\n ...items\n ];\n })\n );\n items.shift();\n\n return class ColumnExample extends lng.Component {\n static _template() {\n return {\n Column: {\n y: 50,\n h: 400,\n autoResizeWidth: true,\n clipping: true,\n type: ColumnComponent,\n items,\n signals: {\n selectedChange: '_updateHeader'\n }\n },\n ColumnHeader: {\n type: ColumnHeader,\n headerText: 'Sticky Header 0',\n h: 40\n }\n };\n }\n\n _updateHeader(selected) {\n this.tag('ColumnHeader').headerText = selected.headerText || '';\n }\n };\n};;\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n autoResizeWidth: true,\n items: [\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 2)\n },\n {\n ...createItems(Button, 1)[0],\n centerInParent: true\n }\n ]\n }\n };\n }\n };;\n\nCenteredInParent.parameters = {\n storyDetails:\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\n};\n\nclass ColumnHeader extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 5,\n y: 10,\n text: {\n fontSize: 24,\n textColor: 0xffffffff\n },\n zIndex: 2\n },\n Line: {\n color: 0xffffff1f,\n rect: true,\n w: 300,\n y: 35,\n h: 3\n }\n };\n }\n\n set headerText(text) {\n this.tag('Label').text.text = text;\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').text = this.titleText;\n }\n}\n\nclass ExpandingButton extends Button {\n _init() {\n this.h = 80;\n super._init();\n this.fireAncestors('$itemChanged');\n }\n\n _focus() {\n super._focus();\n this.smooth = { h: 120 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 80 };\n this.fireAncestors('$itemChanged');\n }\n}\n\nexport const SkipPlinko = () =>\n class SkipPlinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n w: getWidthByUpCount(context.theme, 1),\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n skipPlinko: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n },\n metadata: {\n title: 'Row with skipPlinko set to true'\n },\n persistentMetadata: true\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n }\n ]\n }\n ]\n }\n };\n }\n };;\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 20),\n alwaysScroll: args.alwaysScroll\n }\n };\n }\n };;\nLazyUpCount.args = {\n scrollIndex: 0,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2,\n itemTransition: 0.4,\n alwaysScroll: false,\n scroll: 1\n};\n\nLazyUpCount.argTypes = {\n itemTransition: {\n table: {\n disable: true // removes control from story\n }\n },\n scroll: {\n table: {\n disable: true // removes control from story\n }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n },\n alwaysScroll: {\n control: { type: 'boolean' },\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Column').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Column').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Column').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };;\nAddingItems.args = {\n scrollIndex: 0,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\n};\n\nexport const RemovingItems = args =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Column').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n scrollIndex: 0\n};\nRemovingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n }\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Column": { @@ -15154,7 +15084,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { context } from '../../globals';\nimport { flatten, getWidthByUpCount } from '../../utils';\nimport Row from '../Row';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport { default as ColumnComponent } from '.';\nimport mdx from './Column.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\n\nexport default {\n title: `${CATEGORIES[64]}/Column`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nconst columnHeight =\n context.theme.layout.screenH -\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\n return Array.from({ length }).map((_, i) => {\n const button = {\n type: buttonType,\n title: `Button ${i + 1}`\n };\n if (!isDynamicWidth) {\n button.fixed = true;\n button.w = 250;\n }\n if (isVariedHeight) {\n button.h = 40 + Math.floor(Math.random() * 100);\n }\n return button;\n });\n};\n\nexport const Column = args =>\n class Column extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h:\n context.theme.layout.screenH -\n 2 *\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\n scrollIndex: args.scrollIndex,\n items: createItems(Button, 20)\n }\n };\n }\n };\n\nColumn.args = {\n scroll: 1,\n scrollIndex: 0,\n alwaysScroll: false\n};\n\nColumn.argTypes = {\n scroll: {\n control: 'select',\n options: [1, 5, 15, 20],\n description: 'Scroll to selected index',\n table: { defaultValue: { summary: 'undefined' } }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\n\nColumn.parameters = {\n argActions: {\n scroll: function (index, component) {\n component.tag('Column').scrollTo(index - 1);\n }\n }\n};\n\nexport const MultiColumn = () =>\n class MultiColumn extends lng.Component {\n static _template() {\n return {\n Row: {\n type: Row,\n items: [\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n },\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n }\n ]\n }\n };\n }\n };\n\nexport const Plinko = () =>\n class Plinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n\nexport const VaryingItemHeight = () =>\n class VaryingItemHeight extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(Button, 10, true)\n }\n };\n }\n };\n\nexport const ExpandableHeightItems = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(ExpandingButton, 15)\n }\n };\n }\n };\n\nexport const ExpandableHeightRows = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n plinko: true,\n items: Array.apply(null, { length: 15 }).map(() => ({\n type: Row,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 3)\n }))\n }\n };\n }\n };\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 49 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: { type: 'boolean' },\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const OnScreenEffect = () =>\n class OnScreenEffect extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n scrollIndex: 2,\n h: columnHeight,\n items: createItems(Button, 10)\n }\n };\n }\n\n _init() {\n this.tag('Column').onScreenEffect = items => {\n const { selected } = this.tag('Column');\n const selectedIndex = items.indexOf(selected);\n\n items\n .slice(0, selectedIndex)\n .reverse()\n .forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n items.slice(selectedIndex + 1).forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n };\n }\n };\n\nexport const StickyTitle = () => {\n const items = flatten(\n Array.apply(null, { length: 5 }).map((_, i) => {\n const headerText = `Sticky Header ${i}`;\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\n return {\n type: Button,\n title: `Button ${i + 1}`,\n fixed: true,\n w: 250,\n headerText\n };\n });\n\n return [\n {\n type: ColumnHeader,\n headerText,\n h: 40,\n skipFocus: true\n },\n ...items\n ];\n })\n );\n items.shift();\n\n return class ColumnExample extends lng.Component {\n static _template() {\n return {\n Column: {\n y: 50,\n h: 400,\n autoResizeWidth: true,\n clipping: true,\n type: ColumnComponent,\n items,\n signals: {\n selectedChange: '_updateHeader'\n }\n },\n ColumnHeader: {\n type: ColumnHeader,\n headerText: 'Sticky Header 0',\n h: 40\n }\n };\n }\n\n _updateHeader(selected) {\n this.tag('ColumnHeader').headerText = selected.headerText || '';\n }\n };\n};\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n autoResizeWidth: true,\n items: [\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 2)\n },\n {\n ...createItems(Button, 1)[0],\n centerInParent: true\n }\n ]\n }\n };\n }\n };\n\nCenteredInParent.parameters = {\n storyDetails:\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\n};\n\nclass ColumnHeader extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 5,\n y: 10,\n text: {\n fontSize: 24,\n textColor: 0xffffffff\n },\n zIndex: 2\n },\n Line: {\n color: 0xffffff1f,\n rect: true,\n w: 300,\n y: 35,\n h: 3\n }\n };\n }\n\n set headerText(text) {\n this.tag('Label').text.text = text;\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').text = this.titleText;\n }\n}\n\nclass ExpandingButton extends Button {\n _init() {\n this.h = 80;\n super._init();\n this.fireAncestors('$itemChanged');\n }\n\n _focus() {\n super._focus();\n this.smooth = { h: 120 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 80 };\n this.fireAncestors('$itemChanged');\n }\n}\n\nexport const SkipPlinko = () =>\n class SkipPlinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n w: getWidthByUpCount(context.theme, 1),\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n skipPlinko: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n },\n metadata: {\n title: 'Row with skipPlinko set to true'\n },\n persistentMetadata: true\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n }\n ]\n }\n ]\n }\n };\n }\n };\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 20),\n alwaysScroll: args.alwaysScroll\n }\n };\n }\n };\nLazyUpCount.args = {\n scrollIndex: 0,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2,\n itemTransition: 0.4,\n alwaysScroll: false,\n scroll: 1\n};\n\nLazyUpCount.argTypes = {\n itemTransition: {\n table: {\n disable: true // removes control from story\n }\n },\n scroll: {\n table: {\n disable: true // removes control from story\n }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n },\n alwaysScroll: {\n control: { type: 'boolean' },\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Column').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Column').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Column').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n scrollIndex: 0,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\n};\n\nexport const RemovingItems = args =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Column').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n scrollIndex: 0\n};\nRemovingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n }\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\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 { context } from '../../globals';\nimport { flatten, getWidthByUpCount } from '../../utils';\nimport Row from '../Row';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport { default as ColumnComponent } from '.';\nimport mdx from './Column.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\n\nexport default {\n title: `${CATEGORIES[8]}/Column`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nconst columnHeight =\n context.theme.layout.screenH -\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\n return Array.from({ length }).map((_, i) => {\n const button = {\n type: buttonType,\n title: `Button ${i + 1}`\n };\n if (!isDynamicWidth) {\n button.fixed = true;\n button.w = 250;\n }\n if (isVariedHeight) {\n button.h = 40 + Math.floor(Math.random() * 100);\n }\n return button;\n });\n};\n\nexport const Column = args =>\n class Column extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h:\n context.theme.layout.screenH -\n 2 *\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\n scrollIndex: args.scrollIndex,\n items: createItems(Button, 20)\n }\n };\n }\n };\n\nColumn.args = {\n scroll: 1,\n scrollIndex: 0,\n alwaysScroll: false\n};\n\nColumn.argTypes = {\n scroll: {\n control: 'select',\n options: [1, 5, 15, 20],\n description: 'Scroll to selected index',\n table: { defaultValue: { summary: 'undefined' } }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\n\nColumn.parameters = {\n argActions: {\n scroll: function (index, component) {\n component.tag('Column').scrollTo(index - 1);\n }\n }\n};\n\nexport const MultiColumn = () =>\n class MultiColumn extends lng.Component {\n static _template() {\n return {\n Row: {\n type: Row,\n items: [\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n },\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n }\n ]\n }\n };\n }\n };\n\nexport const Plinko = () =>\n class Plinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n\nexport const VaryingItemHeight = () =>\n class VaryingItemHeight extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(Button, 10, true)\n }\n };\n }\n };\n\nexport const ExpandableHeightItems = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(ExpandingButton, 15)\n }\n };\n }\n };\n\nexport const ExpandableHeightRows = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n plinko: true,\n items: Array.apply(null, { length: 15 }).map(() => ({\n type: Row,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 3)\n }))\n }\n };\n }\n };\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 49 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: { type: 'boolean' },\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const OnScreenEffect = () =>\n class OnScreenEffect extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n scrollIndex: 2,\n h: columnHeight,\n items: createItems(Button, 10)\n }\n };\n }\n\n _init() {\n this.tag('Column').onScreenEffect = items => {\n const { selected } = this.tag('Column');\n const selectedIndex = items.indexOf(selected);\n\n items\n .slice(0, selectedIndex)\n .reverse()\n .forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n items.slice(selectedIndex + 1).forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n };\n }\n };\n\nexport const StickyTitle = () => {\n const items = flatten(\n Array.apply(null, { length: 5 }).map((_, i) => {\n const headerText = `Sticky Header ${i}`;\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\n return {\n type: Button,\n title: `Button ${i + 1}`,\n fixed: true,\n w: 250,\n headerText\n };\n });\n\n return [\n {\n type: ColumnHeader,\n headerText,\n h: 40,\n skipFocus: true\n },\n ...items\n ];\n })\n );\n items.shift();\n\n return class ColumnExample extends lng.Component {\n static _template() {\n return {\n Column: {\n y: 50,\n h: 400,\n autoResizeWidth: true,\n clipping: true,\n type: ColumnComponent,\n items,\n signals: {\n selectedChange: '_updateHeader'\n }\n },\n ColumnHeader: {\n type: ColumnHeader,\n headerText: 'Sticky Header 0',\n h: 40\n }\n };\n }\n\n _updateHeader(selected) {\n this.tag('ColumnHeader').headerText = selected.headerText || '';\n }\n };\n};\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n autoResizeWidth: true,\n items: [\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 2)\n },\n {\n ...createItems(Button, 1)[0],\n centerInParent: true\n }\n ]\n }\n };\n }\n };\n\nCenteredInParent.parameters = {\n storyDetails:\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\n};\n\nclass ColumnHeader extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 5,\n y: 10,\n text: {\n fontSize: 24,\n textColor: 0xffffffff\n },\n zIndex: 2\n },\n Line: {\n color: 0xffffff1f,\n rect: true,\n w: 300,\n y: 35,\n h: 3\n }\n };\n }\n\n set headerText(text) {\n this.tag('Label').text.text = text;\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').text = this.titleText;\n }\n}\n\nclass ExpandingButton extends Button {\n _init() {\n this.h = 80;\n super._init();\n this.fireAncestors('$itemChanged');\n }\n\n _focus() {\n super._focus();\n this.smooth = { h: 120 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 80 };\n this.fireAncestors('$itemChanged');\n }\n}\n\nexport const SkipPlinko = () =>\n class SkipPlinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n w: getWidthByUpCount(context.theme, 1),\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n skipPlinko: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n },\n metadata: {\n title: 'Row with skipPlinko set to true'\n },\n persistentMetadata: true\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n }\n ]\n }\n ]\n }\n };\n }\n };\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 20),\n alwaysScroll: args.alwaysScroll\n }\n };\n }\n };\nLazyUpCount.args = {\n scrollIndex: 0,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2,\n itemTransition: 0.4,\n alwaysScroll: false,\n scroll: 1\n};\n\nLazyUpCount.argTypes = {\n itemTransition: {\n table: {\n disable: true // removes control from story\n }\n },\n scroll: {\n table: {\n disable: true // removes control from story\n }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n },\n alwaysScroll: {\n control: { type: 'boolean' },\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Column').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Column').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Column').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n scrollIndex: 0,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\n};\n\nexport const RemovingItems = args =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Column').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n scrollIndex: 0\n};\nRemovingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n }\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Column": { @@ -15440,10 +15370,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Column_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][64] + "/Column", + title: constants["a" /* CATEGORIES */][8] + "/Column", 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 { context } from '../../globals';\nimport { flatten, getWidthByUpCount } from '../../utils';\nimport Row from '../Row';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport { default as ColumnComponent } from '.';\nimport mdx from './Column.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\n\nexport default {\n title: `${CATEGORIES[64]}/Column`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nconst columnHeight =\n context.theme.layout.screenH -\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\n return Array.from({ length }).map((_, i) => {\n const button = {\n type: buttonType,\n title: `Button ${i + 1}`\n };\n if (!isDynamicWidth) {\n button.fixed = true;\n button.w = 250;\n }\n if (isVariedHeight) {\n button.h = 40 + Math.floor(Math.random() * 100);\n }\n return button;\n });\n};\n\nexport const Column = args =>\n class Column extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h:\n context.theme.layout.screenH -\n 2 *\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\n scrollIndex: args.scrollIndex,\n items: createItems(Button, 20)\n }\n };\n }\n };\n\nColumn.args = {\n scroll: 1,\n scrollIndex: 0,\n alwaysScroll: false\n};\n\nColumn.argTypes = {\n scroll: {\n control: 'select',\n options: [1, 5, 15, 20],\n description: 'Scroll to selected index',\n table: { defaultValue: { summary: 'undefined' } }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\n\nColumn.parameters = {\n argActions: {\n scroll: function (index, component) {\n component.tag('Column').scrollTo(index - 1);\n }\n }\n};\n\nexport const MultiColumn = () =>\n class MultiColumn extends lng.Component {\n static _template() {\n return {\n Row: {\n type: Row,\n items: [\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n },\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n }\n ]\n }\n };\n }\n };\n\nexport const Plinko = () =>\n class Plinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n\nexport const VaryingItemHeight = () =>\n class VaryingItemHeight extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(Button, 10, true)\n }\n };\n }\n };\n\nexport const ExpandableHeightItems = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(ExpandingButton, 15)\n }\n };\n }\n };\n\nexport const ExpandableHeightRows = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n plinko: true,\n items: Array.apply(null, { length: 15 }).map(() => ({\n type: Row,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 3)\n }))\n }\n };\n }\n };\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 49 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: { type: 'boolean' },\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const OnScreenEffect = () =>\n class OnScreenEffect extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n scrollIndex: 2,\n h: columnHeight,\n items: createItems(Button, 10)\n }\n };\n }\n\n _init() {\n this.tag('Column').onScreenEffect = items => {\n const { selected } = this.tag('Column');\n const selectedIndex = items.indexOf(selected);\n\n items\n .slice(0, selectedIndex)\n .reverse()\n .forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n items.slice(selectedIndex + 1).forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n };\n }\n };\n\nexport const StickyTitle = () => {\n const items = flatten(\n Array.apply(null, { length: 5 }).map((_, i) => {\n const headerText = `Sticky Header ${i}`;\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\n return {\n type: Button,\n title: `Button ${i + 1}`,\n fixed: true,\n w: 250,\n headerText\n };\n });\n\n return [\n {\n type: ColumnHeader,\n headerText,\n h: 40,\n skipFocus: true\n },\n ...items\n ];\n })\n );\n items.shift();\n\n return class ColumnExample extends lng.Component {\n static _template() {\n return {\n Column: {\n y: 50,\n h: 400,\n autoResizeWidth: true,\n clipping: true,\n type: ColumnComponent,\n items,\n signals: {\n selectedChange: '_updateHeader'\n }\n },\n ColumnHeader: {\n type: ColumnHeader,\n headerText: 'Sticky Header 0',\n h: 40\n }\n };\n }\n\n _updateHeader(selected) {\n this.tag('ColumnHeader').headerText = selected.headerText || '';\n }\n };\n};\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n autoResizeWidth: true,\n items: [\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 2)\n },\n {\n ...createItems(Button, 1)[0],\n centerInParent: true\n }\n ]\n }\n };\n }\n };\n\nCenteredInParent.parameters = {\n storyDetails:\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\n};\n\nclass ColumnHeader extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 5,\n y: 10,\n text: {\n fontSize: 24,\n textColor: 0xffffffff\n },\n zIndex: 2\n },\n Line: {\n color: 0xffffff1f,\n rect: true,\n w: 300,\n y: 35,\n h: 3\n }\n };\n }\n\n set headerText(text) {\n this.tag('Label').text.text = text;\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').text = this.titleText;\n }\n}\n\nclass ExpandingButton extends Button {\n _init() {\n this.h = 80;\n super._init();\n this.fireAncestors('$itemChanged');\n }\n\n _focus() {\n super._focus();\n this.smooth = { h: 120 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 80 };\n this.fireAncestors('$itemChanged');\n }\n}\n\nexport const SkipPlinko = () =>\n class SkipPlinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n w: getWidthByUpCount(context.theme, 1),\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n skipPlinko: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n },\n metadata: {\n title: 'Row with skipPlinko set to true'\n },\n persistentMetadata: true\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n }\n ]\n }\n ]\n }\n };\n }\n };\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 20),\n alwaysScroll: args.alwaysScroll\n }\n };\n }\n };\nLazyUpCount.args = {\n scrollIndex: 0,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2,\n itemTransition: 0.4,\n alwaysScroll: false,\n scroll: 1\n};\n\nLazyUpCount.argTypes = {\n itemTransition: {\n table: {\n disable: true // removes control from story\n }\n },\n scroll: {\n table: {\n disable: true // removes control from story\n }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n },\n alwaysScroll: {\n control: { type: 'boolean' },\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Column').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Column').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Column').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n scrollIndex: 0,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\n};\n\nexport const RemovingItems = args =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Column').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n scrollIndex: 0\n};\nRemovingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n }\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\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 { context } from '../../globals';\nimport { flatten, getWidthByUpCount } from '../../utils';\nimport Row from '../Row';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport { default as ColumnComponent } from '.';\nimport mdx from './Column.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\n\nexport default {\n title: `${CATEGORIES[8]}/Column`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nconst columnHeight =\n context.theme.layout.screenH -\n 2 * (context.theme.layout.marginY + context.theme.layout.gutterY.sm);\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {\n return Array.from({ length }).map((_, i) => {\n const button = {\n type: buttonType,\n title: `Button ${i + 1}`\n };\n if (!isDynamicWidth) {\n button.fixed = true;\n button.w = 250;\n }\n if (isVariedHeight) {\n button.h = 40 + Math.floor(Math.random() * 100);\n }\n return button;\n });\n};\n\nexport const Column = args =>\n class Column extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h:\n context.theme.layout.screenH -\n 2 *\n (context.theme.layout.marginY + context.theme.layout.gutterY.sm),\n scrollIndex: args.scrollIndex,\n items: createItems(Button, 20)\n }\n };\n }\n };\n\nColumn.args = {\n scroll: 1,\n scrollIndex: 0,\n alwaysScroll: false\n};\n\nColumn.argTypes = {\n scroll: {\n control: 'select',\n options: [1, 5, 15, 20],\n description: 'Scroll to selected index',\n table: { defaultValue: { summary: 'undefined' } }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\n\nColumn.parameters = {\n argActions: {\n scroll: function (index, component) {\n component.tag('Column').scrollTo(index - 1);\n }\n }\n};\n\nexport const MultiColumn = () =>\n class MultiColumn extends lng.Component {\n static _template() {\n return {\n Row: {\n type: Row,\n items: [\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n },\n {\n type: ColumnComponent,\n h: columnHeight,\n autoResizeWidth: true,\n items: createItems(Button, 20)\n }\n ]\n }\n };\n }\n };\n\nexport const Plinko = () =>\n class Plinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeHeight: true,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n\nexport const VaryingItemHeight = () =>\n class VaryingItemHeight extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(Button, 10, true)\n }\n };\n }\n };\n\nexport const ExpandableHeightItems = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n items: createItems(ExpandingButton, 15)\n }\n };\n }\n };\n\nexport const ExpandableHeightRows = () =>\n class ExpandableHeightItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n plinko: true,\n items: Array.apply(null, { length: 15 }).map(() => ({\n type: Row,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 3)\n }))\n }\n };\n }\n };\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: columnHeight,\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 49 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n h: 30,\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: { type: 'boolean' },\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const OnScreenEffect = () =>\n class OnScreenEffect extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n scrollIndex: 2,\n h: columnHeight,\n items: createItems(Button, 10)\n }\n };\n }\n\n _init() {\n this.tag('Column').onScreenEffect = items => {\n const { selected } = this.tag('Column');\n const selectedIndex = items.indexOf(selected);\n\n items\n .slice(0, selectedIndex)\n .reverse()\n .forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n items.slice(selectedIndex + 1).forEach((item, idx) => {\n item.alpha = 1 / (1 + idx);\n });\n };\n }\n };\n\nexport const StickyTitle = () => {\n const items = flatten(\n Array.apply(null, { length: 5 }).map((_, i) => {\n const headerText = `Sticky Header ${i}`;\n const items = Array.apply(null, { length: 8 }).map((_, i) => {\n return {\n type: Button,\n title: `Button ${i + 1}`,\n fixed: true,\n w: 250,\n headerText\n };\n });\n\n return [\n {\n type: ColumnHeader,\n headerText,\n h: 40,\n skipFocus: true\n },\n ...items\n ];\n })\n );\n items.shift();\n\n return class ColumnExample extends lng.Component {\n static _template() {\n return {\n Column: {\n y: 50,\n h: 400,\n autoResizeWidth: true,\n clipping: true,\n type: ColumnComponent,\n items,\n signals: {\n selectedChange: '_updateHeader'\n }\n },\n ColumnHeader: {\n type: ColumnHeader,\n headerText: 'Sticky Header 0',\n h: 40\n }\n };\n }\n\n _updateHeader(selected) {\n this.tag('ColumnHeader').headerText = selected.headerText || '';\n }\n };\n};\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n autoResizeWidth: true,\n items: [\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Row,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 2)\n },\n {\n ...createItems(Button, 1)[0],\n centerInParent: true\n }\n ]\n }\n };\n }\n };\n\nCenteredInParent.parameters = {\n storyDetails:\n 'Each Row in the Column has centerInParent set to true on it so is horizontally centered in the Column it is an item of.'\n};\n\nclass ColumnHeader extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 5,\n y: 10,\n text: {\n fontSize: 24,\n textColor: 0xffffffff\n },\n zIndex: 2\n },\n Line: {\n color: 0xffffff1f,\n rect: true,\n w: 300,\n y: 35,\n h: 3\n }\n };\n }\n\n set headerText(text) {\n this.tag('Label').text.text = text;\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').text = this.titleText;\n }\n}\n\nclass ExpandingButton extends Button {\n _init() {\n this.h = 80;\n super._init();\n this.fireAncestors('$itemChanged');\n }\n\n _focus() {\n super._focus();\n this.smooth = { h: 120 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 80 };\n this.fireAncestors('$itemChanged');\n }\n}\n\nexport const SkipPlinko = () =>\n class SkipPlinko extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n w: getWidthByUpCount(context.theme, 1),\n plinko: true,\n items: [\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n skipPlinko: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 4, ratioY: 1, upCount: 1 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n },\n metadata: {\n title: 'Row with skipPlinko set to true'\n },\n persistentMetadata: true\n }\n ]\n },\n {\n type: Row,\n autoResizeHeight: true,\n items: [\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/yY76zq9XSuJ4nWyPDuwkdV7Wt0c.jpg'\n }\n },\n {\n type: Tile,\n itemLayout: { ratioX: 16, ratioY: 9, upCount: 5 },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg'\n }\n }\n ]\n }\n ]\n }\n };\n }\n };\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 20),\n alwaysScroll: args.alwaysScroll\n }\n };\n }\n };\nLazyUpCount.args = {\n scrollIndex: 0,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2,\n itemTransition: 0.4,\n alwaysScroll: false,\n scroll: 1\n};\n\nLazyUpCount.argTypes = {\n itemTransition: {\n table: {\n disable: true // removes control from story\n }\n },\n scroll: {\n table: {\n disable: true // removes control from story\n }\n },\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n },\n alwaysScroll: {\n control: { type: 'boolean' },\n description:\n 'Determines whether the column will stop scrolling as it nears the bottom to prevent white space',\n table: { defaultValue: { summary: false } }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 20 items passed to this Column. The number of items that are initially rendered equals the sum of the lazyUpCount property and 2. Each time the next item is selected, an additional item is added to the end of the Column until all 20 items have been rendered.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Column').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Column').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Column').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n scrollIndex: 0,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n },\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Column (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Column.'\n};\n\nexport const RemovingItems = args =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Column: {\n type: ColumnComponent,\n h: 500,\n scrollIndex: args.scrollIndex,\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Column').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n scrollIndex: 0\n};\nRemovingItems.argTypes = {\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item heights is greater than the height of the Column',\n table: { defaultValue: { summary: 0 } }\n }\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'\n};\n", "locationsMap": { "column": { "startLoc": { @@ -17144,7 +17074,7 @@ function MDXContent(_ref) { }, "import { Control } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Control: {\n type: Control,\n title: 'Control'\n }\n };\n }\n}\n")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Canvas */ "b"], { mdxType: "Canvas" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Story */ "f"], { - id: "controls-control--control", + id: "components-control--control", mdxType: "Story" })), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("p", null, "All ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("inlineCode", { parentName: "p" @@ -17255,7 +17185,7 @@ function MDXContent(_ref) { parentName: "p" }, "Control"), " contains the same style properties as ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("a", { parentName: "p", - "href": "?path=/docs/controls-button--button" + "href": "?path=/docs/components-button--button" }, "Button"), " in additional to a couple other style properties listed below:"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("table", null, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("thead", { parentName: "table" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("tr", { @@ -17383,7 +17313,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ControlComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/Control`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Control = () =>\\n class Control extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgs = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: sharedArgs.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControl.args = {\\n ...sharedArgs\\n};\\n\\nControl.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControl.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\\n// // Control Small version on Storybook\\n// export const Small = () =>\\n// class Small extends lng.Component {\\n// static _template() {\\n// return {\\n// Control: {\\n// type: ControlSmall\\n// }\\n// };\\n// }\\n// };\\n\\n// Small.argTypes = sharedArgTypes;\\n// Small.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Control\":{\"startLoc\":{\"col\":23,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":23,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ControlComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/Control`,\n 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 { default as ControlComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/Control`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Control = () =>\\n class Control extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgs = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: sharedArgs.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControl.args = {\\n ...sharedArgs\\n};\\n\\nControl.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControl.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\\n// // Control Small version on Storybook\\n// export const Small = () =>\\n// class Small extends lng.Component {\\n// static _template() {\\n// return {\\n// Control: {\\n// type: ControlSmall\\n// }\\n// };\\n// }\\n// };\\n\\n// Small.argTypes = sharedArgTypes;\\n// Small.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"control\":{\"startLoc\":{\"col\":23,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":23,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Control = () =>\n class Control extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlComponent\n }\n };\n }\n };\n\nconst sharedArgs = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: sharedArgs.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControl.args = {\n ...sharedArgs\n};\n\nControl.argTypes = {\n ...sharedArgTypes\n};\n\nControl.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n\n// // Control Small version on Storybook\n// export const Small = () =>\n// class Small extends lng.Component {\n// static _template() {\n// return {\n// Control: {\n// type: ControlSmall\n// }\n// };\n// }\n// };\n\n// Small.argTypes = sharedArgTypes;\n// Small.parameters = { argActions: sharedArgActions };\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ControlComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Control`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Control = () =>\\n class Control extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgs = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: sharedArgs.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControl.args = {\\n ...sharedArgs\\n};\\n\\nControl.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControl.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\\n// // Control Small version on Storybook\\n// export const Small = () =>\\n// class Small extends lng.Component {\\n// static _template() {\\n// return {\\n// Control: {\\n// type: ControlSmall\\n// }\\n// };\\n// }\\n// };\\n\\n// Small.argTypes = sharedArgTypes;\\n// Small.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Control\":{\"startLoc\":{\"col\":23,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":23,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ControlComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Control`,\n 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 { default as ControlComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Control`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Control = () =>\\n class Control extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgs = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: sharedArgs.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControl.args = {\\n ...sharedArgs\\n};\\n\\nControl.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControl.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\\n// // Control Small version on Storybook\\n// export const Small = () =>\\n// class Small extends lng.Component {\\n// static _template() {\\n// return {\\n// Control: {\\n// type: ControlSmall\\n// }\\n// };\\n// }\\n// };\\n\\n// Small.argTypes = sharedArgTypes;\\n// Small.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"control\":{\"startLoc\":{\"col\":23,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":23,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Control = () =>\n class Control extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlComponent\n }\n };\n }\n };\n\nconst sharedArgs = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: sharedArgs.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControl.args = {\n ...sharedArgs\n};\n\nControl.argTypes = {\n ...sharedArgTypes\n};\n\nControl.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n\n// // Control Small version on Storybook\n// export const Small = () =>\n// class Small extends lng.Component {\n// static _template() {\n// return {\n// Control: {\n// type: ControlSmall\n// }\n// };\n// }\n// };\n\n// Small.argTypes = sharedArgTypes;\n// Small.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Control": { @@ -17409,7 +17339,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ControlComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/Control`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Control = () =>\n class Control extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlComponent\n }\n };\n }\n };\n\nconst sharedArgs = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: sharedArgs.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControl.args = {\n ...sharedArgs\n};\n\nControl.argTypes = {\n ...sharedArgTypes\n};\n\nControl.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n\n// // Control Small version on Storybook\n// export const Small = () =>\n// class Small extends lng.Component {\n// static _template() {\n// return {\n// Control: {\n// type: ControlSmall\n// }\n// };\n// }\n// };\n\n// Small.argTypes = sharedArgTypes;\n// Small.parameters = { argActions: sharedArgActions };\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 { default as ControlComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Control`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Control = () =>\n class Control extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlComponent\n }\n };\n }\n };\n\nconst sharedArgs = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: sharedArgs.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControl.args = {\n ...sharedArgs\n};\n\nControl.argTypes = {\n ...sharedArgTypes\n};\n\nControl.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n\n// // Control Small version on Storybook\n// export const Small = () =>\n// class Small extends lng.Component {\n// static _template() {\n// return {\n// Control: {\n// type: ControlSmall\n// }\n// };\n// }\n// };\n\n// Small.argTypes = sharedArgTypes;\n// Small.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Control": { @@ -17459,10 +17389,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_20__[/* CATEGORIES */ "a"][2] + "/Control", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_20__[/* CATEGORIES */ "a"][8] + "/Control", 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 { default as ControlComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/Control`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Control = () =>\n class Control extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlComponent\n }\n };\n }\n };\n\nconst sharedArgs = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: sharedArgs.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControl.args = {\n ...sharedArgs\n};\n\nControl.argTypes = {\n ...sharedArgTypes\n};\n\nControl.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n\n// // Control Small version on Storybook\n// export const Small = () =>\n// class Small extends lng.Component {\n// static _template() {\n// return {\n// Control: {\n// type: ControlSmall\n// }\n// };\n// }\n// };\n\n// Small.argTypes = sharedArgTypes;\n// Small.parameters = { argActions: sharedArgActions };\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 { default as ControlComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Control`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Control = () =>\n class Control extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlComponent\n }\n };\n }\n };\n\nconst sharedArgs = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: sharedArgs.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControl.args = {\n ...sharedArgs\n};\n\nControl.argTypes = {\n ...sharedArgTypes\n};\n\nControl.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n\n// // Control Small version on Storybook\n// export const Small = () =>\n// class Small extends lng.Component {\n// static _template() {\n// return {\n// Control: {\n// type: ControlSmall\n// }\n// };\n// }\n// };\n\n// Small.argTypes = sharedArgTypes;\n// Small.parameters = { argActions: sharedArgActions };\n", "locationsMap": { "control": { "startLoc": { @@ -17910,7 +17840,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { ControlSmall as ControlSmallComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ControlSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ControlSmall = () =>\\n class ControlSmall extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlSmallComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description:\\n 'Justification of control content; only applies to the title when prefix and title are both defined',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControlSmall.storyName = 'ControlSmall';\\nControlSmall.args = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n justify: 'center',\\n mode: 'focused'\\n};\\n\\nControlSmall.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControlSmall.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ControlSmall\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { ControlSmall as ControlSmallComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ControlSmall`,\n 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 { ControlSmall as ControlSmallComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ControlSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ControlSmall = () =>\\n class ControlSmall extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlSmallComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description:\\n 'Justification of control content; only applies to the title when prefix and title are both defined',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControlSmall.storyName = 'ControlSmall';\\nControlSmall.args = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n justify: 'center',\\n mode: 'focused'\\n};\\n\\nControlSmall.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControlSmall.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\",\"locationsMap\":{\"control-small\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ControlSmall = () =>\n class ControlSmall extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlSmallComponent\n }\n };\n }\n };\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description:\n 'Justification of control content; only applies to the title when prefix and title are both defined',\n table: {\n defaultValue: { summary: 'center' }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControlSmall.storyName = 'ControlSmall';\nControlSmall.args = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n justify: 'center',\n mode: 'focused'\n};\n\nControlSmall.argTypes = {\n ...sharedArgTypes\n};\n\nControlSmall.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { ControlSmall as ControlSmallComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ControlSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ControlSmall = () =>\\n class ControlSmall extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlSmallComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description:\\n 'Justification of control content; only applies to the title when prefix and title are both defined',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControlSmall.storyName = 'ControlSmall';\\nControlSmall.args = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n justify: 'center',\\n mode: 'focused'\\n};\\n\\nControlSmall.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControlSmall.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ControlSmall\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { ControlSmall as ControlSmallComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ControlSmall`,\n 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 { ControlSmall as ControlSmallComponent } from '.';\\nimport mdx from './Control.mdx';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { controlDescriptions } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ControlSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ControlSmall = () =>\\n class ControlSmall extends lng.Component {\\n static _template() {\\n return {\\n Control: {\\n type: ControlSmallComponent\\n }\\n };\\n }\\n };\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description: controlDescriptions.fixed,\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the fixed property is true, this will set the width of the component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n icon: {\\n control: 'radio',\\n options: ['none', 'lightning'],\\n description: 'Icon to the left of title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: ['left', 'center', 'right'],\\n description:\\n 'Justification of control content; only applies to the title when prefix and title are both defined',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n }\\n};\\n\\nconst iconSet = {\\n lightning: lightning,\\n none: null\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst sharedArgActions = {\\n icon: (iconName, component) => {\\n component.tag('Control').icon = iconSet[iconName];\\n },\\n logo: (logoName, component) => {\\n component.tag('Control').logo = logoSet[logoName];\\n },\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('Control').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\nControlSmall.storyName = 'ControlSmall';\\nControlSmall.args = {\\n title: 'Control',\\n fixed: false,\\n w: 200,\\n icon: 'none',\\n logo: 'none',\\n shouldCollapse: false,\\n justify: 'center',\\n mode: 'focused'\\n};\\n\\nControlSmall.argTypes = {\\n ...sharedArgTypes\\n};\\n\\nControlSmall.parameters = {\\n argActions: {\\n ...sharedArgActions\\n }\\n};\\n\",\"locationsMap\":{\"control-small\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ControlSmall = () =>\n class ControlSmall extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlSmallComponent\n }\n };\n }\n };\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description:\n 'Justification of control content; only applies to the title when prefix and title are both defined',\n table: {\n defaultValue: { summary: 'center' }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControlSmall.storyName = 'ControlSmall';\nControlSmall.args = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n justify: 'center',\n mode: 'focused'\n};\n\nControlSmall.argTypes = {\n ...sharedArgTypes\n};\n\nControlSmall.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ControlSmall": { @@ -17936,7 +17866,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { ControlSmall as ControlSmallComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ControlSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ControlSmall = () =>\n class ControlSmall extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlSmallComponent\n }\n };\n }\n };\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description:\n 'Justification of control content; only applies to the title when prefix and title are both defined',\n table: {\n defaultValue: { summary: 'center' }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControlSmall.storyName = 'ControlSmall';\nControlSmall.args = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n justify: 'center',\n mode: 'focused'\n};\n\nControlSmall.argTypes = {\n ...sharedArgTypes\n};\n\nControlSmall.parameters = {\n argActions: {\n ...sharedArgActions\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 { ControlSmall as ControlSmallComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ControlSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ControlSmall = () =>\n class ControlSmall extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlSmallComponent\n }\n };\n }\n };\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description:\n 'Justification of control content; only applies to the title when prefix and title are both defined',\n table: {\n defaultValue: { summary: 'center' }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControlSmall.storyName = 'ControlSmall';\nControlSmall.args = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n justify: 'center',\n mode: 'focused'\n};\n\nControlSmall.argTypes = {\n ...sharedArgTypes\n};\n\nControlSmall.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ControlSmall": { @@ -17986,10 +17916,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_20__[/* CATEGORIES */ "a"][2] + "/ControlSmall", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_20__[/* CATEGORIES */ "a"][8] + "/ControlSmall", 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 { ControlSmall as ControlSmallComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ControlSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ControlSmall = () =>\n class ControlSmall extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlSmallComponent\n }\n };\n }\n };\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description:\n 'Justification of control content; only applies to the title when prefix and title are both defined',\n table: {\n defaultValue: { summary: 'center' }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControlSmall.storyName = 'ControlSmall';\nControlSmall.args = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n justify: 'center',\n mode: 'focused'\n};\n\nControlSmall.argTypes = {\n ...sharedArgTypes\n};\n\nControlSmall.parameters = {\n argActions: {\n ...sharedArgActions\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 { ControlSmall as ControlSmallComponent } from '.';\nimport mdx from './Control.mdx';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { controlDescriptions } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ControlSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ControlSmall = () =>\n class ControlSmall extends lng.Component {\n static _template() {\n return {\n Control: {\n type: ControlSmallComponent\n }\n };\n }\n };\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n fixed: {\n control: 'boolean',\n description: controlDescriptions.fixed,\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the fixed property is true, this will set the width of the component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n icon: {\n control: 'radio',\n options: ['none', 'lightning'],\n description: 'Icon to the left of title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of title. If icon and logo are both set, logo will take precedence for what is rendered and icon will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the title will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: ['left', 'center', 'right'],\n description:\n 'Justification of control content; only applies to the title when prefix and title are both defined',\n table: {\n defaultValue: { summary: 'center' }\n }\n }\n};\n\nconst iconSet = {\n lightning: lightning,\n none: null\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst sharedArgActions = {\n icon: (iconName, component) => {\n component.tag('Control').icon = iconSet[iconName];\n },\n logo: (logoName, component) => {\n component.tag('Control').logo = logoSet[logoName];\n },\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('Control').shouldCollapse = shouldCollapse;\n }\n};\n\nControlSmall.storyName = 'ControlSmall';\nControlSmall.args = {\n title: 'Control',\n fixed: false,\n w: 200,\n icon: 'none',\n logo: 'none',\n shouldCollapse: false,\n justify: 'center',\n mode: 'focused'\n};\n\nControlSmall.argTypes = {\n ...sharedArgTypes\n};\n\nControlSmall.parameters = {\n argActions: {\n ...sharedArgActions\n }\n};\n", "locationsMap": { "control-small": { "startLoc": { @@ -18753,7 +18683,7 @@ function MDXContent(_ref) { parentName: "p" }, "ControlRow"), " component renders a\n", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/layout-titlerow--basic" + "href": "/docs/components-titlerow--basic" }, "TitleRow"), " component with optional left controls content items, and right controls\nwhich are rendered as row items in that order."), Object(esm["b" /* mdx */])("h2", { "id": "source" }, "Source"), Object(esm["b" /* mdx */])("p", null, Object(esm["b" /* mdx */])("a", { @@ -18767,7 +18697,7 @@ function MDXContent(_ref) { parentName: "p" }, "ControlRow"), " accepts all ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/layout-titlerow--basic#properties" + "href": "/docs/components-titlerow--basic#properties" }, "properties supported by TitleRow"), "\nas well as optional ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "leftControls"), ", ", Object(esm["b" /* mdx */])("inlineCode", { @@ -18780,7 +18710,7 @@ function MDXContent(_ref) { }, "import { ControlRow } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRow,\n leftControls: [\n // list of components to display as left controls\n ],\n contentItems: [\n // list of components to display as content items\n ],\n rightControls: [\n // list of components to display as right controls\n ]\n }\n };\n }\n _getFocused() {\n return this.tag('ControlRow');\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "navigation-controlrow--basic", + id: "components-controlrow--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "lazyloading" @@ -18823,7 +18753,7 @@ function MDXContent(_ref) { parentName: "strong" }, "ControlRow"), " is a subclass of the ", Object(esm["b" /* mdx */])("a", { parentName: "strong", - "href": "/docs/layout-titlerow--basic" + "href": "/docs/components-titlerow--basic" }, Object(esm["b" /* mdx */])("inlineCode", { parentName: "a" }, "TitleRow"))), ",\nso allows setting all properties that are available on ", Object(esm["b" /* mdx */])("inlineCode", { @@ -19022,7 +18952,7 @@ function ControlRow_stories_getPrototypeOf(o) { ControlRow_stories_getPrototypeO /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Tile from '../Tile';\\nimport ControlSmall from '../Control/ControlSmall';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport playIcon from '../../assets/images/ic_play_white_32.png';\\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\\nimport ControlRowComponent from '.';\\nimport mdx from './ControlRow.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/ControlRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n ...TitleRowStory.args,\\n lazyScroll: true,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...TitleRowStory.argTypes,\\n ...createModeControl({ summaryValue: 'focused' })\\n }\\n};\\n\\nconst createItems = (length, src, props = {}) => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n artwork: {\\n src\\n },\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`,\\n ...props\\n }));\\n};\\nconst createControls = (length, icon = lightningIcon, props = {}) => {\\n return Array.from({ length }).map(() => ({\\n type: ControlSmall,\\n icon,\\n fixed: true,\\n h: 64,\\n w: 64,\\n ...props\\n }));\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nexport const LazyLoading = () =>\\n class LazyLoading extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3),\\n lazyLoadBuffer: 1,\\n signals: {\\n loadMoreItems: '_loadMore'\\n }\\n }\\n };\\n }\\n\\n _construct() {\\n this._counter = 0;\\n }\\n\\n _loadMore() {\\n if (this._counter < 2) {\\n this._ControlRow.addContentItems(\\n createItems(\\n 3,\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n )\\n );\\n this._counter++;\\n }\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nLazyLoading.args = { lazyLoadBuffer: 1 };\\nLazyLoading.argTypes = {\\n lazyLoadBuffer: {\\n control: 'number',\\n description:\\n 'The number of items before the last content item at which a signal, \\\"loadMoreItems\\\", is emitted.',\\n remount: true,\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyLoading.parameters = {\\n storyDetails:\\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\\n};\\n\\nconst createSignal = signalName => ({\\n onEnter: function () {\\n this.signal(signalName);\\n },\\n passSignals: { [signalName]: true }\\n});\\n\\nconst parksUrl =\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\\n\\nexport const AddingAndRemoving = () =>\\n class AddingAndRemoving extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n signals: {\\n addLeftControl: true,\\n removeLeftControl: true,\\n addContentItem: true,\\n removeContentItem: true,\\n addRightControl: true,\\n removeRightControl: true\\n },\\n leftControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addLeftControl')\\n ),\\n contentItems: createItems(\\n 3,\\n undefined,\\n createSignal('addContentItem')\\n ),\\n rightControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addRightControl')\\n )\\n }\\n };\\n }\\n\\n addLeftControl() {\\n this._ControlRow.addLeftControlsAt(\\n createControls(1, playIcon, createSignal('removeLeftControl')),\\n 0\\n );\\n }\\n\\n removeLeftControl() {\\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\\n }\\n\\n addContentItem() {\\n this._ControlRow.addContentItemsAt(\\n createItems(1, parksUrl, createSignal('removeContentItem')),\\n this.contentItemIndex + 1\\n );\\n }\\n\\n removeContentItem() {\\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\\n }\\n\\n addRightControl() {\\n this._ControlRow.addRightControls(\\n createControls(1, playIcon, createSignal('removeRightControl'))\\n );\\n }\\n\\n removeRightControl() {\\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n\\n get contentItemIndex() {\\n return (\\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\\n );\\n }\\n\\n get rightControlIndex() {\\n return (\\n this._ControlRow.selectedIndex -\\n this._ControlRow.leftControls.length -\\n this._ControlRow.contentItems.length\\n );\\n }\\n\\n _getFocused() {\\n return this._ControlRow;\\n }\\n };\\n\\nAddingAndRemoving.parameters = {\\n storyDetails: `\\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\\n - left controls: prepend a new control with a play icon to the left controls\\n - content items: append a tile with a background after the selected index\\n - right controls: append a new control with a play icon to the right controls\\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item. \\n `\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":75},\"endLoc\":{\"col\":3,\"line\":91},\"startBody\":{\"col\":21,\"line\":75},\"endBody\":{\"col\":3,\"line\":91}},\"LazyLoading\":{\"startLoc\":{\"col\":27,\"line\":93},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":27,\"line\":93},\"endBody\":{\"col\":3,\"line\":133}},\"AddingAndRemoving\":{\"startLoc\":{\"col\":33,\"line\":160},\"endLoc\":{\"col\":3,\"line\":246},\"startBody\":{\"col\":33,\"line\":160},\"endBody\":{\"col\":3,\"line\":246}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Tile from '../Tile';\nimport ControlSmall from '../Control/ControlSmall';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport playIcon from '../../assets/images/ic_play_white_32.png';\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\nimport ControlRowComponent from '.';\nimport mdx from './ControlRow.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: `${CATEGORIES[64]}/ControlRow`,\n 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 Tile from '../Tile';\\nimport ControlSmall from '../Control/ControlSmall';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport playIcon from '../../assets/images/ic_play_white_32.png';\\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\\nimport ControlRowComponent from '.';\\nimport mdx from './ControlRow.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/ControlRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n ...TitleRowStory.args,\\n lazyScroll: true,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...TitleRowStory.argTypes,\\n ...createModeControl({ summaryValue: 'focused' })\\n }\\n};\\n\\nconst createItems = (length, src, props = {}) => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n artwork: {\\n src\\n },\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`,\\n ...props\\n }));\\n};\\nconst createControls = (length, icon = lightningIcon, props = {}) => {\\n return Array.from({ length }).map(() => ({\\n type: ControlSmall,\\n icon,\\n fixed: true,\\n h: 64,\\n w: 64,\\n ...props\\n }));\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nexport const LazyLoading = () =>\\n class LazyLoading extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3),\\n lazyLoadBuffer: 1,\\n signals: {\\n loadMoreItems: '_loadMore'\\n }\\n }\\n };\\n }\\n\\n _construct() {\\n this._counter = 0;\\n }\\n\\n _loadMore() {\\n if (this._counter < 2) {\\n this._ControlRow.addContentItems(\\n createItems(\\n 3,\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n )\\n );\\n this._counter++;\\n }\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nLazyLoading.args = { lazyLoadBuffer: 1 };\\nLazyLoading.argTypes = {\\n lazyLoadBuffer: {\\n control: 'number',\\n description:\\n 'The number of items before the last content item at which a signal, \\\"loadMoreItems\\\", is emitted.',\\n remount: true,\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyLoading.parameters = {\\n storyDetails:\\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\\n};\\n\\nconst createSignal = signalName => ({\\n onEnter: function () {\\n this.signal(signalName);\\n },\\n passSignals: { [signalName]: true }\\n});\\n\\nconst parksUrl =\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\\n\\nexport const AddingAndRemoving = () =>\\n class AddingAndRemoving extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n signals: {\\n addLeftControl: true,\\n removeLeftControl: true,\\n addContentItem: true,\\n removeContentItem: true,\\n addRightControl: true,\\n removeRightControl: true\\n },\\n leftControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addLeftControl')\\n ),\\n contentItems: createItems(\\n 3,\\n undefined,\\n createSignal('addContentItem')\\n ),\\n rightControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addRightControl')\\n )\\n }\\n };\\n }\\n\\n addLeftControl() {\\n this._ControlRow.addLeftControlsAt(\\n createControls(1, playIcon, createSignal('removeLeftControl')),\\n 0\\n );\\n }\\n\\n removeLeftControl() {\\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\\n }\\n\\n addContentItem() {\\n this._ControlRow.addContentItemsAt(\\n createItems(1, parksUrl, createSignal('removeContentItem')),\\n this.contentItemIndex + 1\\n );\\n }\\n\\n removeContentItem() {\\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\\n }\\n\\n addRightControl() {\\n this._ControlRow.addRightControls(\\n createControls(1, playIcon, createSignal('removeRightControl'))\\n );\\n }\\n\\n removeRightControl() {\\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n\\n get contentItemIndex() {\\n return (\\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\\n );\\n }\\n\\n get rightControlIndex() {\\n return (\\n this._ControlRow.selectedIndex -\\n this._ControlRow.leftControls.length -\\n this._ControlRow.contentItems.length\\n );\\n }\\n\\n _getFocused() {\\n return this._ControlRow;\\n }\\n };\\n\\nAddingAndRemoving.parameters = {\\n storyDetails: `\\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\\n - left controls: prepend a new control with a play icon to the left controls\\n - content items: append a tile with a background after the selected index\\n - right controls: append a new control with a play icon to the right controls\\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item. \\n `\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":75},\"endLoc\":{\"col\":3,\"line\":91},\"startBody\":{\"col\":21,\"line\":75},\"endBody\":{\"col\":3,\"line\":91}},\"lazy-loading\":{\"startLoc\":{\"col\":27,\"line\":93},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":27,\"line\":93},\"endBody\":{\"col\":3,\"line\":133}},\"adding-and-removing\":{\"startLoc\":{\"col\":33,\"line\":160},\"endLoc\":{\"col\":3,\"line\":246},\"startBody\":{\"col\":33,\"line\":160},\"endBody\":{\"col\":3,\"line\":246}}}},\n docs: {\n page: mdx\n }\n },\n args: {\n ...TitleRowStory.args,\n lazyScroll: true,\n mode: 'focused'\n },\n argTypes: {\n ...TitleRowStory.argTypes,\n ...createModeControl({ summaryValue: 'focused' })\n }\n};\n\nconst createItems = (length, src, props = {}) => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n artwork: {\n src\n },\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`,\n ...props\n }));\n};\nconst createControls = (length, icon = lightningIcon, props = {}) => {\n return Array.from({ length }).map(() => ({\n type: ControlSmall,\n icon,\n fixed: true,\n h: 64,\n w: 64,\n ...props\n }));\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3)\n }\n };\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n };;\n\nexport const LazyLoading = () =>\n class LazyLoading extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3),\n lazyLoadBuffer: 1,\n signals: {\n loadMoreItems: '_loadMore'\n }\n }\n };\n }\n\n _construct() {\n this._counter = 0;\n }\n\n _loadMore() {\n if (this._counter < 2) {\n this._ControlRow.addContentItems(\n createItems(\n 3,\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n )\n );\n this._counter++;\n }\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n };;\n\nLazyLoading.args = { lazyLoadBuffer: 1 };\nLazyLoading.argTypes = {\n lazyLoadBuffer: {\n control: 'number',\n description:\n 'The number of items before the last content item at which a signal, \"loadMoreItems\", is emitted.',\n remount: true,\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyLoading.parameters = {\n storyDetails:\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\n};\n\nconst createSignal = signalName => ({\n onEnter: function () {\n this.signal(signalName);\n },\n passSignals: { [signalName]: true }\n});\n\nconst parksUrl =\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\n\nexport const AddingAndRemoving = () =>\n class AddingAndRemoving extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n signals: {\n addLeftControl: true,\n removeLeftControl: true,\n addContentItem: true,\n removeContentItem: true,\n addRightControl: true,\n removeRightControl: true\n },\n leftControls: createControls(\n 1,\n lightningIcon,\n createSignal('addLeftControl')\n ),\n contentItems: createItems(\n 3,\n undefined,\n createSignal('addContentItem')\n ),\n rightControls: createControls(\n 1,\n lightningIcon,\n createSignal('addRightControl')\n )\n }\n };\n }\n\n addLeftControl() {\n this._ControlRow.addLeftControlsAt(\n createControls(1, playIcon, createSignal('removeLeftControl')),\n 0\n );\n }\n\n removeLeftControl() {\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\n }\n\n addContentItem() {\n this._ControlRow.addContentItemsAt(\n createItems(1, parksUrl, createSignal('removeContentItem')),\n this.contentItemIndex + 1\n );\n }\n\n removeContentItem() {\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\n }\n\n addRightControl() {\n this._ControlRow.addRightControls(\n createControls(1, playIcon, createSignal('removeRightControl'))\n );\n }\n\n removeRightControl() {\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n\n get contentItemIndex() {\n return (\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\n );\n }\n\n get rightControlIndex() {\n return (\n this._ControlRow.selectedIndex -\n this._ControlRow.leftControls.length -\n this._ControlRow.contentItems.length\n );\n }\n\n _getFocused() {\n return this._ControlRow;\n }\n };\n\nAddingAndRemoving.parameters = {\n storyDetails: `\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item. \n `\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Tile from '../Tile';\\nimport ControlSmall from '../Control/ControlSmall';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport playIcon from '../../assets/images/ic_play_white_32.png';\\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\\nimport ControlRowComponent from '.';\\nimport mdx from './ControlRow.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ControlRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n ...TitleRowStory.args,\\n lazyScroll: true,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...TitleRowStory.argTypes,\\n ...createModeControl({ summaryValue: 'focused' })\\n }\\n};\\n\\nconst createItems = (length, src, props = {}) => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n artwork: {\\n src\\n },\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`,\\n ...props\\n }));\\n};\\nconst createControls = (length, icon = lightningIcon, props = {}) => {\\n return Array.from({ length }).map(() => ({\\n type: ControlSmall,\\n icon,\\n fixed: true,\\n h: 64,\\n w: 64,\\n ...props\\n }));\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nexport const LazyLoading = () =>\\n class LazyLoading extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3),\\n lazyLoadBuffer: 1,\\n signals: {\\n loadMoreItems: '_loadMore'\\n }\\n }\\n };\\n }\\n\\n _construct() {\\n this._counter = 0;\\n }\\n\\n _loadMore() {\\n if (this._counter < 2) {\\n this._ControlRow.addContentItems(\\n createItems(\\n 3,\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n )\\n );\\n this._counter++;\\n }\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nLazyLoading.args = { lazyLoadBuffer: 1 };\\nLazyLoading.argTypes = {\\n lazyLoadBuffer: {\\n control: 'number',\\n description:\\n 'The number of items before the last content item at which a signal, \\\"loadMoreItems\\\", is emitted.',\\n remount: true,\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyLoading.parameters = {\\n storyDetails:\\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\\n};\\n\\nconst createSignal = signalName => ({\\n onEnter: function () {\\n this.signal(signalName);\\n },\\n passSignals: { [signalName]: true }\\n});\\n\\nconst parksUrl =\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\\n\\nexport const AddingAndRemoving = () =>\\n class AddingAndRemoving extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n signals: {\\n addLeftControl: true,\\n removeLeftControl: true,\\n addContentItem: true,\\n removeContentItem: true,\\n addRightControl: true,\\n removeRightControl: true\\n },\\n leftControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addLeftControl')\\n ),\\n contentItems: createItems(\\n 3,\\n undefined,\\n createSignal('addContentItem')\\n ),\\n rightControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addRightControl')\\n )\\n }\\n };\\n }\\n\\n addLeftControl() {\\n this._ControlRow.addLeftControlsAt(\\n createControls(1, playIcon, createSignal('removeLeftControl')),\\n 0\\n );\\n }\\n\\n removeLeftControl() {\\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\\n }\\n\\n addContentItem() {\\n this._ControlRow.addContentItemsAt(\\n createItems(1, parksUrl, createSignal('removeContentItem')),\\n this.contentItemIndex + 1\\n );\\n }\\n\\n removeContentItem() {\\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\\n }\\n\\n addRightControl() {\\n this._ControlRow.addRightControls(\\n createControls(1, playIcon, createSignal('removeRightControl'))\\n );\\n }\\n\\n removeRightControl() {\\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n\\n get contentItemIndex() {\\n return (\\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\\n );\\n }\\n\\n get rightControlIndex() {\\n return (\\n this._ControlRow.selectedIndex -\\n this._ControlRow.leftControls.length -\\n this._ControlRow.contentItems.length\\n );\\n }\\n\\n _getFocused() {\\n return this._ControlRow;\\n }\\n };\\n\\nAddingAndRemoving.parameters = {\\n storyDetails: `\\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\\n - left controls: prepend a new control with a play icon to the left controls\\n - content items: append a tile with a background after the selected index\\n - right controls: append a new control with a play icon to the right controls\\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item.\\n `\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":75},\"endLoc\":{\"col\":3,\"line\":91},\"startBody\":{\"col\":21,\"line\":75},\"endBody\":{\"col\":3,\"line\":91}},\"LazyLoading\":{\"startLoc\":{\"col\":27,\"line\":93},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":27,\"line\":93},\"endBody\":{\"col\":3,\"line\":133}},\"AddingAndRemoving\":{\"startLoc\":{\"col\":33,\"line\":160},\"endLoc\":{\"col\":3,\"line\":246},\"startBody\":{\"col\":33,\"line\":160},\"endBody\":{\"col\":3,\"line\":246}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Tile from '../Tile';\nimport ControlSmall from '../Control/ControlSmall';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport playIcon from '../../assets/images/ic_play_white_32.png';\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\nimport ControlRowComponent from '.';\nimport mdx from './ControlRow.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: `${CATEGORIES[8]}/ControlRow`,\n 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 Tile from '../Tile';\\nimport ControlSmall from '../Control/ControlSmall';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport playIcon from '../../assets/images/ic_play_white_32.png';\\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\\nimport ControlRowComponent from '.';\\nimport mdx from './ControlRow.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { createModeControl } from '../../docs/utils';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ControlRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n ...TitleRowStory.args,\\n lazyScroll: true,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...TitleRowStory.argTypes,\\n ...createModeControl({ summaryValue: 'focused' })\\n }\\n};\\n\\nconst createItems = (length, src, props = {}) => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n artwork: {\\n src\\n },\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`,\\n ...props\\n }));\\n};\\nconst createControls = (length, icon = lightningIcon, props = {}) => {\\n return Array.from({ length }).map(() => ({\\n type: ControlSmall,\\n icon,\\n fixed: true,\\n h: 64,\\n w: 64,\\n ...props\\n }));\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nexport const LazyLoading = () =>\\n class LazyLoading extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n leftControls: createControls(3),\\n contentItems: createItems(5),\\n rightControls: createControls(3),\\n lazyLoadBuffer: 1,\\n signals: {\\n loadMoreItems: '_loadMore'\\n }\\n }\\n };\\n }\\n\\n _construct() {\\n this._counter = 0;\\n }\\n\\n _loadMore() {\\n if (this._counter < 2) {\\n this._ControlRow.addContentItems(\\n createItems(\\n 3,\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\\n )\\n );\\n this._counter++;\\n }\\n }\\n\\n _getFocused() {\\n return this.tag('ControlRow');\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n };\\n\\nLazyLoading.args = { lazyLoadBuffer: 1 };\\nLazyLoading.argTypes = {\\n lazyLoadBuffer: {\\n control: 'number',\\n description:\\n 'The number of items before the last content item at which a signal, \\\"loadMoreItems\\\", is emitted.',\\n remount: true,\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyLoading.parameters = {\\n storyDetails:\\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\\n};\\n\\nconst createSignal = signalName => ({\\n onEnter: function () {\\n this.signal(signalName);\\n },\\n passSignals: { [signalName]: true }\\n});\\n\\nconst parksUrl =\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\\n\\nexport const AddingAndRemoving = () =>\\n class AddingAndRemoving extends lng.Component {\\n static _template() {\\n return {\\n ControlRow: {\\n type: ControlRowComponent,\\n signals: {\\n addLeftControl: true,\\n removeLeftControl: true,\\n addContentItem: true,\\n removeContentItem: true,\\n addRightControl: true,\\n removeRightControl: true\\n },\\n leftControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addLeftControl')\\n ),\\n contentItems: createItems(\\n 3,\\n undefined,\\n createSignal('addContentItem')\\n ),\\n rightControls: createControls(\\n 1,\\n lightningIcon,\\n createSignal('addRightControl')\\n )\\n }\\n };\\n }\\n\\n addLeftControl() {\\n this._ControlRow.addLeftControlsAt(\\n createControls(1, playIcon, createSignal('removeLeftControl')),\\n 0\\n );\\n }\\n\\n removeLeftControl() {\\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\\n }\\n\\n addContentItem() {\\n this._ControlRow.addContentItemsAt(\\n createItems(1, parksUrl, createSignal('removeContentItem')),\\n this.contentItemIndex + 1\\n );\\n }\\n\\n removeContentItem() {\\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\\n }\\n\\n addRightControl() {\\n this._ControlRow.addRightControls(\\n createControls(1, playIcon, createSignal('removeRightControl'))\\n );\\n }\\n\\n removeRightControl() {\\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\\n }\\n\\n get _ControlRow() {\\n return this.tag('ControlRow');\\n }\\n\\n get contentItemIndex() {\\n return (\\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\\n );\\n }\\n\\n get rightControlIndex() {\\n return (\\n this._ControlRow.selectedIndex -\\n this._ControlRow.leftControls.length -\\n this._ControlRow.contentItems.length\\n );\\n }\\n\\n _getFocused() {\\n return this._ControlRow;\\n }\\n };\\n\\nAddingAndRemoving.parameters = {\\n storyDetails: `\\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\\n - left controls: prepend a new control with a play icon to the left controls\\n - content items: append a tile with a background after the selected index\\n - right controls: append a new control with a play icon to the right controls\\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item.\\n `\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":75},\"endLoc\":{\"col\":3,\"line\":91},\"startBody\":{\"col\":21,\"line\":75},\"endBody\":{\"col\":3,\"line\":91}},\"lazy-loading\":{\"startLoc\":{\"col\":27,\"line\":93},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":27,\"line\":93},\"endBody\":{\"col\":3,\"line\":133}},\"adding-and-removing\":{\"startLoc\":{\"col\":33,\"line\":160},\"endLoc\":{\"col\":3,\"line\":246},\"startBody\":{\"col\":33,\"line\":160},\"endBody\":{\"col\":3,\"line\":246}}}},\n docs: {\n page: mdx\n }\n },\n args: {\n ...TitleRowStory.args,\n lazyScroll: true,\n mode: 'focused'\n },\n argTypes: {\n ...TitleRowStory.argTypes,\n ...createModeControl({ summaryValue: 'focused' })\n }\n};\n\nconst createItems = (length, src, props = {}) => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n artwork: {\n src\n },\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`,\n ...props\n }));\n};\nconst createControls = (length, icon = lightningIcon, props = {}) => {\n return Array.from({ length }).map(() => ({\n type: ControlSmall,\n icon,\n fixed: true,\n h: 64,\n w: 64,\n ...props\n }));\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3)\n }\n };\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n };;\n\nexport const LazyLoading = () =>\n class LazyLoading extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3),\n lazyLoadBuffer: 1,\n signals: {\n loadMoreItems: '_loadMore'\n }\n }\n };\n }\n\n _construct() {\n this._counter = 0;\n }\n\n _loadMore() {\n if (this._counter < 2) {\n this._ControlRow.addContentItems(\n createItems(\n 3,\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n )\n );\n this._counter++;\n }\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n };;\n\nLazyLoading.args = { lazyLoadBuffer: 1 };\nLazyLoading.argTypes = {\n lazyLoadBuffer: {\n control: 'number',\n description:\n 'The number of items before the last content item at which a signal, \"loadMoreItems\", is emitted.',\n remount: true,\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyLoading.parameters = {\n storyDetails:\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\n};\n\nconst createSignal = signalName => ({\n onEnter: function () {\n this.signal(signalName);\n },\n passSignals: { [signalName]: true }\n});\n\nconst parksUrl =\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\n\nexport const AddingAndRemoving = () =>\n class AddingAndRemoving extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n signals: {\n addLeftControl: true,\n removeLeftControl: true,\n addContentItem: true,\n removeContentItem: true,\n addRightControl: true,\n removeRightControl: true\n },\n leftControls: createControls(\n 1,\n lightningIcon,\n createSignal('addLeftControl')\n ),\n contentItems: createItems(\n 3,\n undefined,\n createSignal('addContentItem')\n ),\n rightControls: createControls(\n 1,\n lightningIcon,\n createSignal('addRightControl')\n )\n }\n };\n }\n\n addLeftControl() {\n this._ControlRow.addLeftControlsAt(\n createControls(1, playIcon, createSignal('removeLeftControl')),\n 0\n );\n }\n\n removeLeftControl() {\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\n }\n\n addContentItem() {\n this._ControlRow.addContentItemsAt(\n createItems(1, parksUrl, createSignal('removeContentItem')),\n this.contentItemIndex + 1\n );\n }\n\n removeContentItem() {\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\n }\n\n addRightControl() {\n this._ControlRow.addRightControls(\n createControls(1, playIcon, createSignal('removeRightControl'))\n );\n }\n\n removeRightControl() {\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n\n get contentItemIndex() {\n return (\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\n );\n }\n\n get rightControlIndex() {\n return (\n this._ControlRow.selectedIndex -\n this._ControlRow.leftControls.length -\n this._ControlRow.contentItems.length\n );\n }\n\n _getFocused() {\n return this._ControlRow;\n }\n };\n\nAddingAndRemoving.parameters = {\n storyDetails: `\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item.\n `\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -19084,7 +19014,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 Tile from '../Tile';\nimport ControlSmall from '../Control/ControlSmall';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport playIcon from '../../assets/images/ic_play_white_32.png';\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\nimport ControlRowComponent from '.';\nimport mdx from './ControlRow.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: `${CATEGORIES[64]}/ControlRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n ...TitleRowStory.args,\n lazyScroll: true,\n mode: 'focused'\n },\n argTypes: {\n ...TitleRowStory.argTypes,\n ...createModeControl({ summaryValue: 'focused' })\n }\n};\n\nconst createItems = (length, src, props = {}) => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n artwork: {\n src\n },\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`,\n ...props\n }));\n};\nconst createControls = (length, icon = lightningIcon, props = {}) => {\n return Array.from({ length }).map(() => ({\n type: ControlSmall,\n icon,\n fixed: true,\n h: 64,\n w: 64,\n ...props\n }));\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3)\n }\n };\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n };\n\nexport const LazyLoading = () =>\n class LazyLoading extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3),\n lazyLoadBuffer: 1,\n signals: {\n loadMoreItems: '_loadMore'\n }\n }\n };\n }\n\n _construct() {\n this._counter = 0;\n }\n\n _loadMore() {\n if (this._counter < 2) {\n this._ControlRow.addContentItems(\n createItems(\n 3,\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n )\n );\n this._counter++;\n }\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n };\n\nLazyLoading.args = { lazyLoadBuffer: 1 };\nLazyLoading.argTypes = {\n lazyLoadBuffer: {\n control: 'number',\n description:\n 'The number of items before the last content item at which a signal, \"loadMoreItems\", is emitted.',\n remount: true,\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyLoading.parameters = {\n storyDetails:\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\n};\n\nconst createSignal = signalName => ({\n onEnter: function () {\n this.signal(signalName);\n },\n passSignals: { [signalName]: true }\n});\n\nconst parksUrl =\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\n\nexport const AddingAndRemoving = () =>\n class AddingAndRemoving extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n signals: {\n addLeftControl: true,\n removeLeftControl: true,\n addContentItem: true,\n removeContentItem: true,\n addRightControl: true,\n removeRightControl: true\n },\n leftControls: createControls(\n 1,\n lightningIcon,\n createSignal('addLeftControl')\n ),\n contentItems: createItems(\n 3,\n undefined,\n createSignal('addContentItem')\n ),\n rightControls: createControls(\n 1,\n lightningIcon,\n createSignal('addRightControl')\n )\n }\n };\n }\n\n addLeftControl() {\n this._ControlRow.addLeftControlsAt(\n createControls(1, playIcon, createSignal('removeLeftControl')),\n 0\n );\n }\n\n removeLeftControl() {\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\n }\n\n addContentItem() {\n this._ControlRow.addContentItemsAt(\n createItems(1, parksUrl, createSignal('removeContentItem')),\n this.contentItemIndex + 1\n );\n }\n\n removeContentItem() {\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\n }\n\n addRightControl() {\n this._ControlRow.addRightControls(\n createControls(1, playIcon, createSignal('removeRightControl'))\n );\n }\n\n removeRightControl() {\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n\n get contentItemIndex() {\n return (\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\n );\n }\n\n get rightControlIndex() {\n return (\n this._ControlRow.selectedIndex -\n this._ControlRow.leftControls.length -\n this._ControlRow.contentItems.length\n );\n }\n\n _getFocused() {\n return this._ControlRow;\n }\n };\n\nAddingAndRemoving.parameters = {\n storyDetails: `\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item. \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 Tile from '../Tile';\nimport ControlSmall from '../Control/ControlSmall';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport playIcon from '../../assets/images/ic_play_white_32.png';\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\nimport ControlRowComponent from '.';\nimport mdx from './ControlRow.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: `${CATEGORIES[8]}/ControlRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n ...TitleRowStory.args,\n lazyScroll: true,\n mode: 'focused'\n },\n argTypes: {\n ...TitleRowStory.argTypes,\n ...createModeControl({ summaryValue: 'focused' })\n }\n};\n\nconst createItems = (length, src, props = {}) => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n artwork: {\n src\n },\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`,\n ...props\n }));\n};\nconst createControls = (length, icon = lightningIcon, props = {}) => {\n return Array.from({ length }).map(() => ({\n type: ControlSmall,\n icon,\n fixed: true,\n h: 64,\n w: 64,\n ...props\n }));\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3)\n }\n };\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n };\n\nexport const LazyLoading = () =>\n class LazyLoading extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3),\n lazyLoadBuffer: 1,\n signals: {\n loadMoreItems: '_loadMore'\n }\n }\n };\n }\n\n _construct() {\n this._counter = 0;\n }\n\n _loadMore() {\n if (this._counter < 2) {\n this._ControlRow.addContentItems(\n createItems(\n 3,\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n )\n );\n this._counter++;\n }\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n };\n\nLazyLoading.args = { lazyLoadBuffer: 1 };\nLazyLoading.argTypes = {\n lazyLoadBuffer: {\n control: 'number',\n description:\n 'The number of items before the last content item at which a signal, \"loadMoreItems\", is emitted.',\n remount: true,\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyLoading.parameters = {\n storyDetails:\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\n};\n\nconst createSignal = signalName => ({\n onEnter: function () {\n this.signal(signalName);\n },\n passSignals: { [signalName]: true }\n});\n\nconst parksUrl =\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\n\nexport const AddingAndRemoving = () =>\n class AddingAndRemoving extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n signals: {\n addLeftControl: true,\n removeLeftControl: true,\n addContentItem: true,\n removeContentItem: true,\n addRightControl: true,\n removeRightControl: true\n },\n leftControls: createControls(\n 1,\n lightningIcon,\n createSignal('addLeftControl')\n ),\n contentItems: createItems(\n 3,\n undefined,\n createSignal('addContentItem')\n ),\n rightControls: createControls(\n 1,\n lightningIcon,\n createSignal('addRightControl')\n )\n }\n };\n }\n\n addLeftControl() {\n this._ControlRow.addLeftControlsAt(\n createControls(1, playIcon, createSignal('removeLeftControl')),\n 0\n );\n }\n\n removeLeftControl() {\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\n }\n\n addContentItem() {\n this._ControlRow.addContentItemsAt(\n createItems(1, parksUrl, createSignal('removeContentItem')),\n this.contentItemIndex + 1\n );\n }\n\n removeContentItem() {\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\n }\n\n addRightControl() {\n this._ControlRow.addRightControls(\n createControls(1, playIcon, createSignal('removeRightControl'))\n );\n }\n\n removeRightControl() {\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n\n get contentItemIndex() {\n return (\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\n );\n }\n\n get rightControlIndex() {\n return (\n this._ControlRow.selectedIndex -\n this._ControlRow.leftControls.length -\n this._ControlRow.contentItems.length\n );\n }\n\n _getFocused() {\n return this._ControlRow;\n }\n };\n\nAddingAndRemoving.parameters = {\n storyDetails: `\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item.\n `\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -19172,10 +19102,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var ControlRow_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][64] + "/ControlRow", + title: constants["a" /* CATEGORIES */][8] + "/ControlRow", 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 Tile from '../Tile';\nimport ControlSmall from '../Control/ControlSmall';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport playIcon from '../../assets/images/ic_play_white_32.png';\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\nimport ControlRowComponent from '.';\nimport mdx from './ControlRow.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: `${CATEGORIES[64]}/ControlRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n ...TitleRowStory.args,\n lazyScroll: true,\n mode: 'focused'\n },\n argTypes: {\n ...TitleRowStory.argTypes,\n ...createModeControl({ summaryValue: 'focused' })\n }\n};\n\nconst createItems = (length, src, props = {}) => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n artwork: {\n src\n },\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`,\n ...props\n }));\n};\nconst createControls = (length, icon = lightningIcon, props = {}) => {\n return Array.from({ length }).map(() => ({\n type: ControlSmall,\n icon,\n fixed: true,\n h: 64,\n w: 64,\n ...props\n }));\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3)\n }\n };\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n };\n\nexport const LazyLoading = () =>\n class LazyLoading extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3),\n lazyLoadBuffer: 1,\n signals: {\n loadMoreItems: '_loadMore'\n }\n }\n };\n }\n\n _construct() {\n this._counter = 0;\n }\n\n _loadMore() {\n if (this._counter < 2) {\n this._ControlRow.addContentItems(\n createItems(\n 3,\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n )\n );\n this._counter++;\n }\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n };\n\nLazyLoading.args = { lazyLoadBuffer: 1 };\nLazyLoading.argTypes = {\n lazyLoadBuffer: {\n control: 'number',\n description:\n 'The number of items before the last content item at which a signal, \"loadMoreItems\", is emitted.',\n remount: true,\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyLoading.parameters = {\n storyDetails:\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\n};\n\nconst createSignal = signalName => ({\n onEnter: function () {\n this.signal(signalName);\n },\n passSignals: { [signalName]: true }\n});\n\nconst parksUrl =\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\n\nexport const AddingAndRemoving = () =>\n class AddingAndRemoving extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n signals: {\n addLeftControl: true,\n removeLeftControl: true,\n addContentItem: true,\n removeContentItem: true,\n addRightControl: true,\n removeRightControl: true\n },\n leftControls: createControls(\n 1,\n lightningIcon,\n createSignal('addLeftControl')\n ),\n contentItems: createItems(\n 3,\n undefined,\n createSignal('addContentItem')\n ),\n rightControls: createControls(\n 1,\n lightningIcon,\n createSignal('addRightControl')\n )\n }\n };\n }\n\n addLeftControl() {\n this._ControlRow.addLeftControlsAt(\n createControls(1, playIcon, createSignal('removeLeftControl')),\n 0\n );\n }\n\n removeLeftControl() {\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\n }\n\n addContentItem() {\n this._ControlRow.addContentItemsAt(\n createItems(1, parksUrl, createSignal('removeContentItem')),\n this.contentItemIndex + 1\n );\n }\n\n removeContentItem() {\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\n }\n\n addRightControl() {\n this._ControlRow.addRightControls(\n createControls(1, playIcon, createSignal('removeRightControl'))\n );\n }\n\n removeRightControl() {\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n\n get contentItemIndex() {\n return (\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\n );\n }\n\n get rightControlIndex() {\n return (\n this._ControlRow.selectedIndex -\n this._ControlRow.leftControls.length -\n this._ControlRow.contentItems.length\n );\n }\n\n _getFocused() {\n return this._ControlRow;\n }\n };\n\nAddingAndRemoving.parameters = {\n storyDetails: `\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item. \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 Tile from '../Tile';\nimport ControlSmall from '../Control/ControlSmall';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport playIcon from '../../assets/images/ic_play_white_32.png';\nimport { default as TitleRowStory } from '../TitleRow/TitleRow.stories';\nimport ControlRowComponent from '.';\nimport mdx from './ControlRow.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport { createModeControl } from '../../docs/utils';\n\nexport default {\n title: `${CATEGORIES[8]}/ControlRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n ...TitleRowStory.args,\n lazyScroll: true,\n mode: 'focused'\n },\n argTypes: {\n ...TitleRowStory.argTypes,\n ...createModeControl({ summaryValue: 'focused' })\n }\n};\n\nconst createItems = (length, src, props = {}) => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n artwork: {\n src\n },\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`,\n ...props\n }));\n};\nconst createControls = (length, icon = lightningIcon, props = {}) => {\n return Array.from({ length }).map(() => ({\n type: ControlSmall,\n icon,\n fixed: true,\n h: 64,\n w: 64,\n ...props\n }));\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3)\n }\n };\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n };\n\nexport const LazyLoading = () =>\n class LazyLoading extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n leftControls: createControls(3),\n contentItems: createItems(5),\n rightControls: createControls(3),\n lazyLoadBuffer: 1,\n signals: {\n loadMoreItems: '_loadMore'\n }\n }\n };\n }\n\n _construct() {\n this._counter = 0;\n }\n\n _loadMore() {\n if (this._counter < 2) {\n this._ControlRow.addContentItems(\n createItems(\n 3,\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg'\n )\n );\n this._counter++;\n }\n }\n\n _getFocused() {\n return this.tag('ControlRow');\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n };\n\nLazyLoading.args = { lazyLoadBuffer: 1 };\nLazyLoading.argTypes = {\n lazyLoadBuffer: {\n control: 'number',\n description:\n 'The number of items before the last content item at which a signal, \"loadMoreItems\", is emitted.',\n remount: true,\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyLoading.parameters = {\n storyDetails:\n 'The loadMoreItems signal is emitted each time a contentItem is selected at and after the index defined by the lazyLoadBuffer property. This story adds a method that is invoked when that signal is emitted and adds 3 additional contentItems to the ControlRow via ControlRow.addContentItems. That method will append items in response to the signal two times, then will do nothing in response to further invocations from the signal.'\n};\n\nconst createSignal = signalName => ({\n onEnter: function () {\n this.signal(signalName);\n },\n passSignals: { [signalName]: true }\n});\n\nconst parksUrl =\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg';\n\nexport const AddingAndRemoving = () =>\n class AddingAndRemoving extends lng.Component {\n static _template() {\n return {\n ControlRow: {\n type: ControlRowComponent,\n signals: {\n addLeftControl: true,\n removeLeftControl: true,\n addContentItem: true,\n removeContentItem: true,\n addRightControl: true,\n removeRightControl: true\n },\n leftControls: createControls(\n 1,\n lightningIcon,\n createSignal('addLeftControl')\n ),\n contentItems: createItems(\n 3,\n undefined,\n createSignal('addContentItem')\n ),\n rightControls: createControls(\n 1,\n lightningIcon,\n createSignal('addRightControl')\n )\n }\n };\n }\n\n addLeftControl() {\n this._ControlRow.addLeftControlsAt(\n createControls(1, playIcon, createSignal('removeLeftControl')),\n 0\n );\n }\n\n removeLeftControl() {\n this._ControlRow.removeLeftControlAt(this._ControlRow.selectedIndex);\n }\n\n addContentItem() {\n this._ControlRow.addContentItemsAt(\n createItems(1, parksUrl, createSignal('removeContentItem')),\n this.contentItemIndex + 1\n );\n }\n\n removeContentItem() {\n this._ControlRow.removeContentItemAt(this.contentItemIndex);\n }\n\n addRightControl() {\n this._ControlRow.addRightControls(\n createControls(1, playIcon, createSignal('removeRightControl'))\n );\n }\n\n removeRightControl() {\n this._ControlRow.removeRightControlAt(this.rightControlIndex);\n }\n\n get _ControlRow() {\n return this.tag('ControlRow');\n }\n\n get contentItemIndex() {\n return (\n this._ControlRow.selectedIndex - this._ControlRow.leftControls.length\n );\n }\n\n get rightControlIndex() {\n return (\n this._ControlRow.selectedIndex -\n this._ControlRow.leftControls.length -\n this._ControlRow.contentItems.length\n );\n }\n\n _getFocused() {\n return this._ControlRow;\n }\n };\n\nAddingAndRemoving.parameters = {\n storyDetails: `\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item.\n `\n};\n", "locationsMap": { "basic": { "startLoc": { @@ -19475,7 +19405,7 @@ var ControlRow_stories_AddingAndRemoving = function AddingAndRemoving() { }(core["a" /* default */].Component); }; ControlRow_stories_AddingAndRemoving.parameters = { - storyDetails: "\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item. \n " + storyDetails: "\n Press the Enter key while focused on any controls or items in the ControlRow for the following effects:\n - left controls: prepend a new control with a play icon to the left controls\n - content items: append a tile with a background after the selected index\n - right controls: append a new control with a play icon to the right controls\n Press the Enter key while focused on any of the added controls or content items to remove that control or content item.\n " }; ControlRow_stories_Basic.parameters = Object.assign({ storySource: { @@ -20317,7 +20247,7 @@ function MDXContent(_ref) { }, "import { FocusManager } from '@lightningjs/ui-components';\n\nclass RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: FocusManager,\n direction: 'row',\n items: [\n // components to be managed\n ]\n }\n };\n }\n\n _getFocused() {\n return this.tag('Row');\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "navigation-focusmanager--column-with-rows", + id: "components-focusmanager--column-with-rows", mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "Set the ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" @@ -20549,7 +20479,7 @@ function MDXContent(_ref) { "id": "gettransitionytargetvalue-string" }, "getTransitionYTargetValue(): string"), Object(esm["b" /* mdx */])("p", null, "Returns the transition value for the y coordinate of the FocusManager's items."), Object(esm["b" /* mdx */])("h4", { "id": "_render-void" - }, "_render(): void"), Object(esm["b" /* mdx */])("p", null, "A no-op function that is called when ", Object(esm["b" /* mdx */])("inlineCode", { + }, "_", "render(): void"), Object(esm["b" /* mdx */])("p", null, "A no-op function that is called when ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "selectedIndex"), " is set. Can be overridden by classes that extend ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" @@ -20601,7 +20531,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 FocusManager from '.';\\nimport mdx from './FocusManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/FocusManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ColumnWithRows = () =>\\n class ColumnWithRowsExample extends lng.Component {\\n static _template() {\\n return {\\n Column: Column({\\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\\n })\\n };\\n }\\n };\\n\\nfunction Row({ y = 0 } = {}) {\\n return {\\n type: FocusManager,\\n direction: 'row',\\n y,\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ]\\n };\\n}\\n\\nfunction Column({ items }) {\\n return {\\n type: FocusManager,\\n direction: 'column',\\n items\\n };\\n}\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nColumnWithRows.args = {\\n direction: 'row',\\n wrapSelected: false\\n};\\n\\nColumnWithRows.argTypes = {\\n direction: {\\n control: 'radio',\\n options: ['row', 'column'],\\n description: 'The navigation direction for focus (left/right or up/down)',\\n table: {\\n defaultValue: { summary: 'row' }\\n }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ColumnWithRows\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport FocusManager from '.';\nimport mdx from './FocusManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[64]}/FocusManager`,\n 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 FocusManager from '.';\\nimport mdx from './FocusManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/FocusManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ColumnWithRows = () =>\\n class ColumnWithRowsExample extends lng.Component {\\n static _template() {\\n return {\\n Column: Column({\\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\\n })\\n };\\n }\\n };\\n\\nfunction Row({ y = 0 } = {}) {\\n return {\\n type: FocusManager,\\n direction: 'row',\\n y,\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ]\\n };\\n}\\n\\nfunction Column({ items }) {\\n return {\\n type: FocusManager,\\n direction: 'column',\\n items\\n };\\n}\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nColumnWithRows.args = {\\n direction: 'row',\\n wrapSelected: false\\n};\\n\\nColumnWithRows.argTypes = {\\n direction: {\\n control: 'radio',\\n options: ['row', 'column'],\\n description: 'The navigation direction for focus (left/right or up/down)',\\n table: {\\n defaultValue: { summary: 'row' }\\n }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"column-with-rows\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ColumnWithRows = () =>\n class ColumnWithRowsExample extends lng.Component {\n static _template() {\n return {\n Column: Column({\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\n })\n };\n }\n };\n\nfunction Row({ y = 0 } = {}) {\n return {\n type: FocusManager,\n direction: 'row',\n y,\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ]\n };\n}\n\nfunction Column({ items }) {\n return {\n type: FocusManager,\n direction: 'column',\n items\n };\n}\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nColumnWithRows.args = {\n direction: 'row',\n wrapSelected: false\n};\n\nColumnWithRows.argTypes = {\n direction: {\n control: 'radio',\n options: ['row', 'column'],\n description: 'The navigation direction for focus (left/right or up/down)',\n table: {\n defaultValue: { summary: 'row' }\n }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 FocusManager from '.';\\nimport mdx from './FocusManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/FocusManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ColumnWithRows = () =>\\n class ColumnWithRowsExample extends lng.Component {\\n static _template() {\\n return {\\n Column: Column({\\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\\n })\\n };\\n }\\n };\\n\\nfunction Row({ y = 0 } = {}) {\\n return {\\n type: FocusManager,\\n direction: 'row',\\n y,\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ]\\n };\\n}\\n\\nfunction Column({ items }) {\\n return {\\n type: FocusManager,\\n direction: 'column',\\n items\\n };\\n}\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nColumnWithRows.args = {\\n direction: 'row',\\n wrapSelected: false\\n};\\n\\nColumnWithRows.argTypes = {\\n direction: {\\n control: 'radio',\\n options: ['row', 'column'],\\n description: 'The navigation direction for focus (left/right or up/down)',\\n table: {\\n defaultValue: { summary: 'row' }\\n }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ColumnWithRows\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport FocusManager from '.';\nimport mdx from './FocusManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[8]}/FocusManager`,\n 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 FocusManager from '.';\\nimport mdx from './FocusManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/FocusManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ColumnWithRows = () =>\\n class ColumnWithRowsExample extends lng.Component {\\n static _template() {\\n return {\\n Column: Column({\\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\\n })\\n };\\n }\\n };\\n\\nfunction Row({ y = 0 } = {}) {\\n return {\\n type: FocusManager,\\n direction: 'row',\\n y,\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ]\\n };\\n}\\n\\nfunction Column({ items }) {\\n return {\\n type: FocusManager,\\n direction: 'column',\\n items\\n };\\n}\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nColumnWithRows.args = {\\n direction: 'row',\\n wrapSelected: false\\n};\\n\\nColumnWithRows.argTypes = {\\n direction: {\\n control: 'radio',\\n options: ['row', 'column'],\\n description: 'The navigation direction for focus (left/right or up/down)',\\n table: {\\n defaultValue: { summary: 'row' }\\n }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"column-with-rows\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ColumnWithRows = () =>\n class ColumnWithRowsExample extends lng.Component {\n static _template() {\n return {\n Column: Column({\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\n })\n };\n }\n };\n\nfunction Row({ y = 0 } = {}) {\n return {\n type: FocusManager,\n direction: 'row',\n y,\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ]\n };\n}\n\nfunction Column({ items }) {\n return {\n type: FocusManager,\n direction: 'column',\n items\n };\n}\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nColumnWithRows.args = {\n direction: 'row',\n wrapSelected: false\n};\n\nColumnWithRows.argTypes = {\n direction: {\n control: 'radio',\n options: ['row', 'column'],\n description: 'The navigation direction for focus (left/right or up/down)',\n table: {\n defaultValue: { summary: 'row' }\n }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ColumnWithRows": { @@ -20627,7 +20557,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 FocusManager from '.';\nimport mdx from './FocusManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[64]}/FocusManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ColumnWithRows = () =>\n class ColumnWithRowsExample extends lng.Component {\n static _template() {\n return {\n Column: Column({\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\n })\n };\n }\n };\n\nfunction Row({ y = 0 } = {}) {\n return {\n type: FocusManager,\n direction: 'row',\n y,\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ]\n };\n}\n\nfunction Column({ items }) {\n return {\n type: FocusManager,\n direction: 'column',\n items\n };\n}\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nColumnWithRows.args = {\n direction: 'row',\n wrapSelected: false\n};\n\nColumnWithRows.argTypes = {\n direction: {\n control: 'radio',\n options: ['row', 'column'],\n description: 'The navigation direction for focus (left/right or up/down)',\n table: {\n defaultValue: { summary: 'row' }\n }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\n table: {\n defaultValue: { summary: false }\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 FocusManager from '.';\nimport mdx from './FocusManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[8]}/FocusManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ColumnWithRows = () =>\n class ColumnWithRowsExample extends lng.Component {\n static _template() {\n return {\n Column: Column({\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\n })\n };\n }\n };\n\nfunction Row({ y = 0 } = {}) {\n return {\n type: FocusManager,\n direction: 'row',\n y,\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ]\n };\n}\n\nfunction Column({ items }) {\n return {\n type: FocusManager,\n direction: 'column',\n items\n };\n}\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nColumnWithRows.args = {\n direction: 'row',\n wrapSelected: false\n};\n\nColumnWithRows.argTypes = {\n direction: {\n control: 'radio',\n options: ['row', 'column'],\n description: 'The navigation direction for focus (left/right or up/down)',\n table: {\n defaultValue: { summary: 'row' }\n }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ColumnWithRows": { @@ -20674,10 +20604,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var FocusManager_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][64] + "/FocusManager", + title: constants["a" /* CATEGORIES */][8] + "/FocusManager", 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 FocusManager from '.';\nimport mdx from './FocusManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[64]}/FocusManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ColumnWithRows = () =>\n class ColumnWithRowsExample extends lng.Component {\n static _template() {\n return {\n Column: Column({\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\n })\n };\n }\n };\n\nfunction Row({ y = 0 } = {}) {\n return {\n type: FocusManager,\n direction: 'row',\n y,\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ]\n };\n}\n\nfunction Column({ items }) {\n return {\n type: FocusManager,\n direction: 'column',\n items\n };\n}\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nColumnWithRows.args = {\n direction: 'row',\n wrapSelected: false\n};\n\nColumnWithRows.argTypes = {\n direction: {\n control: 'radio',\n options: ['row', 'column'],\n description: 'The navigation direction for focus (left/right or up/down)',\n table: {\n defaultValue: { summary: 'row' }\n }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\n table: {\n defaultValue: { summary: false }\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 FocusManager from '.';\nimport mdx from './FocusManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[8]}/FocusManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ColumnWithRows = () =>\n class ColumnWithRowsExample extends lng.Component {\n static _template() {\n return {\n Column: Column({\n items: [Row(), Row({ y: 150 }), Row({ y: 300 })]\n })\n };\n }\n };\n\nfunction Row({ y = 0 } = {}) {\n return {\n type: FocusManager,\n direction: 'row',\n y,\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ]\n };\n}\n\nfunction Column({ items }) {\n return {\n type: FocusManager,\n direction: 'column',\n items\n };\n}\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nColumnWithRows.args = {\n direction: 'row',\n wrapSelected: false\n};\n\nColumnWithRows.argTypes = {\n direction: {\n control: 'radio',\n options: ['row', 'column'],\n description: 'The navigation direction for focus (left/right or up/down)',\n table: {\n defaultValue: { summary: 'row' }\n }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'When set to true, the focus will loop back to the beginning of the list after reaching the last item, and vice versa. This enables continuous navigation through the list without dead ends. If wrapSelected is set to false (the default value), the focus will stop at the first or last item, depending on the navigation direction',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", "locationsMap": { "column-with-rows": { "startLoc": { @@ -21101,7 +21031,7 @@ function MDXContent(_ref) { }, "import { Gradient } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Gradient: {\n type: Gradient,\n w: 320,\n h: 180\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "foundations-gradient--gradient", + id: "components-gradient--gradient", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -21133,7 +21063,7 @@ function MDXContent(_ref) { }, "number"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "default starting color for the gradient")), Object(esm["b" /* mdx */])("tr", { + }, "default color the gradient fades to")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", @@ -21144,7 +21074,7 @@ function MDXContent(_ref) { }, "number"), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null - }, "default color the gradient fades to")), Object(esm["b" /* mdx */])("tr", { + }, "default starting color for the gradient")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { parentName: "tr", @@ -21191,7 +21121,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as GradientComponent } from '.';\\nimport mdx from './Gradient.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Gradient`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Gradient = () =>\\n class Gradient extends lng.Component {\\n static _template() {\\n return {\\n Gradient: {\\n type: GradientComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nGradient.args = {};\\nGradient.argTypes = {};\\nGradient.parameters = {\\n argActions: {}\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Gradient\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as GradientComponent } from '.';\nimport mdx from './Gradient.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Gradient`,\n 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 { default as GradientComponent } from '.';\\nimport mdx from './Gradient.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Gradient`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Gradient = () =>\\n class Gradient extends lng.Component {\\n static _template() {\\n return {\\n Gradient: {\\n type: GradientComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nGradient.args = {};\\nGradient.argTypes = {};\\nGradient.parameters = {\\n argActions: {}\\n};\\n\",\"locationsMap\":{\"gradient\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Gradient = () =>\n class Gradient extends lng.Component {\n static _template() {\n return {\n Gradient: {\n type: GradientComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nGradient.args = {};\nGradient.argTypes = {};\nGradient.parameters = {\n argActions: {}\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as GradientComponent } from '.';\\nimport mdx from './Gradient.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Gradient`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Gradient = () =>\\n class Gradient extends lng.Component {\\n static _template() {\\n return {\\n Gradient: {\\n type: GradientComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nGradient.args = {};\\nGradient.argTypes = {};\\nGradient.parameters = {\\n argActions: {}\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Gradient\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as GradientComponent } from '.';\nimport mdx from './Gradient.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Gradient`,\n 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 { default as GradientComponent } from '.';\\nimport mdx from './Gradient.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Gradient`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Gradient = () =>\\n class Gradient extends lng.Component {\\n static _template() {\\n return {\\n Gradient: {\\n type: GradientComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nGradient.args = {};\\nGradient.argTypes = {};\\nGradient.parameters = {\\n argActions: {}\\n};\\n\",\"locationsMap\":{\"gradient\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Gradient = () =>\n class Gradient extends lng.Component {\n static _template() {\n return {\n Gradient: {\n type: GradientComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nGradient.args = {};\nGradient.argTypes = {};\nGradient.parameters = {\n argActions: {}\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Gradient": { @@ -21217,7 +21147,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as GradientComponent } from '.';\nimport mdx from './Gradient.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Gradient`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Gradient = () =>\n class Gradient extends lng.Component {\n static _template() {\n return {\n Gradient: {\n type: GradientComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nGradient.args = {};\nGradient.argTypes = {};\nGradient.parameters = {\n argActions: {}\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 { default as GradientComponent } from '.';\nimport mdx from './Gradient.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Gradient`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Gradient = () =>\n class Gradient extends lng.Component {\n static _template() {\n return {\n Gradient: {\n type: GradientComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nGradient.args = {};\nGradient.argTypes = {};\nGradient.parameters = {\n argActions: {}\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Gradient": { @@ -21263,10 +21193,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Gradient_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][4] + "/Gradient", + title: constants["a" /* CATEGORIES */][8] + "/Gradient", 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 { default as GradientComponent } from '.';\nimport mdx from './Gradient.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Gradient`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Gradient = () =>\n class Gradient extends lng.Component {\n static _template() {\n return {\n Gradient: {\n type: GradientComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nGradient.args = {};\nGradient.argTypes = {};\nGradient.parameters = {\n argActions: {}\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 { default as GradientComponent } from '.';\nimport mdx from './Gradient.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Gradient`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Gradient = () =>\n class Gradient extends lng.Component {\n static _template() {\n return {\n Gradient: {\n type: GradientComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nGradient.args = {};\nGradient.argTypes = {};\nGradient.parameters = {\n argActions: {}\n};\n", "locationsMap": { "gradient": { "startLoc": { @@ -22085,7 +22015,7 @@ function MDXContent(_ref) { }, "import { GridOverlay } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n GridOverlay: {\n type: GridOverlay\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "foundations-gridoverlay--grid-overlay", + id: "components-gridoverlay--grid-overlay", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -22272,7 +22202,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { context } from '../../globals';\\nimport { default as GridOverlayComponent } from '.';\\nimport mdx from './GridOverlay.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/GridOverlay`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const GridOverlay = args =>\\n class GridOverlay extends lng.Component {\\n static _template() {\\n return {\\n GridOverlay: {\\n type: GridOverlayComponent,\\n x: context.theme.layout.marginX * -1,\\n y: context.theme.layout.marginY * -1,\\n showColumns: args.showColumns,\\n showMargins: args.showMargins,\\n showSafe: args.showSafe,\\n showGutters: args.showGutters,\\n showText: args.showText,\\n alpha: args.alpha\\n }\\n };\\n }\\n };\\nGridOverlay.storyName = 'GridOverlay';\\nGridOverlay.args = {\\n alpha: 1,\\n showColumns: true,\\n showMargins: true,\\n showSafe: true,\\n showGutters: true,\\n showText: true\\n};\\nGridOverlay.argTypes = {\\n alpha: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description:\\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n showColumns: {\\n control: 'boolean',\\n description: 'When true, displays the column span rectangles',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showMargins: {\\n control: 'boolean',\\n description: 'When true, displays the X and Y margin rulers',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showSafe: {\\n control: 'boolean',\\n description:\\n 'When true, displays the X and Y \\\"safe\\\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showGutters: {\\n control: 'boolean',\\n description: 'When true, displays the rulers for spacing between columns',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showText: {\\n control: 'boolean',\\n description:\\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\nGridOverlay.parameters = {\\n argActions: {}\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"GridOverlay\":{\"startLoc\":{\"col\":27,\"line\":34},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":27,\"line\":34},\"endBody\":{\"col\":3,\"line\":51}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { context } from '../../globals';\nimport { default as GridOverlayComponent } from '.';\nimport mdx from './GridOverlay.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/GridOverlay`,\n 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 { context } from '../../globals';\\nimport { default as GridOverlayComponent } from '.';\\nimport mdx from './GridOverlay.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/GridOverlay`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const GridOverlay = args =>\\n class GridOverlay extends lng.Component {\\n static _template() {\\n return {\\n GridOverlay: {\\n type: GridOverlayComponent,\\n x: context.theme.layout.marginX * -1,\\n y: context.theme.layout.marginY * -1,\\n showColumns: args.showColumns,\\n showMargins: args.showMargins,\\n showSafe: args.showSafe,\\n showGutters: args.showGutters,\\n showText: args.showText,\\n alpha: args.alpha\\n }\\n };\\n }\\n };\\nGridOverlay.storyName = 'GridOverlay';\\nGridOverlay.args = {\\n alpha: 1,\\n showColumns: true,\\n showMargins: true,\\n showSafe: true,\\n showGutters: true,\\n showText: true\\n};\\nGridOverlay.argTypes = {\\n alpha: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description:\\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n showColumns: {\\n control: 'boolean',\\n description: 'When true, displays the column span rectangles',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showMargins: {\\n control: 'boolean',\\n description: 'When true, displays the X and Y margin rulers',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showSafe: {\\n control: 'boolean',\\n description:\\n 'When true, displays the X and Y \\\"safe\\\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showGutters: {\\n control: 'boolean',\\n description: 'When true, displays the rulers for spacing between columns',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showText: {\\n control: 'boolean',\\n description:\\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\nGridOverlay.parameters = {\\n argActions: {}\\n};\\n\",\"locationsMap\":{\"grid-overlay\":{\"startLoc\":{\"col\":27,\"line\":34},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":27,\"line\":34},\"endBody\":{\"col\":3,\"line\":51}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const GridOverlay = args =>\n class GridOverlay extends lng.Component {\n static _template() {\n return {\n GridOverlay: {\n type: GridOverlayComponent,\n x: context.theme.layout.marginX * -1,\n y: context.theme.layout.marginY * -1,\n showColumns: args.showColumns,\n showMargins: args.showMargins,\n showSafe: args.showSafe,\n showGutters: args.showGutters,\n showText: args.showText,\n alpha: args.alpha\n }\n };\n }\n };\nGridOverlay.storyName = 'GridOverlay';\nGridOverlay.args = {\n alpha: 1,\n showColumns: true,\n showMargins: true,\n showSafe: true,\n showGutters: true,\n showText: true\n};\nGridOverlay.argTypes = {\n alpha: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description:\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\n table: { defaultValue: { summary: 'undefined' } }\n },\n showColumns: {\n control: 'boolean',\n description: 'When true, displays the column span rectangles',\n table: {\n defaultValue: { summary: true }\n }\n },\n showMargins: {\n control: 'boolean',\n description: 'When true, displays the X and Y margin rulers',\n table: {\n defaultValue: { summary: true }\n }\n },\n showSafe: {\n control: 'boolean',\n description:\n 'When true, displays the X and Y \"safe\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\n table: {\n defaultValue: { summary: true }\n }\n },\n showGutters: {\n control: 'boolean',\n description: 'When true, displays the rulers for spacing between columns',\n table: {\n defaultValue: { summary: true }\n }\n },\n showText: {\n control: 'boolean',\n description:\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\nGridOverlay.parameters = {\n argActions: {}\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { context } from '../../globals';\\nimport { default as GridOverlayComponent } from '.';\\nimport mdx from './GridOverlay.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/GridOverlay`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const GridOverlay = args =>\\n class GridOverlay extends lng.Component {\\n static _template() {\\n return {\\n GridOverlay: {\\n type: GridOverlayComponent,\\n x: context.theme.layout.marginX * -1,\\n y: context.theme.layout.marginY * -1,\\n showColumns: args.showColumns,\\n showMargins: args.showMargins,\\n showSafe: args.showSafe,\\n showGutters: args.showGutters,\\n showText: args.showText,\\n alpha: args.alpha\\n }\\n };\\n }\\n };\\nGridOverlay.storyName = 'GridOverlay';\\nGridOverlay.args = {\\n alpha: 1,\\n showColumns: true,\\n showMargins: true,\\n showSafe: true,\\n showGutters: true,\\n showText: true\\n};\\nGridOverlay.argTypes = {\\n alpha: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description:\\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n showColumns: {\\n control: 'boolean',\\n description: 'When true, displays the column span rectangles',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showMargins: {\\n control: 'boolean',\\n description: 'When true, displays the X and Y margin rulers',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showSafe: {\\n control: 'boolean',\\n description:\\n 'When true, displays the X and Y \\\"safe\\\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showGutters: {\\n control: 'boolean',\\n description: 'When true, displays the rulers for spacing between columns',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showText: {\\n control: 'boolean',\\n description:\\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\nGridOverlay.parameters = {\\n argActions: {}\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"GridOverlay\":{\"startLoc\":{\"col\":27,\"line\":34},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":27,\"line\":34},\"endBody\":{\"col\":3,\"line\":51}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { context } from '../../globals';\nimport { default as GridOverlayComponent } from '.';\nimport mdx from './GridOverlay.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/GridOverlay`,\n 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 { context } from '../../globals';\\nimport { default as GridOverlayComponent } from '.';\\nimport mdx from './GridOverlay.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/GridOverlay`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const GridOverlay = args =>\\n class GridOverlay extends lng.Component {\\n static _template() {\\n return {\\n GridOverlay: {\\n type: GridOverlayComponent,\\n x: context.theme.layout.marginX * -1,\\n y: context.theme.layout.marginY * -1,\\n showColumns: args.showColumns,\\n showMargins: args.showMargins,\\n showSafe: args.showSafe,\\n showGutters: args.showGutters,\\n showText: args.showText,\\n alpha: args.alpha\\n }\\n };\\n }\\n };\\nGridOverlay.storyName = 'GridOverlay';\\nGridOverlay.args = {\\n alpha: 1,\\n showColumns: true,\\n showMargins: true,\\n showSafe: true,\\n showGutters: true,\\n showText: true\\n};\\nGridOverlay.argTypes = {\\n alpha: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description:\\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n showColumns: {\\n control: 'boolean',\\n description: 'When true, displays the column span rectangles',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showMargins: {\\n control: 'boolean',\\n description: 'When true, displays the X and Y margin rulers',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showSafe: {\\n control: 'boolean',\\n description:\\n 'When true, displays the X and Y \\\"safe\\\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showGutters: {\\n control: 'boolean',\\n description: 'When true, displays the rulers for spacing between columns',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n showText: {\\n control: 'boolean',\\n description:\\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\nGridOverlay.parameters = {\\n argActions: {}\\n};\\n\",\"locationsMap\":{\"grid-overlay\":{\"startLoc\":{\"col\":27,\"line\":34},\"endLoc\":{\"col\":3,\"line\":51},\"startBody\":{\"col\":27,\"line\":34},\"endBody\":{\"col\":3,\"line\":51}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const GridOverlay = args =>\n class GridOverlay extends lng.Component {\n static _template() {\n return {\n GridOverlay: {\n type: GridOverlayComponent,\n x: context.theme.layout.marginX * -1,\n y: context.theme.layout.marginY * -1,\n showColumns: args.showColumns,\n showMargins: args.showMargins,\n showSafe: args.showSafe,\n showGutters: args.showGutters,\n showText: args.showText,\n alpha: args.alpha\n }\n };\n }\n };\nGridOverlay.storyName = 'GridOverlay';\nGridOverlay.args = {\n alpha: 1,\n showColumns: true,\n showMargins: true,\n showSafe: true,\n showGutters: true,\n showText: true\n};\nGridOverlay.argTypes = {\n alpha: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description:\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\n table: { defaultValue: { summary: 'undefined' } }\n },\n showColumns: {\n control: 'boolean',\n description: 'When true, displays the column span rectangles',\n table: {\n defaultValue: { summary: true }\n }\n },\n showMargins: {\n control: 'boolean',\n description: 'When true, displays the X and Y margin rulers',\n table: {\n defaultValue: { summary: true }\n }\n },\n showSafe: {\n control: 'boolean',\n description:\n 'When true, displays the X and Y \"safe\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\n table: {\n defaultValue: { summary: true }\n }\n },\n showGutters: {\n control: 'boolean',\n description: 'When true, displays the rulers for spacing between columns',\n table: {\n defaultValue: { summary: true }\n }\n },\n showText: {\n control: 'boolean',\n description:\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\nGridOverlay.parameters = {\n argActions: {}\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "GridOverlay": { @@ -22298,7 +22228,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { context } from '../../globals';\nimport { default as GridOverlayComponent } from '.';\nimport mdx from './GridOverlay.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/GridOverlay`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const GridOverlay = args =>\n class GridOverlay extends lng.Component {\n static _template() {\n return {\n GridOverlay: {\n type: GridOverlayComponent,\n x: context.theme.layout.marginX * -1,\n y: context.theme.layout.marginY * -1,\n showColumns: args.showColumns,\n showMargins: args.showMargins,\n showSafe: args.showSafe,\n showGutters: args.showGutters,\n showText: args.showText,\n alpha: args.alpha\n }\n };\n }\n };\nGridOverlay.storyName = 'GridOverlay';\nGridOverlay.args = {\n alpha: 1,\n showColumns: true,\n showMargins: true,\n showSafe: true,\n showGutters: true,\n showText: true\n};\nGridOverlay.argTypes = {\n alpha: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description:\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\n table: { defaultValue: { summary: 'undefined' } }\n },\n showColumns: {\n control: 'boolean',\n description: 'When true, displays the column span rectangles',\n table: {\n defaultValue: { summary: true }\n }\n },\n showMargins: {\n control: 'boolean',\n description: 'When true, displays the X and Y margin rulers',\n table: {\n defaultValue: { summary: true }\n }\n },\n showSafe: {\n control: 'boolean',\n description:\n 'When true, displays the X and Y \"safe\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\n table: {\n defaultValue: { summary: true }\n }\n },\n showGutters: {\n control: 'boolean',\n description: 'When true, displays the rulers for spacing between columns',\n table: {\n defaultValue: { summary: true }\n }\n },\n showText: {\n control: 'boolean',\n description:\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\nGridOverlay.parameters = {\n argActions: {}\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 { context } from '../../globals';\nimport { default as GridOverlayComponent } from '.';\nimport mdx from './GridOverlay.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/GridOverlay`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const GridOverlay = args =>\n class GridOverlay extends lng.Component {\n static _template() {\n return {\n GridOverlay: {\n type: GridOverlayComponent,\n x: context.theme.layout.marginX * -1,\n y: context.theme.layout.marginY * -1,\n showColumns: args.showColumns,\n showMargins: args.showMargins,\n showSafe: args.showSafe,\n showGutters: args.showGutters,\n showText: args.showText,\n alpha: args.alpha\n }\n };\n }\n };\nGridOverlay.storyName = 'GridOverlay';\nGridOverlay.args = {\n alpha: 1,\n showColumns: true,\n showMargins: true,\n showSafe: true,\n showGutters: true,\n showText: true\n};\nGridOverlay.argTypes = {\n alpha: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description:\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\n table: { defaultValue: { summary: 'undefined' } }\n },\n showColumns: {\n control: 'boolean',\n description: 'When true, displays the column span rectangles',\n table: {\n defaultValue: { summary: true }\n }\n },\n showMargins: {\n control: 'boolean',\n description: 'When true, displays the X and Y margin rulers',\n table: {\n defaultValue: { summary: true }\n }\n },\n showSafe: {\n control: 'boolean',\n description:\n 'When true, displays the X and Y \"safe\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\n table: {\n defaultValue: { summary: true }\n }\n },\n showGutters: {\n control: 'boolean',\n description: 'When true, displays the rulers for spacing between columns',\n table: {\n defaultValue: { summary: true }\n }\n },\n showText: {\n control: 'boolean',\n description:\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\nGridOverlay.parameters = {\n argActions: {}\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "GridOverlay": { @@ -22345,10 +22275,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var GridOverlay_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][4] + "/GridOverlay", + title: constants["a" /* CATEGORIES */][8] + "/GridOverlay", 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 { context } from '../../globals';\nimport { default as GridOverlayComponent } from '.';\nimport mdx from './GridOverlay.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/GridOverlay`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const GridOverlay = args =>\n class GridOverlay extends lng.Component {\n static _template() {\n return {\n GridOverlay: {\n type: GridOverlayComponent,\n x: context.theme.layout.marginX * -1,\n y: context.theme.layout.marginY * -1,\n showColumns: args.showColumns,\n showMargins: args.showMargins,\n showSafe: args.showSafe,\n showGutters: args.showGutters,\n showText: args.showText,\n alpha: args.alpha\n }\n };\n }\n };\nGridOverlay.storyName = 'GridOverlay';\nGridOverlay.args = {\n alpha: 1,\n showColumns: true,\n showMargins: true,\n showSafe: true,\n showGutters: true,\n showText: true\n};\nGridOverlay.argTypes = {\n alpha: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description:\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\n table: { defaultValue: { summary: 'undefined' } }\n },\n showColumns: {\n control: 'boolean',\n description: 'When true, displays the column span rectangles',\n table: {\n defaultValue: { summary: true }\n }\n },\n showMargins: {\n control: 'boolean',\n description: 'When true, displays the X and Y margin rulers',\n table: {\n defaultValue: { summary: true }\n }\n },\n showSafe: {\n control: 'boolean',\n description:\n 'When true, displays the X and Y \"safe\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\n table: {\n defaultValue: { summary: true }\n }\n },\n showGutters: {\n control: 'boolean',\n description: 'When true, displays the rulers for spacing between columns',\n table: {\n defaultValue: { summary: true }\n }\n },\n showText: {\n control: 'boolean',\n description:\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\nGridOverlay.parameters = {\n argActions: {}\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 { context } from '../../globals';\nimport { default as GridOverlayComponent } from '.';\nimport mdx from './GridOverlay.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/GridOverlay`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const GridOverlay = args =>\n class GridOverlay extends lng.Component {\n static _template() {\n return {\n GridOverlay: {\n type: GridOverlayComponent,\n x: context.theme.layout.marginX * -1,\n y: context.theme.layout.marginY * -1,\n showColumns: args.showColumns,\n showMargins: args.showMargins,\n showSafe: args.showSafe,\n showGutters: args.showGutters,\n showText: args.showText,\n alpha: args.alpha\n }\n };\n }\n };\nGridOverlay.storyName = 'GridOverlay';\nGridOverlay.args = {\n alpha: 1,\n showColumns: true,\n showMargins: true,\n showSafe: true,\n showGutters: true,\n showText: true\n};\nGridOverlay.argTypes = {\n alpha: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description:\n 'Adjusts the opacity, parameter should be a value between 0 and 1',\n table: { defaultValue: { summary: 'undefined' } }\n },\n showColumns: {\n control: 'boolean',\n description: 'When true, displays the column span rectangles',\n table: {\n defaultValue: { summary: true }\n }\n },\n showMargins: {\n control: 'boolean',\n description: 'When true, displays the X and Y margin rulers',\n table: {\n defaultValue: { summary: true }\n }\n },\n showSafe: {\n control: 'boolean',\n description:\n 'When true, displays the X and Y \"safe\" zone rulers (this is the area that content should not be rendered in to avoid screen clipping on a device)',\n table: {\n defaultValue: { summary: true }\n }\n },\n showGutters: {\n control: 'boolean',\n description: 'When true, displays the rulers for spacing between columns',\n table: {\n defaultValue: { summary: true }\n }\n },\n showText: {\n control: 'boolean',\n description:\n 'When true, displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\nGridOverlay.parameters = {\n argActions: {}\n};\n", "locationsMap": { "grid-overlay": { "startLoc": { @@ -22877,12 +22807,12 @@ function MDXContent(_ref) { }, "common image type"), " or an inline SVG."), Object(esm["b" /* mdx */])("p", null, "With an image path:"), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "foundations-icon--png", + id: "components-icon--png", mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "With an inline svg:"), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "foundations-icon--svg", + id: "components-icon--svg", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -23013,7 +22943,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Icon from '.';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport mdx from './Icon.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Icon`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n argActions: {\\n w: (w, component) => {\\n component.tag('Icon').w = w;\\n component._refocus();\\n },\\n h: (h, component) => {\\n component.tag('Icon').h = h;\\n component._refocus();\\n }\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n w: 50,\\n h: 50\\n};\\n\\nconst sharedArgTypes = {\\n w: {\\n control: {\\n type: 'range',\\n min: 1,\\n max: 96\\n },\\n description: 'Width of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: { type: 'range', min: 1, max: 96 },\\n description: 'Height of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const PNG = () =>\\n class PNG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: lightning,\\n announce: 'Lightning bolt'\\n }\\n };\\n }\\n };\\n\\nPNG.args = sharedArgs;\\n\\nPNG.argTypes = sharedArgTypes;\\n\\nexport const SVG = () =>\\n class SVG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: '',\\n announce: 'Red circle'\\n }\\n };\\n }\\n };\\n\\nSVG.args = sharedArgs;\\n\\nSVG.argTypes = sharedArgTypes;\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"PNG\":{\"startLoc\":{\"col\":19,\"line\":70},\"endLoc\":{\"col\":3,\"line\":81},\"startBody\":{\"col\":19,\"line\":70},\"endBody\":{\"col\":3,\"line\":81}},\"SVG\":{\"startLoc\":{\"col\":19,\"line\":87},\"endLoc\":{\"col\":3,\"line\":98},\"startBody\":{\"col\":19,\"line\":87},\"endBody\":{\"col\":3,\"line\":98}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Icon from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport mdx from './Icon.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Icon`,\n 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 Icon from '.';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport mdx from './Icon.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Icon`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n argActions: {\\n w: (w, component) => {\\n component.tag('Icon').w = w;\\n component._refocus();\\n },\\n h: (h, component) => {\\n component.tag('Icon').h = h;\\n component._refocus();\\n }\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n w: 50,\\n h: 50\\n};\\n\\nconst sharedArgTypes = {\\n w: {\\n control: {\\n type: 'range',\\n min: 1,\\n max: 96\\n },\\n description: 'Width of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: { type: 'range', min: 1, max: 96 },\\n description: 'Height of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const PNG = () =>\\n class PNG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: lightning,\\n announce: 'Lightning bolt'\\n }\\n };\\n }\\n };\\n\\nPNG.args = sharedArgs;\\n\\nPNG.argTypes = sharedArgTypes;\\n\\nexport const SVG = () =>\\n class SVG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: '',\\n announce: 'Red circle'\\n }\\n };\\n }\\n };\\n\\nSVG.args = sharedArgs;\\n\\nSVG.argTypes = sharedArgTypes;\\n\",\"locationsMap\":{\"png\":{\"startLoc\":{\"col\":19,\"line\":70},\"endLoc\":{\"col\":3,\"line\":81},\"startBody\":{\"col\":19,\"line\":70},\"endBody\":{\"col\":3,\"line\":81}},\"svg\":{\"startLoc\":{\"col\":19,\"line\":87},\"endLoc\":{\"col\":3,\"line\":98},\"startBody\":{\"col\":19,\"line\":87},\"endBody\":{\"col\":3,\"line\":98}}}},\n docs: {\n page: mdx\n },\n argActions: {\n w: (w, component) => {\n component.tag('Icon').w = w;\n component._refocus();\n },\n h: (h, component) => {\n component.tag('Icon').h = h;\n component._refocus();\n }\n }\n },};\n\nconst sharedArgs = {\n w: 50,\n h: 50\n};\n\nconst sharedArgTypes = {\n w: {\n control: {\n type: 'range',\n min: 1,\n max: 96\n },\n description: 'Width of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: { type: 'range', min: 1, max: 96 },\n description: 'Height of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const PNG = () =>\n class PNG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: lightning,\n announce: 'Lightning bolt'\n }\n };\n }\n };;\n\nPNG.args = sharedArgs;\n\nPNG.argTypes = sharedArgTypes;\n\nexport const SVG = () =>\n class SVG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: '',\n announce: 'Red circle'\n }\n };\n }\n };\n\nSVG.args = sharedArgs;\n\nSVG.argTypes = sharedArgTypes;\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Icon from '.';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport mdx from './Icon.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Icon`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n argActions: {\\n w: (w, component) => {\\n component.tag('Icon').w = w;\\n component._refocus();\\n },\\n h: (h, component) => {\\n component.tag('Icon').h = h;\\n component._refocus();\\n }\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n w: 50,\\n h: 50\\n};\\n\\nconst sharedArgTypes = {\\n w: {\\n control: {\\n type: 'range',\\n min: 1,\\n max: 96\\n },\\n description: 'Width of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: { type: 'range', min: 1, max: 96 },\\n description: 'Height of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const PNG = () =>\\n class PNG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: lightning,\\n announce: 'Lightning bolt'\\n }\\n };\\n }\\n };\\n\\nPNG.args = sharedArgs;\\n\\nPNG.argTypes = sharedArgTypes;\\n\\nexport const SVG = () =>\\n class SVG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: '',\\n announce: 'Red circle'\\n }\\n };\\n }\\n };\\n\\nSVG.args = sharedArgs;\\n\\nSVG.argTypes = sharedArgTypes;\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"PNG\":{\"startLoc\":{\"col\":19,\"line\":70},\"endLoc\":{\"col\":3,\"line\":81},\"startBody\":{\"col\":19,\"line\":70},\"endBody\":{\"col\":3,\"line\":81}},\"SVG\":{\"startLoc\":{\"col\":19,\"line\":87},\"endLoc\":{\"col\":3,\"line\":98},\"startBody\":{\"col\":19,\"line\":87},\"endBody\":{\"col\":3,\"line\":98}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Icon from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport mdx from './Icon.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Icon`,\n 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 Icon from '.';\\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\\nimport mdx from './Icon.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Icon`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n argActions: {\\n w: (w, component) => {\\n component.tag('Icon').w = w;\\n component._refocus();\\n },\\n h: (h, component) => {\\n component.tag('Icon').h = h;\\n component._refocus();\\n }\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n w: 50,\\n h: 50\\n};\\n\\nconst sharedArgTypes = {\\n w: {\\n control: {\\n type: 'range',\\n min: 1,\\n max: 96\\n },\\n description: 'Width of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: { type: 'range', min: 1, max: 96 },\\n description: 'Height of the icon',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const PNG = () =>\\n class PNG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: lightning,\\n announce: 'Lightning bolt'\\n }\\n };\\n }\\n };\\n\\nPNG.args = sharedArgs;\\n\\nPNG.argTypes = sharedArgTypes;\\n\\nexport const SVG = () =>\\n class SVG extends lng.Component {\\n static _template() {\\n return {\\n Icon: {\\n type: Icon,\\n icon: '',\\n announce: 'Red circle'\\n }\\n };\\n }\\n };\\n\\nSVG.args = sharedArgs;\\n\\nSVG.argTypes = sharedArgTypes;\\n\",\"locationsMap\":{\"png\":{\"startLoc\":{\"col\":19,\"line\":70},\"endLoc\":{\"col\":3,\"line\":81},\"startBody\":{\"col\":19,\"line\":70},\"endBody\":{\"col\":3,\"line\":81}},\"svg\":{\"startLoc\":{\"col\":19,\"line\":87},\"endLoc\":{\"col\":3,\"line\":98},\"startBody\":{\"col\":19,\"line\":87},\"endBody\":{\"col\":3,\"line\":98}}}},\n docs: {\n page: mdx\n },\n argActions: {\n w: (w, component) => {\n component.tag('Icon').w = w;\n component._refocus();\n },\n h: (h, component) => {\n component.tag('Icon').h = h;\n component._refocus();\n }\n }\n },};\n\nconst sharedArgs = {\n w: 50,\n h: 50\n};\n\nconst sharedArgTypes = {\n w: {\n control: {\n type: 'range',\n min: 1,\n max: 96\n },\n description: 'Width of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: { type: 'range', min: 1, max: 96 },\n description: 'Height of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const PNG = () =>\n class PNG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: lightning,\n announce: 'Lightning bolt'\n }\n };\n }\n };;\n\nPNG.args = sharedArgs;\n\nPNG.argTypes = sharedArgTypes;\n\nexport const SVG = () =>\n class SVG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: '',\n announce: 'Red circle'\n }\n };\n }\n };\n\nSVG.args = sharedArgs;\n\nSVG.argTypes = sharedArgTypes;\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "PNG": { @@ -23057,7 +22987,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 Icon from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport mdx from './Icon.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Icon`,\n parameters: {\n docs: {\n page: mdx\n },\n argActions: {\n w: (w, component) => {\n component.tag('Icon').w = w;\n component._refocus();\n },\n h: (h, component) => {\n component.tag('Icon').h = h;\n component._refocus();\n }\n }\n }\n};\n\nconst sharedArgs = {\n w: 50,\n h: 50\n};\n\nconst sharedArgTypes = {\n w: {\n control: {\n type: 'range',\n min: 1,\n max: 96\n },\n description: 'Width of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: { type: 'range', min: 1, max: 96 },\n description: 'Height of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const PNG = () =>\n class PNG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: lightning,\n announce: 'Lightning bolt'\n }\n };\n }\n };\n\nPNG.args = sharedArgs;\n\nPNG.argTypes = sharedArgTypes;\n\nexport const SVG = () =>\n class SVG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: '',\n announce: 'Red circle'\n }\n };\n }\n };\n\nSVG.args = sharedArgs;\n\nSVG.argTypes = sharedArgTypes;\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 Icon from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport mdx from './Icon.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Icon`,\n parameters: {\n docs: {\n page: mdx\n },\n argActions: {\n w: (w, component) => {\n component.tag('Icon').w = w;\n component._refocus();\n },\n h: (h, component) => {\n component.tag('Icon').h = h;\n component._refocus();\n }\n }\n }\n};\n\nconst sharedArgs = {\n w: 50,\n h: 50\n};\n\nconst sharedArgTypes = {\n w: {\n control: {\n type: 'range',\n min: 1,\n max: 96\n },\n description: 'Width of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: { type: 'range', min: 1, max: 96 },\n description: 'Height of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const PNG = () =>\n class PNG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: lightning,\n announce: 'Lightning bolt'\n }\n };\n }\n };\n\nPNG.args = sharedArgs;\n\nPNG.argTypes = sharedArgTypes;\n\nexport const SVG = () =>\n class SVG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: '',\n announce: 'Red circle'\n }\n };\n }\n };\n\nSVG.args = sharedArgs;\n\nSVG.argTypes = sharedArgTypes;\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "PNG": { @@ -23122,10 +23052,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Icon_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][4] + "/Icon", + title: constants["a" /* CATEGORIES */][8] + "/Icon", 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 Icon from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport mdx from './Icon.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Icon`,\n parameters: {\n docs: {\n page: mdx\n },\n argActions: {\n w: (w, component) => {\n component.tag('Icon').w = w;\n component._refocus();\n },\n h: (h, component) => {\n component.tag('Icon').h = h;\n component._refocus();\n }\n }\n }\n};\n\nconst sharedArgs = {\n w: 50,\n h: 50\n};\n\nconst sharedArgTypes = {\n w: {\n control: {\n type: 'range',\n min: 1,\n max: 96\n },\n description: 'Width of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: { type: 'range', min: 1, max: 96 },\n description: 'Height of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const PNG = () =>\n class PNG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: lightning,\n announce: 'Lightning bolt'\n }\n };\n }\n };\n\nPNG.args = sharedArgs;\n\nPNG.argTypes = sharedArgTypes;\n\nexport const SVG = () =>\n class SVG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: '',\n announce: 'Red circle'\n }\n };\n }\n };\n\nSVG.args = sharedArgs;\n\nSVG.argTypes = sharedArgTypes;\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 Icon from '.';\nimport lightning from '../../assets/images/ic_lightning_white_32.png';\nimport mdx from './Icon.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Icon`,\n parameters: {\n docs: {\n page: mdx\n },\n argActions: {\n w: (w, component) => {\n component.tag('Icon').w = w;\n component._refocus();\n },\n h: (h, component) => {\n component.tag('Icon').h = h;\n component._refocus();\n }\n }\n }\n};\n\nconst sharedArgs = {\n w: 50,\n h: 50\n};\n\nconst sharedArgTypes = {\n w: {\n control: {\n type: 'range',\n min: 1,\n max: 96\n },\n description: 'Width of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: { type: 'range', min: 1, max: 96 },\n description: 'Height of the icon',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const PNG = () =>\n class PNG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: lightning,\n announce: 'Lightning bolt'\n }\n };\n }\n };\n\nPNG.args = sharedArgs;\n\nPNG.argTypes = sharedArgTypes;\n\nexport const SVG = () =>\n class SVG extends lng.Component {\n static _template() {\n return {\n Icon: {\n type: Icon,\n icon: '',\n announce: 'Red circle'\n }\n };\n }\n };\n\nSVG.args = sharedArgs;\n\nSVG.argTypes = sharedArgTypes;\n", "locationsMap": { "png": { "startLoc": { @@ -23441,7 +23371,7 @@ var InlineContent_styles_base = function base(theme) { verticalAlign: 'bottom' }), maxLines: 1, - justify: 'center' + justify: 'flex-start' }; }; // CONCATENATED MODULE: /home/runner/work/Lightning-UI-Components/Lightning-UI-Components/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -24047,7 +23977,7 @@ function MDXContent(_ref) { parentName: "p" }, "Depreciated: ", Object(esm["b" /* mdx */])("a", { parentName: "strong", - "href": "/docs/text-textbox--basic" + "href": "/docs/components-textbox--basic" }, "TextBox"), " is the recommended component for rendering text and supports all properties of InlineContent")), Object(esm["b" /* mdx */])("p", null, "Renders text, icons, and badges in line together."), Object(esm["b" /* mdx */])("h2", { "id": "source" }, "Source"), Object(esm["b" /* mdx */])("p", null, Object(esm["b" /* mdx */])("a", { @@ -24065,7 +23995,7 @@ function MDXContent(_ref) { }, "import { InlineContent } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContent,\n content: [\n 'example of simple text',\n {\n icon: 'http://myIconUrl.com/goeshere',\n title: 'to add voice out content (essentially alt text)',\n color: '00ff00'\n },\n { newline: true },\n { badge: 'HD' }\n ]\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "text-inlinecontent--basic", + id: "components-inlinecontent--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -24564,7 +24494,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as InlineContentComponent } from '.';\\nimport mdx from './InlineContent.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[256]}/InlineContent`,\\n args: {\\n contentWrap: false,\\n justify: 'center',\\n contentProperties: { marginBottom: -4 }\\n },\\n argTypes: {\\n contentProperties: {\\n control: 'object',\\n description: 'Object setting flexItem props on all content items',\\n type: 'object',\\n table: {\\n defaultValue: { summary: '{}' }\\n }\\n },\\n contentWrap: {\\n control: 'boolean',\\n description:\\n 'Determines whether the containing flexbox should wrap the content onto the next line',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: [\\n 'flex-start',\\n 'flex-end',\\n 'center',\\n 'space-between',\\n 'space-around',\\n 'space-evenly'\\n ],\\n description: 'Alignment of first line flexbox content',\\n type: 'string',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n maxLines: {\\n control: 'number',\\n description: 'maximum number of lines to render before truncation',\\n type: 'number',\\n table: {\\n defaultValue: { summary: undefined }\\n }\\n },\\n maxLinesSuffix: {\\n control: 'text',\\n description:\\n 'suffix appended to last line of content if it will exceed the maxLines',\\n type: 'string',\\n table: {\\n defaultValue: { summary: '..' }\\n }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 200,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('00ff00')\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n {\\n text: 'make some text italic',\\n style: 'italic'\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithNewLines = args =>\\n class WithNewLines extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n content: [\\n 'Example with multiple lines',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n { newline: true },\\n 'this line should break here',\\n { newline: true },\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'another line break here',\\n { newline: true },\\n { badge: 'HD', title: 'HD' },\\n { newline: true },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithParsing = args =>\\n class WithParsing extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 550,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n },\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\\n }\\n };\\n }\\n };\\n\\nexport const WithTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n w: 500,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\nWithTruncation.args = {\\n contentWrap: true,\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":92},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":21,\"line\":92},\"endBody\":{\"col\":3,\"line\":137}},\"WithNewLines\":{\"startLoc\":{\"col\":28,\"line\":139},\"endLoc\":{\"col\":3,\"line\":173},\"startBody\":{\"col\":28,\"line\":139},\"endBody\":{\"col\":3,\"line\":173}},\"WithParsing\":{\"startLoc\":{\"col\":27,\"line\":175},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":27,\"line\":175},\"endBody\":{\"col\":3,\"line\":197}},\"WithTruncation\":{\"startLoc\":{\"col\":30,\"line\":199},\"endLoc\":{\"col\":3,\"line\":232},\"startBody\":{\"col\":30,\"line\":199},\"endBody\":{\"col\":3,\"line\":232}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as InlineContentComponent } from '.';\nimport mdx from './InlineContent.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/InlineContent`,\n args: {\n contentWrap: false,\n justify: 'center',\n contentProperties: { marginBottom: -4 }\n },\n argTypes: {\n contentProperties: {\n control: 'object',\n description: 'Object setting flexItem props on all content items',\n type: 'object',\n table: {\n defaultValue: { summary: '{}' }\n }\n },\n contentWrap: {\n control: 'boolean',\n description:\n 'Determines whether the containing flexbox should wrap the content onto the next line',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly'\n ],\n description: 'Alignment of first line flexbox content',\n type: 'string',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n maxLines: {\n control: 'number',\n description: 'maximum number of lines to render before truncation',\n type: 'number',\n table: {\n defaultValue: { summary: undefined }\n }\n },\n maxLinesSuffix: {\n control: 'text',\n description:\n 'suffix appended to last line of content if it will exceed the maxLines',\n type: 'string',\n table: {\n defaultValue: { summary: '..' }\n }\n }\n },\n 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 { default as InlineContentComponent } from '.';\\nimport mdx from './InlineContent.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[256]}/InlineContent`,\\n args: {\\n contentWrap: false,\\n justify: 'center',\\n contentProperties: { marginBottom: -4 }\\n },\\n argTypes: {\\n contentProperties: {\\n control: 'object',\\n description: 'Object setting flexItem props on all content items',\\n type: 'object',\\n table: {\\n defaultValue: { summary: '{}' }\\n }\\n },\\n contentWrap: {\\n control: 'boolean',\\n description:\\n 'Determines whether the containing flexbox should wrap the content onto the next line',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: [\\n 'flex-start',\\n 'flex-end',\\n 'center',\\n 'space-between',\\n 'space-around',\\n 'space-evenly'\\n ],\\n description: 'Alignment of first line flexbox content',\\n type: 'string',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n maxLines: {\\n control: 'number',\\n description: 'maximum number of lines to render before truncation',\\n type: 'number',\\n table: {\\n defaultValue: { summary: undefined }\\n }\\n },\\n maxLinesSuffix: {\\n control: 'text',\\n description:\\n 'suffix appended to last line of content if it will exceed the maxLines',\\n type: 'string',\\n table: {\\n defaultValue: { summary: '..' }\\n }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 200,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('00ff00')\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n {\\n text: 'make some text italic',\\n style: 'italic'\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithNewLines = args =>\\n class WithNewLines extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n content: [\\n 'Example with multiple lines',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n { newline: true },\\n 'this line should break here',\\n { newline: true },\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'another line break here',\\n { newline: true },\\n { badge: 'HD', title: 'HD' },\\n { newline: true },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithParsing = args =>\\n class WithParsing extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 550,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n },\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\\n }\\n };\\n }\\n };\\n\\nexport const WithTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n w: 500,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\nWithTruncation.args = {\\n contentWrap: true,\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":92},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":21,\"line\":92},\"endBody\":{\"col\":3,\"line\":137}},\"with-new-lines\":{\"startLoc\":{\"col\":28,\"line\":139},\"endLoc\":{\"col\":3,\"line\":173},\"startBody\":{\"col\":28,\"line\":139},\"endBody\":{\"col\":3,\"line\":173}},\"with-parsing\":{\"startLoc\":{\"col\":27,\"line\":175},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":27,\"line\":175},\"endBody\":{\"col\":3,\"line\":197}},\"with-truncation\":{\"startLoc\":{\"col\":30,\"line\":199},\"endLoc\":{\"col\":3,\"line\":232},\"startBody\":{\"col\":30,\"line\":199},\"endBody\":{\"col\":3,\"line\":232}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 200,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('00ff00')\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n {\n text: 'make some text italic',\n style: 'italic'\n }\n ]\n }\n };\n }\n };;\n\nexport const WithNewLines = args =>\n class WithNewLines extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n content: [\n 'Example with multiple lines',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n { newline: true },\n 'this line should break here',\n { newline: true },\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'another line break here',\n { newline: true },\n { badge: 'HD', title: 'HD' },\n { newline: true },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };;\n\nexport const WithParsing = args =>\n class WithParsing extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 550,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n },\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\n }\n };\n }\n };;\n\nexport const WithTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n w: 500,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\nWithTruncation.args = {\n contentWrap: true,\n maxLines: 2,\n maxLinesSuffix: '...'\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as InlineContentComponent } from '.';\\nimport mdx from './InlineContent.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/InlineContent`,\\n args: {\\n contentWrap: false,\\n justify: 'center',\\n contentProperties: { marginBottom: -4 }\\n },\\n argTypes: {\\n contentProperties: {\\n control: 'object',\\n description: 'Object setting flexItem props on all content items',\\n type: 'object',\\n table: {\\n defaultValue: { summary: '{}' }\\n }\\n },\\n contentWrap: {\\n control: 'boolean',\\n description:\\n 'Determines whether the containing flexbox should wrap the content onto the next line',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: [\\n 'flex-start',\\n 'flex-end',\\n 'center',\\n 'space-between',\\n 'space-around',\\n 'space-evenly'\\n ],\\n description: 'Alignment of first line flexbox content',\\n type: 'string',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n maxLines: {\\n control: 'number',\\n description: 'maximum number of lines to render before truncation',\\n type: 'number',\\n table: {\\n defaultValue: { summary: undefined }\\n }\\n },\\n maxLinesSuffix: {\\n control: 'text',\\n description:\\n 'suffix appended to last line of content if it will exceed the maxLines',\\n type: 'string',\\n table: {\\n defaultValue: { summary: '..' }\\n }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 200,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('00ff00')\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n {\\n text: 'make some text italic',\\n style: 'italic'\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithNewLines = args =>\\n class WithNewLines extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n content: [\\n 'Example with multiple lines',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n { newline: true },\\n 'this line should break here',\\n { newline: true },\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'another line break here',\\n { newline: true },\\n { badge: 'HD', title: 'HD' },\\n { newline: true },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithParsing = args =>\\n class WithParsing extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 550,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n },\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\\n }\\n };\\n }\\n };\\n\\nexport const WithTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n w: 500,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\nWithTruncation.args = {\\n contentWrap: true,\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":92},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":21,\"line\":92},\"endBody\":{\"col\":3,\"line\":137}},\"WithNewLines\":{\"startLoc\":{\"col\":28,\"line\":139},\"endLoc\":{\"col\":3,\"line\":173},\"startBody\":{\"col\":28,\"line\":139},\"endBody\":{\"col\":3,\"line\":173}},\"WithParsing\":{\"startLoc\":{\"col\":27,\"line\":175},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":27,\"line\":175},\"endBody\":{\"col\":3,\"line\":197}},\"WithTruncation\":{\"startLoc\":{\"col\":30,\"line\":199},\"endLoc\":{\"col\":3,\"line\":232},\"startBody\":{\"col\":30,\"line\":199},\"endBody\":{\"col\":3,\"line\":232}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as InlineContentComponent } from '.';\nimport mdx from './InlineContent.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/InlineContent`,\n args: {\n contentWrap: false,\n justify: 'center',\n contentProperties: { marginBottom: -4 }\n },\n argTypes: {\n contentProperties: {\n control: 'object',\n description: 'Object setting flexItem props on all content items',\n type: 'object',\n table: {\n defaultValue: { summary: '{}' }\n }\n },\n contentWrap: {\n control: 'boolean',\n description:\n 'Determines whether the containing flexbox should wrap the content onto the next line',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly'\n ],\n description: 'Alignment of first line flexbox content',\n type: 'string',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n maxLines: {\n control: 'number',\n description: 'maximum number of lines to render before truncation',\n type: 'number',\n table: {\n defaultValue: { summary: undefined }\n }\n },\n maxLinesSuffix: {\n control: 'text',\n description:\n 'suffix appended to last line of content if it will exceed the maxLines',\n type: 'string',\n table: {\n defaultValue: { summary: '..' }\n }\n }\n },\n 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 { default as InlineContentComponent } from '.';\\nimport mdx from './InlineContent.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/InlineContent`,\\n args: {\\n contentWrap: false,\\n justify: 'center',\\n contentProperties: { marginBottom: -4 }\\n },\\n argTypes: {\\n contentProperties: {\\n control: 'object',\\n description: 'Object setting flexItem props on all content items',\\n type: 'object',\\n table: {\\n defaultValue: { summary: '{}' }\\n }\\n },\\n contentWrap: {\\n control: 'boolean',\\n description:\\n 'Determines whether the containing flexbox should wrap the content onto the next line',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n justify: {\\n control: 'radio',\\n options: [\\n 'flex-start',\\n 'flex-end',\\n 'center',\\n 'space-between',\\n 'space-around',\\n 'space-evenly'\\n ],\\n description: 'Alignment of first line flexbox content',\\n type: 'string',\\n table: {\\n defaultValue: { summary: 'center' }\\n }\\n },\\n maxLines: {\\n control: 'number',\\n description: 'maximum number of lines to render before truncation',\\n type: 'number',\\n table: {\\n defaultValue: { summary: undefined }\\n }\\n },\\n maxLinesSuffix: {\\n control: 'text',\\n description:\\n 'suffix appended to last line of content if it will exceed the maxLines',\\n type: 'string',\\n table: {\\n defaultValue: { summary: '..' }\\n }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 200,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('00ff00')\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n {\\n text: 'make some text italic',\\n style: 'italic'\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithNewLines = args =>\\n class WithNewLines extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 500,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n content: [\\n 'Example with multiple lines',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n { newline: true },\\n 'this line should break here',\\n { newline: true },\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'another line break here',\\n { newline: true },\\n { badge: 'HD', title: 'HD' },\\n { newline: true },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const WithParsing = args =>\\n class WithParsing extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n x: 550,\\n w: 400,\\n contentWrap: args.contentWrap,\\n contentProperties: args.contentProperties,\\n justify: args.justify,\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n },\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\\n }\\n };\\n }\\n };\\n\\nexport const WithTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n InlineContent: {\\n type: InlineContentComponent,\\n w: 500,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\nWithTruncation.args = {\\n contentWrap: true,\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":92},\"endLoc\":{\"col\":3,\"line\":137},\"startBody\":{\"col\":21,\"line\":92},\"endBody\":{\"col\":3,\"line\":137}},\"with-new-lines\":{\"startLoc\":{\"col\":28,\"line\":139},\"endLoc\":{\"col\":3,\"line\":173},\"startBody\":{\"col\":28,\"line\":139},\"endBody\":{\"col\":3,\"line\":173}},\"with-parsing\":{\"startLoc\":{\"col\":27,\"line\":175},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":27,\"line\":175},\"endBody\":{\"col\":3,\"line\":197}},\"with-truncation\":{\"startLoc\":{\"col\":30,\"line\":199},\"endLoc\":{\"col\":3,\"line\":232},\"startBody\":{\"col\":30,\"line\":199},\"endBody\":{\"col\":3,\"line\":232}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 200,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('00ff00')\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n {\n text: 'make some text italic',\n style: 'italic'\n }\n ]\n }\n };\n }\n };;\n\nexport const WithNewLines = args =>\n class WithNewLines extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n content: [\n 'Example with multiple lines',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n { newline: true },\n 'this line should break here',\n { newline: true },\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'another line break here',\n { newline: true },\n { badge: 'HD', title: 'HD' },\n { newline: true },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };;\n\nexport const WithParsing = args =>\n class WithParsing extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 550,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n },\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\n }\n };\n }\n };;\n\nexport const WithTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n w: 500,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\nWithTruncation.args = {\n contentWrap: true,\n maxLines: 2,\n maxLinesSuffix: '...'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -24644,7 +24574,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as InlineContentComponent } from '.';\nimport mdx from './InlineContent.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/InlineContent`,\n args: {\n contentWrap: false,\n justify: 'center',\n contentProperties: { marginBottom: -4 }\n },\n argTypes: {\n contentProperties: {\n control: 'object',\n description: 'Object setting flexItem props on all content items',\n type: 'object',\n table: {\n defaultValue: { summary: '{}' }\n }\n },\n contentWrap: {\n control: 'boolean',\n description:\n 'Determines whether the containing flexbox should wrap the content onto the next line',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly'\n ],\n description: 'Alignment of first line flexbox content',\n type: 'string',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n maxLines: {\n control: 'number',\n description: 'maximum number of lines to render before truncation',\n type: 'number',\n table: {\n defaultValue: { summary: undefined }\n }\n },\n maxLinesSuffix: {\n control: 'text',\n description:\n 'suffix appended to last line of content if it will exceed the maxLines',\n type: 'string',\n table: {\n defaultValue: { summary: '..' }\n }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 200,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('00ff00')\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n {\n text: 'make some text italic',\n style: 'italic'\n }\n ]\n }\n };\n }\n };\n\nexport const WithNewLines = args =>\n class WithNewLines extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n content: [\n 'Example with multiple lines',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n { newline: true },\n 'this line should break here',\n { newline: true },\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'another line break here',\n { newline: true },\n { badge: 'HD', title: 'HD' },\n { newline: true },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nexport const WithParsing = args =>\n class WithParsing extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 550,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n },\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\n }\n };\n }\n };\n\nexport const WithTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n w: 500,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\nWithTruncation.args = {\n contentWrap: true,\n maxLines: 2,\n maxLinesSuffix: '...'\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 { default as InlineContentComponent } from '.';\nimport mdx from './InlineContent.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/InlineContent`,\n args: {\n contentWrap: false,\n justify: 'center',\n contentProperties: { marginBottom: -4 }\n },\n argTypes: {\n contentProperties: {\n control: 'object',\n description: 'Object setting flexItem props on all content items',\n type: 'object',\n table: {\n defaultValue: { summary: '{}' }\n }\n },\n contentWrap: {\n control: 'boolean',\n description:\n 'Determines whether the containing flexbox should wrap the content onto the next line',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly'\n ],\n description: 'Alignment of first line flexbox content',\n type: 'string',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n maxLines: {\n control: 'number',\n description: 'maximum number of lines to render before truncation',\n type: 'number',\n table: {\n defaultValue: { summary: undefined }\n }\n },\n maxLinesSuffix: {\n control: 'text',\n description:\n 'suffix appended to last line of content if it will exceed the maxLines',\n type: 'string',\n table: {\n defaultValue: { summary: '..' }\n }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 200,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('00ff00')\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n {\n text: 'make some text italic',\n style: 'italic'\n }\n ]\n }\n };\n }\n };\n\nexport const WithNewLines = args =>\n class WithNewLines extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n content: [\n 'Example with multiple lines',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n { newline: true },\n 'this line should break here',\n { newline: true },\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'another line break here',\n { newline: true },\n { badge: 'HD', title: 'HD' },\n { newline: true },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nexport const WithParsing = args =>\n class WithParsing extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 550,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n },\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\n }\n };\n }\n };\n\nexport const WithTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n w: 500,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\nWithTruncation.args = {\n contentWrap: true,\n maxLines: 2,\n maxLinesSuffix: '...'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -24746,7 +24676,7 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var InlineContent_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][256] + "/InlineContent", + title: constants["a" /* CATEGORIES */][8] + "/InlineContent", args: { contentWrap: false, justify: 'center', @@ -24809,7 +24739,7 @@ var __LOCATIONS_MAP__ = { }, 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 { default as InlineContentComponent } from '.';\nimport mdx from './InlineContent.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/InlineContent`,\n args: {\n contentWrap: false,\n justify: 'center',\n contentProperties: { marginBottom: -4 }\n },\n argTypes: {\n contentProperties: {\n control: 'object',\n description: 'Object setting flexItem props on all content items',\n type: 'object',\n table: {\n defaultValue: { summary: '{}' }\n }\n },\n contentWrap: {\n control: 'boolean',\n description:\n 'Determines whether the containing flexbox should wrap the content onto the next line',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly'\n ],\n description: 'Alignment of first line flexbox content',\n type: 'string',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n maxLines: {\n control: 'number',\n description: 'maximum number of lines to render before truncation',\n type: 'number',\n table: {\n defaultValue: { summary: undefined }\n }\n },\n maxLinesSuffix: {\n control: 'text',\n description:\n 'suffix appended to last line of content if it will exceed the maxLines',\n type: 'string',\n table: {\n defaultValue: { summary: '..' }\n }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 200,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('00ff00')\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n {\n text: 'make some text italic',\n style: 'italic'\n }\n ]\n }\n };\n }\n };\n\nexport const WithNewLines = args =>\n class WithNewLines extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n content: [\n 'Example with multiple lines',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n { newline: true },\n 'this line should break here',\n { newline: true },\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'another line break here',\n { newline: true },\n { badge: 'HD', title: 'HD' },\n { newline: true },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nexport const WithParsing = args =>\n class WithParsing extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 550,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n },\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\n }\n };\n }\n };\n\nexport const WithTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n w: 500,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\nWithTruncation.args = {\n contentWrap: true,\n maxLines: 2,\n maxLinesSuffix: '...'\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 { default as InlineContentComponent } from '.';\nimport mdx from './InlineContent.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/InlineContent`,\n args: {\n contentWrap: false,\n justify: 'center',\n contentProperties: { marginBottom: -4 }\n },\n argTypes: {\n contentProperties: {\n control: 'object',\n description: 'Object setting flexItem props on all content items',\n type: 'object',\n table: {\n defaultValue: { summary: '{}' }\n }\n },\n contentWrap: {\n control: 'boolean',\n description:\n 'Determines whether the containing flexbox should wrap the content onto the next line',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n justify: {\n control: 'radio',\n options: [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly'\n ],\n description: 'Alignment of first line flexbox content',\n type: 'string',\n table: {\n defaultValue: { summary: 'center' }\n }\n },\n maxLines: {\n control: 'number',\n description: 'maximum number of lines to render before truncation',\n type: 'number',\n table: {\n defaultValue: { summary: undefined }\n }\n },\n maxLinesSuffix: {\n control: 'text',\n description:\n 'suffix appended to last line of content if it will exceed the maxLines',\n type: 'string',\n table: {\n defaultValue: { summary: '..' }\n }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 200,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('00ff00')\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n {\n text: 'make some text italic',\n style: 'italic'\n }\n ]\n }\n };\n }\n };\n\nexport const WithNewLines = args =>\n class WithNewLines extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 500,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n content: [\n 'Example with multiple lines',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n { newline: true },\n 'this line should break here',\n { newline: true },\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'another line break here',\n { newline: true },\n { badge: 'HD', title: 'HD' },\n { newline: true },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nexport const WithParsing = args =>\n class WithParsing extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n x: 550,\n w: 400,\n contentWrap: args.contentWrap,\n contentProperties: args.contentProperties,\n justify: args.justify,\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n },\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.'\n }\n };\n }\n };\n\nexport const WithTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n InlineContent: {\n type: InlineContentComponent,\n w: 500,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\nWithTruncation.args = {\n contentWrap: true,\n maxLines: 2,\n maxLinesSuffix: '...'\n};\n", "locationsMap": { "basic": { "startLoc": { @@ -25885,7 +25815,7 @@ function MDXContent(_ref) { }, "import { Input } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Input: {\n type: Input\n }\n };\n }\n\n _handleKey(event) {\n const { key } = event;\n if (key.length === 1) {\n this.tag('Input').input(key);\n }\n if (key === 'Backspace') {\n this.tag('Input').backspace();\n }\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "keyboard-input--input", + id: "components-input--input", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "settinginserting-values" @@ -27020,7 +26950,7 @@ function MDXContent(_ref) { }, "import { Key } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Key: {\n type: Key\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "keyboard-key--basic", + id: "components-key--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -28069,7 +27999,7 @@ function MDXContent(_ref) { }, "import { Keyboard } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Keyboard: {\n type: KeyboardQwerty\n }\n };\n }\n}\n")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Canvas */ "b"], { mdxType: "Canvas" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Story */ "f"], { - id: "keyboard-keyboard--keyboard", + id: "components-keyboard--keyboard", mdxType: "Story" })), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("p", null, "To create your own formats, you can pass an object of arrays to represent each format.\nThe array can be flat or two dimensional. If the keyboard is passed other params like ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("inlineCode", { parentName: "p" @@ -28234,7 +28164,7 @@ function MDXContent(_ref) { "align": null }, "object with all of the properties for ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("a", { parentName: "td", - "href": "?path=/docs/keyboard-input--input" + "href": "?path=/docs/components-input--input" }, "Input"))), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("tr", { parentName: "tbody" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { @@ -31859,7 +31789,7 @@ function MDXContent(_ref) { }, "import { Knob } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Knob: {\n type: Knob\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "utilities-knob--knob", + id: "components-knob--knob", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -31941,7 +31871,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { default as KnobComponent } from '.';\\nimport mdx from './Knob.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Knob`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Knob = () =>\\n class Knob extends lng.Component {\\n static _template() {\\n return {\\n Knob: {\\n type: KnobComponent\\n }\\n };\\n }\\n };\\nKnob.args = { mode: 'focused' };\\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Knob\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { default as KnobComponent } from '.';\nimport mdx from './Knob.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Knob`,\n 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';\\n\\nimport { default as KnobComponent } from '.';\\nimport mdx from './Knob.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Knob`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Knob = () =>\\n class Knob extends lng.Component {\\n static _template() {\\n return {\\n Knob: {\\n type: KnobComponent\\n }\\n };\\n }\\n };\\nKnob.args = { mode: 'focused' };\\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\\n\",\"locationsMap\":{\"knob\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Knob = () =>\n class Knob extends lng.Component {\n static _template() {\n return {\n Knob: {\n type: KnobComponent\n }\n };\n }\n };\nKnob.args = { mode: 'focused' };\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { default as KnobComponent } from '.';\\nimport mdx from './Knob.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Knob`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Knob = () =>\\n class Knob extends lng.Component {\\n static _template() {\\n return {\\n Knob: {\\n type: KnobComponent\\n }\\n };\\n }\\n };\\nKnob.args = { mode: 'focused' };\\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Knob\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { default as KnobComponent } from '.';\nimport mdx from './Knob.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Knob`,\n 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';\\n\\nimport { default as KnobComponent } from '.';\\nimport mdx from './Knob.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Knob`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Knob = () =>\\n class Knob extends lng.Component {\\n static _template() {\\n return {\\n Knob: {\\n type: KnobComponent\\n }\\n };\\n }\\n };\\nKnob.args = { mode: 'focused' };\\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\\n\",\"locationsMap\":{\"knob\":{\"startLoc\":{\"col\":20,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":20,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Knob = () =>\n class Knob extends lng.Component {\n static _template() {\n return {\n Knob: {\n type: KnobComponent\n }\n };\n }\n };\nKnob.args = { mode: 'focused' };\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Knob": { @@ -31967,7 +31897,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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';\n\nimport { default as KnobComponent } from '.';\nimport mdx from './Knob.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Knob`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Knob = () =>\n class Knob extends lng.Component {\n static _template() {\n return {\n Knob: {\n type: KnobComponent\n }\n };\n }\n };\nKnob.args = { mode: 'focused' };\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\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';\n\nimport { default as KnobComponent } from '.';\nimport mdx from './Knob.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Knob`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Knob = () =>\n class Knob extends lng.Component {\n static _template() {\n return {\n Knob: {\n type: KnobComponent\n }\n };\n }\n };\nKnob.args = { mode: 'focused' };\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Knob": { @@ -32014,10 +31944,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Knob_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/Knob", + title: constants["a" /* CATEGORIES */][8] + "/Knob", 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';\n\nimport { default as KnobComponent } from '.';\nimport mdx from './Knob.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Knob`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Knob = () =>\n class Knob extends lng.Component {\n static _template() {\n return {\n Knob: {\n type: KnobComponent\n }\n };\n }\n };\nKnob.args = { mode: 'focused' };\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\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';\n\nimport { default as KnobComponent } from '.';\nimport mdx from './Knob.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Knob`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Knob = () =>\n class Knob extends lng.Component {\n static _template() {\n return {\n Knob: {\n type: KnobComponent\n }\n };\n }\n };\nKnob.args = { mode: 'focused' };\nKnob.argTypes = createModeControl({ summaryValue: 'focused' });\n", "locationsMap": { "knob": { "startLoc": { @@ -32455,7 +32385,7 @@ function MDXContent(_ref) { }, "import { Label } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Label: {\n type: Label,\n title: 'Label',\n style: {\n backgroundColor: '#f6a50a',\n titleColor: '#ffffff'\n }\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-label--label", + id: "components-label--label", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -32618,7 +32548,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { default as LabelComponent } from '.';\\nimport mdx from './Label.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/Label`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Label = () =>\\n class Label extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n type: LabelComponent\\n }\\n };\\n }\\n };\\nLabel.args = {\\n title: 'Label'\\n};\\nLabel.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Label\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { default as LabelComponent } from '.';\nimport mdx from './Label.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/Label`,\n 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';\\n\\nimport { default as LabelComponent } from '.';\\nimport mdx from './Label.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/Label`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Label = () =>\\n class Label extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n type: LabelComponent\\n }\\n };\\n }\\n };\\nLabel.args = {\\n title: 'Label'\\n};\\nLabel.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"label\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { default as LabelComponent } from '.';\\nimport mdx from './Label.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Label`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Label = () =>\\n class Label extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n type: LabelComponent\\n }\\n };\\n }\\n };\\nLabel.args = {\\n title: 'Label'\\n};\\nLabel.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Label\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { default as LabelComponent } from '.';\nimport mdx from './Label.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Label`,\n 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';\\n\\nimport { default as LabelComponent } from '.';\\nimport mdx from './Label.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Label`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Label = () =>\\n class Label extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n type: LabelComponent\\n }\\n };\\n }\\n };\\nLabel.args = {\\n title: 'Label'\\n};\\nLabel.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Text to display in the foreground of the label',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"label\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Label": { @@ -32644,7 +32574,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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';\n\nimport { default as LabelComponent } from '.';\nimport mdx from './Label.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/Label`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; +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';\n\nimport { default as LabelComponent } from '.';\nimport mdx from './Label.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Label`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Label": { @@ -32690,10 +32620,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Label_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][32] + "/Label", + title: constants["a" /* CATEGORIES */][8] + "/Label", 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';\n\nimport { default as LabelComponent } from '.';\nimport mdx from './Label.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/Label`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n", + "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';\n\nimport { default as LabelComponent } from '.';\nimport mdx from './Label.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Label`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Label = () =>\n class Label extends lng.Component {\n static _template() {\n return {\n Label: {\n type: LabelComponent\n }\n };\n }\n };\nLabel.args = {\n title: 'Label'\n};\nLabel.argTypes = {\n title: {\n control: 'text',\n description: 'Text to display in the foreground of the label',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n", "locationsMap": { "label": { "startLoc": { @@ -33346,7 +33276,7 @@ function MDXContent(_ref) { }, "import { ListItem } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n ListItem: {\n type: ListItem,\n title: 'List Item',\n description: 'Description',\n prefix: [{ type: Icon, icon: pathToIcon }]\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "controls-listitem--list-item", + id: "components-listitem--list-item", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -33356,7 +33286,7 @@ function MDXContent(_ref) { parentName: "p" }, "ListItem"), " has the same properties as the ones listed in ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/elements-button--basic" + "href": "?path=/docs/components-button--basic" }, "Button"), " in addition to a couple listed below:"), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { parentName: "table" }, Object(esm["b" /* mdx */])("tr", { @@ -33592,7 +33522,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 ListItemComponent from './ListItem';\\nimport mdx from './ListItem.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { default as Checkbox } from '../Checkbox';\\nimport { default as Radio } from '../Radio';\\nimport { default as Toggle } from '../Toggle';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ListItem`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItem = () =>\\n class ListItem extends lng.Component {\\n static _template() {\\n return {\\n ListItem: {\\n type: ListItemComponent\\n }\\n };\\n }\\n };\\n\\nListItem.storyName = 'ListItem';\\n\\nListItem.args = {\\n title: 'List Item',\\n shouldCollapse: false,\\n description: 'Description',\\n prefix: null,\\n prefixLogo: 'none',\\n suffix: null,\\n suffixLogo: 'none',\\n mode: 'focused'\\n};\\n\\nListItem.argTypes = {\\n ...createModeControl({ summaryValue: ListItem.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n prefixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst elementSet = {\\n toggle: {\\n type: Toggle,\\n checked: true\\n },\\n radio: {\\n type: Radio,\\n checked: true\\n },\\n checkbox: {\\n type: Checkbox,\\n checked: true\\n }\\n};\\n\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n if (prefix == null) {\\n component.tag('ListItem').prefix = [];\\n } else {\\n component.tag('ListItem').prefix = elementSet[prefix];\\n }\\n },\\n prefixLogo: (prefixLogo, component) => {\\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\\n },\\n suffixLogo: (suffixLogo, component) => {\\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\\n },\\n suffix: (suffix, component) => {\\n if (suffix == null) {\\n component.tag('ListItem').suffix = [];\\n } else {\\n component.tag('ListItem').suffix = elementSet[suffix];\\n }\\n }\\n};\\n\\nListItem.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ListItem\":{\"startLoc\":{\"col\":24,\"line\":38},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":38},\"endBody\":{\"col\":3,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport ListItemComponent from './ListItem';\nimport mdx from './ListItem.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { default as Checkbox } from '../Checkbox';\nimport { default as Radio } from '../Radio';\nimport { default as Toggle } from '../Toggle';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItem`,\n 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 ListItemComponent from './ListItem';\\nimport mdx from './ListItem.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { default as Checkbox } from '../Checkbox';\\nimport { default as Radio } from '../Radio';\\nimport { default as Toggle } from '../Toggle';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ListItem`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItem = () =>\\n class ListItem extends lng.Component {\\n static _template() {\\n return {\\n ListItem: {\\n type: ListItemComponent\\n }\\n };\\n }\\n };\\n\\nListItem.storyName = 'ListItem';\\n\\nListItem.args = {\\n title: 'List Item',\\n shouldCollapse: false,\\n description: 'Description',\\n prefix: null,\\n prefixLogo: 'none',\\n suffix: null,\\n suffixLogo: 'none',\\n mode: 'focused'\\n};\\n\\nListItem.argTypes = {\\n ...createModeControl({ summaryValue: ListItem.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n prefixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst elementSet = {\\n toggle: {\\n type: Toggle,\\n checked: true\\n },\\n radio: {\\n type: Radio,\\n checked: true\\n },\\n checkbox: {\\n type: Checkbox,\\n checked: true\\n }\\n};\\n\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n if (prefix == null) {\\n component.tag('ListItem').prefix = [];\\n } else {\\n component.tag('ListItem').prefix = elementSet[prefix];\\n }\\n },\\n prefixLogo: (prefixLogo, component) => {\\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\\n },\\n suffixLogo: (suffixLogo, component) => {\\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\\n },\\n suffix: (suffix, component) => {\\n if (suffix == null) {\\n component.tag('ListItem').suffix = [];\\n } else {\\n component.tag('ListItem').suffix = elementSet[suffix];\\n }\\n }\\n};\\n\\nListItem.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"list-item\":{\"startLoc\":{\"col\":24,\"line\":38},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":38},\"endBody\":{\"col\":3,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ListItem = () =>\n class ListItem extends lng.Component {\n static _template() {\n return {\n ListItem: {\n type: ListItemComponent\n }\n };\n }\n };\n\nListItem.storyName = 'ListItem';\n\nListItem.args = {\n title: 'List Item',\n shouldCollapse: false,\n description: 'Description',\n prefix: null,\n prefixLogo: 'none',\n suffix: null,\n suffixLogo: 'none',\n mode: 'focused'\n};\n\nListItem.argTypes = {\n ...createModeControl({ summaryValue: ListItem.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n prefixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst elementSet = {\n toggle: {\n type: Toggle,\n checked: true\n },\n radio: {\n type: Radio,\n checked: true\n },\n checkbox: {\n type: Checkbox,\n checked: true\n }\n};\n\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n if (prefix == null) {\n component.tag('ListItem').prefix = [];\n } else {\n component.tag('ListItem').prefix = elementSet[prefix];\n }\n },\n prefixLogo: (prefixLogo, component) => {\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\n },\n suffixLogo: (suffixLogo, component) => {\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\n },\n suffix: (suffix, component) => {\n if (suffix == null) {\n component.tag('ListItem').suffix = [];\n } else {\n component.tag('ListItem').suffix = elementSet[suffix];\n }\n }\n};\n\nListItem.parameters = { argActions: sharedArgActions };\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 ListItemComponent from './ListItem';\\nimport mdx from './ListItem.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { default as Checkbox } from '../Checkbox';\\nimport { default as Radio } from '../Radio';\\nimport { default as Toggle } from '../Toggle';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ListItem`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItem = () =>\\n class ListItem extends lng.Component {\\n static _template() {\\n return {\\n ListItem: {\\n type: ListItemComponent\\n }\\n };\\n }\\n };\\n\\nListItem.storyName = 'ListItem';\\n\\nListItem.args = {\\n title: 'List Item',\\n shouldCollapse: false,\\n description: 'Description',\\n prefix: null,\\n prefixLogo: 'none',\\n suffix: null,\\n suffixLogo: 'none',\\n mode: 'focused'\\n};\\n\\nListItem.argTypes = {\\n ...createModeControl({ summaryValue: ListItem.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n prefixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst elementSet = {\\n toggle: {\\n type: Toggle,\\n checked: true\\n },\\n radio: {\\n type: Radio,\\n checked: true\\n },\\n checkbox: {\\n type: Checkbox,\\n checked: true\\n }\\n};\\n\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n if (prefix == null) {\\n component.tag('ListItem').prefix = [];\\n } else {\\n component.tag('ListItem').prefix = elementSet[prefix];\\n }\\n },\\n prefixLogo: (prefixLogo, component) => {\\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\\n },\\n suffixLogo: (suffixLogo, component) => {\\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\\n },\\n suffix: (suffix, component) => {\\n if (suffix == null) {\\n component.tag('ListItem').suffix = [];\\n } else {\\n component.tag('ListItem').suffix = elementSet[suffix];\\n }\\n }\\n};\\n\\nListItem.parameters = { argActions: sharedArgActions };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ListItem\":{\"startLoc\":{\"col\":24,\"line\":38},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":38},\"endBody\":{\"col\":3,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport ListItemComponent from './ListItem';\nimport mdx from './ListItem.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { default as Checkbox } from '../Checkbox';\nimport { default as Radio } from '../Radio';\nimport { default as Toggle } from '../Toggle';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItem`,\n 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 ListItemComponent from './ListItem';\\nimport mdx from './ListItem.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { default as Checkbox } from '../Checkbox';\\nimport { default as Radio } from '../Radio';\\nimport { default as Toggle } from '../Toggle';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ListItem`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItem = () =>\\n class ListItem extends lng.Component {\\n static _template() {\\n return {\\n ListItem: {\\n type: ListItemComponent\\n }\\n };\\n }\\n };\\n\\nListItem.storyName = 'ListItem';\\n\\nListItem.args = {\\n title: 'List Item',\\n shouldCollapse: false,\\n description: 'Description',\\n prefix: null,\\n prefixLogo: 'none',\\n suffix: null,\\n suffixLogo: 'none',\\n mode: 'focused'\\n};\\n\\nListItem.argTypes = {\\n ...createModeControl({ summaryValue: ListItem.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\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 shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n prefix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the left of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n prefixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffix: {\\n control: 'radio',\\n options: [null, 'toggle', 'radio', 'checkbox'],\\n description: 'Lightning components to be placed to the right of the title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n suffixLogo: {\\n control: 'radio',\\n options: ['none', 'xfinity'],\\n description:\\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\n\\nconst logoSet = {\\n none: null,\\n xfinity: xfinity\\n};\\n\\nconst elementSet = {\\n toggle: {\\n type: Toggle,\\n checked: true\\n },\\n radio: {\\n type: Radio,\\n checked: true\\n },\\n checkbox: {\\n type: Checkbox,\\n checked: true\\n }\\n};\\n\\nconst sharedArgActions = {\\n prefix: (prefix, component) => {\\n if (prefix == null) {\\n component.tag('ListItem').prefix = [];\\n } else {\\n component.tag('ListItem').prefix = elementSet[prefix];\\n }\\n },\\n prefixLogo: (prefixLogo, component) => {\\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\\n },\\n suffixLogo: (suffixLogo, component) => {\\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\\n },\\n suffix: (suffix, component) => {\\n if (suffix == null) {\\n component.tag('ListItem').suffix = [];\\n } else {\\n component.tag('ListItem').suffix = elementSet[suffix];\\n }\\n }\\n};\\n\\nListItem.parameters = { argActions: sharedArgActions };\\n\",\"locationsMap\":{\"list-item\":{\"startLoc\":{\"col\":24,\"line\":38},\"endLoc\":{\"col\":3,\"line\":47},\"startBody\":{\"col\":24,\"line\":38},\"endBody\":{\"col\":3,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ListItem = () =>\n class ListItem extends lng.Component {\n static _template() {\n return {\n ListItem: {\n type: ListItemComponent\n }\n };\n }\n };\n\nListItem.storyName = 'ListItem';\n\nListItem.args = {\n title: 'List Item',\n shouldCollapse: false,\n description: 'Description',\n prefix: null,\n prefixLogo: 'none',\n suffix: null,\n suffixLogo: 'none',\n mode: 'focused'\n};\n\nListItem.argTypes = {\n ...createModeControl({ summaryValue: ListItem.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n prefixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst elementSet = {\n toggle: {\n type: Toggle,\n checked: true\n },\n radio: {\n type: Radio,\n checked: true\n },\n checkbox: {\n type: Checkbox,\n checked: true\n }\n};\n\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n if (prefix == null) {\n component.tag('ListItem').prefix = [];\n } else {\n component.tag('ListItem').prefix = elementSet[prefix];\n }\n },\n prefixLogo: (prefixLogo, component) => {\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\n },\n suffixLogo: (suffixLogo, component) => {\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\n },\n suffix: (suffix, component) => {\n if (suffix == null) {\n component.tag('ListItem').suffix = [];\n } else {\n component.tag('ListItem').suffix = elementSet[suffix];\n }\n }\n};\n\nListItem.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ListItem": { @@ -33618,7 +33548,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 ListItemComponent from './ListItem';\nimport mdx from './ListItem.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { default as Checkbox } from '../Checkbox';\nimport { default as Radio } from '../Radio';\nimport { default as Toggle } from '../Toggle';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItem`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItem = () =>\n class ListItem extends lng.Component {\n static _template() {\n return {\n ListItem: {\n type: ListItemComponent\n }\n };\n }\n };\n\nListItem.storyName = 'ListItem';\n\nListItem.args = {\n title: 'List Item',\n shouldCollapse: false,\n description: 'Description',\n prefix: null,\n prefixLogo: 'none',\n suffix: null,\n suffixLogo: 'none',\n mode: 'focused'\n};\n\nListItem.argTypes = {\n ...createModeControl({ summaryValue: ListItem.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n prefixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst elementSet = {\n toggle: {\n type: Toggle,\n checked: true\n },\n radio: {\n type: Radio,\n checked: true\n },\n checkbox: {\n type: Checkbox,\n checked: true\n }\n};\n\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n if (prefix == null) {\n component.tag('ListItem').prefix = [];\n } else {\n component.tag('ListItem').prefix = elementSet[prefix];\n }\n },\n prefixLogo: (prefixLogo, component) => {\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\n },\n suffixLogo: (suffixLogo, component) => {\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\n },\n suffix: (suffix, component) => {\n if (suffix == null) {\n component.tag('ListItem').suffix = [];\n } else {\n component.tag('ListItem').suffix = elementSet[suffix];\n }\n }\n};\n\nListItem.parameters = { argActions: sharedArgActions };\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 ListItemComponent from './ListItem';\nimport mdx from './ListItem.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { default as Checkbox } from '../Checkbox';\nimport { default as Radio } from '../Radio';\nimport { default as Toggle } from '../Toggle';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItem`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItem = () =>\n class ListItem extends lng.Component {\n static _template() {\n return {\n ListItem: {\n type: ListItemComponent\n }\n };\n }\n };\n\nListItem.storyName = 'ListItem';\n\nListItem.args = {\n title: 'List Item',\n shouldCollapse: false,\n description: 'Description',\n prefix: null,\n prefixLogo: 'none',\n suffix: null,\n suffixLogo: 'none',\n mode: 'focused'\n};\n\nListItem.argTypes = {\n ...createModeControl({ summaryValue: ListItem.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n prefixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst elementSet = {\n toggle: {\n type: Toggle,\n checked: true\n },\n radio: {\n type: Radio,\n checked: true\n },\n checkbox: {\n type: Checkbox,\n checked: true\n }\n};\n\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n if (prefix == null) {\n component.tag('ListItem').prefix = [];\n } else {\n component.tag('ListItem').prefix = elementSet[prefix];\n }\n },\n prefixLogo: (prefixLogo, component) => {\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\n },\n suffixLogo: (suffixLogo, component) => {\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\n },\n suffix: (suffix, component) => {\n if (suffix == null) {\n component.tag('ListItem').suffix = [];\n } else {\n component.tag('ListItem').suffix = elementSet[suffix];\n }\n }\n};\n\nListItem.parameters = { argActions: sharedArgActions };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ListItem": { @@ -33669,10 +33599,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var ListItem_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][2] + "/ListItem", + title: constants["a" /* CATEGORIES */][8] + "/ListItem", 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 ListItemComponent from './ListItem';\nimport mdx from './ListItem.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { default as Checkbox } from '../Checkbox';\nimport { default as Radio } from '../Radio';\nimport { default as Toggle } from '../Toggle';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItem`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItem = () =>\n class ListItem extends lng.Component {\n static _template() {\n return {\n ListItem: {\n type: ListItemComponent\n }\n };\n }\n };\n\nListItem.storyName = 'ListItem';\n\nListItem.args = {\n title: 'List Item',\n shouldCollapse: false,\n description: 'Description',\n prefix: null,\n prefixLogo: 'none',\n suffix: null,\n suffixLogo: 'none',\n mode: 'focused'\n};\n\nListItem.argTypes = {\n ...createModeControl({ summaryValue: ListItem.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n prefixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst elementSet = {\n toggle: {\n type: Toggle,\n checked: true\n },\n radio: {\n type: Radio,\n checked: true\n },\n checkbox: {\n type: Checkbox,\n checked: true\n }\n};\n\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n if (prefix == null) {\n component.tag('ListItem').prefix = [];\n } else {\n component.tag('ListItem').prefix = elementSet[prefix];\n }\n },\n prefixLogo: (prefixLogo, component) => {\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\n },\n suffixLogo: (suffixLogo, component) => {\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\n },\n suffix: (suffix, component) => {\n if (suffix == null) {\n component.tag('ListItem').suffix = [];\n } else {\n component.tag('ListItem').suffix = elementSet[suffix];\n }\n }\n};\n\nListItem.parameters = { argActions: sharedArgActions };\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 ListItemComponent from './ListItem';\nimport mdx from './ListItem.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { default as Checkbox } from '../Checkbox';\nimport { default as Radio } from '../Radio';\nimport { default as Toggle } from '../Toggle';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItem`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItem = () =>\n class ListItem extends lng.Component {\n static _template() {\n return {\n ListItem: {\n type: ListItemComponent\n }\n };\n }\n };\n\nListItem.storyName = 'ListItem';\n\nListItem.args = {\n title: 'List Item',\n shouldCollapse: false,\n description: 'Description',\n prefix: null,\n prefixLogo: 'none',\n suffix: null,\n suffixLogo: 'none',\n mode: 'focused'\n};\n\nListItem.argTypes = {\n ...createModeControl({ summaryValue: ListItem.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\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 shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n prefix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the left of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n prefixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffix: {\n control: 'radio',\n options: [null, 'toggle', 'radio', 'checkbox'],\n description: 'Lightning components to be placed to the right of the title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n suffixLogo: {\n control: 'radio',\n options: ['none', 'xfinity'],\n description:\n 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\n\nconst logoSet = {\n none: null,\n xfinity: xfinity\n};\n\nconst elementSet = {\n toggle: {\n type: Toggle,\n checked: true\n },\n radio: {\n type: Radio,\n checked: true\n },\n checkbox: {\n type: Checkbox,\n checked: true\n }\n};\n\nconst sharedArgActions = {\n prefix: (prefix, component) => {\n if (prefix == null) {\n component.tag('ListItem').prefix = [];\n } else {\n component.tag('ListItem').prefix = elementSet[prefix];\n }\n },\n prefixLogo: (prefixLogo, component) => {\n component.tag('ListItem').prefixLogo = logoSet[prefixLogo];\n },\n suffixLogo: (suffixLogo, component) => {\n component.tag('ListItem').suffixLogo = logoSet[suffixLogo];\n },\n suffix: (suffix, component) => {\n if (suffix == null) {\n component.tag('ListItem').suffix = [];\n } else {\n component.tag('ListItem').suffix = elementSet[suffix];\n }\n }\n};\n\nListItem.parameters = { argActions: sharedArgActions };\n", "locationsMap": { "list-item": { "startLoc": { @@ -34378,7 +34308,7 @@ function MDXContent(_ref) { }, "import { ListItemPicker } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n ListItemPicker: {\n type: ListItemPicker,\n title: 'Title',\n description: 'Description'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "controls-listitempicker--list-item-picker", + id: "components-listitempicker--list-item-picker", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -34388,7 +34318,7 @@ function MDXContent(_ref) { parentName: "p" }, "ListItemPicker"), " has the same properties as the ones listed in ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/controls-listitem--list-item" + "href": "?path=/docs/components-listitem--list-item" }, "ListItem"), " in addition to a couple listed below:"), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { parentName: "table" }, Object(esm["b" /* mdx */])("tr", { @@ -34568,7 +34498,7 @@ function ListItemPicker_stories_getPrototypeOf(o) { ListItemPicker_stories_getPr /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ListItemPickerComponent } from './ListItemPicker';\\nimport mdx from './ListItemPicker.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ListItemPicker`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemPicker = args =>\\n class ListItemPicker extends lng.Component {\\n static _template() {\\n return {\\n ListItemPicker: {\\n type: ListItemPickerComponent,\\n options: args.options\\n }\\n };\\n }\\n };\\n\\nListItemPicker.storyName = 'ListItemPicker';\\n\\nListItemPicker.args = {\\n title: 'List Item',\\n options: ['Description1', 'Description2', 'Description3'],\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemPicker.argTypes = {\\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n options: {\\n control: 'object',\\n description: 'List of selectable options',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ListItemPicker\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ListItemPickerComponent } from './ListItemPicker';\nimport mdx from './ListItemPicker.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItemPicker`,\n 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 { default as ListItemPickerComponent } from './ListItemPicker';\\nimport mdx from './ListItemPicker.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ListItemPicker`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemPicker = args =>\\n class ListItemPicker extends lng.Component {\\n static _template() {\\n return {\\n ListItemPicker: {\\n type: ListItemPickerComponent,\\n options: args.options\\n }\\n };\\n }\\n };\\n\\nListItemPicker.storyName = 'ListItemPicker';\\n\\nListItemPicker.args = {\\n title: 'List Item',\\n options: ['Description1', 'Description2', 'Description3'],\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemPicker.argTypes = {\\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n options: {\\n control: 'object',\\n description: 'List of selectable options',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\",\"locationsMap\":{\"list-item-picker\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ListItemPicker = args =>\n class ListItemPicker extends lng.Component {\n static _template() {\n return {\n ListItemPicker: {\n type: ListItemPickerComponent,\n options: args.options\n }\n };\n }\n };\n\nListItemPicker.storyName = 'ListItemPicker';\n\nListItemPicker.args = {\n title: 'List Item',\n options: ['Description1', 'Description2', 'Description3'],\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemPicker.argTypes = {\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n options: {\n control: 'object',\n description: 'List of selectable options',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ListItemPickerComponent } from './ListItemPicker';\\nimport mdx from './ListItemPicker.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ListItemPicker`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemPicker = args =>\\n class ListItemPicker extends lng.Component {\\n static _template() {\\n return {\\n ListItemPicker: {\\n type: ListItemPickerComponent,\\n options: args.options\\n }\\n };\\n }\\n };\\n\\nListItemPicker.storyName = 'ListItemPicker';\\n\\nListItemPicker.args = {\\n title: 'List Item',\\n options: ['Description1', 'Description2', 'Description3'],\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemPicker.argTypes = {\\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n options: {\\n control: 'object',\\n description: 'List of selectable options',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ListItemPicker\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ListItemPickerComponent } from './ListItemPicker';\nimport mdx from './ListItemPicker.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItemPicker`,\n 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 { default as ListItemPickerComponent } from './ListItemPicker';\\nimport mdx from './ListItemPicker.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ListItemPicker`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemPicker = args =>\\n class ListItemPicker extends lng.Component {\\n static _template() {\\n return {\\n ListItemPicker: {\\n type: ListItemPickerComponent,\\n options: args.options\\n }\\n };\\n }\\n };\\n\\nListItemPicker.storyName = 'ListItemPicker';\\n\\nListItemPicker.args = {\\n title: 'List Item',\\n options: ['Description1', 'Description2', 'Description3'],\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemPicker.argTypes = {\\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n options: {\\n control: 'object',\\n description: 'List of selectable options',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\",\"locationsMap\":{\"list-item-picker\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ListItemPicker = args =>\n class ListItemPicker extends lng.Component {\n static _template() {\n return {\n ListItemPicker: {\n type: ListItemPickerComponent,\n options: args.options\n }\n };\n }\n };\n\nListItemPicker.storyName = 'ListItemPicker';\n\nListItemPicker.args = {\n title: 'List Item',\n options: ['Description1', 'Description2', 'Description3'],\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemPicker.argTypes = {\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n options: {\n control: 'object',\n description: 'List of selectable options',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ListItemPicker": { @@ -34594,7 +34524,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ListItemPickerComponent } from './ListItemPicker';\nimport mdx from './ListItemPicker.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItemPicker`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemPicker = args =>\n class ListItemPicker extends lng.Component {\n static _template() {\n return {\n ListItemPicker: {\n type: ListItemPickerComponent,\n options: args.options\n }\n };\n }\n };\n\nListItemPicker.storyName = 'ListItemPicker';\n\nListItemPicker.args = {\n title: 'List Item',\n options: ['Description1', 'Description2', 'Description3'],\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemPicker.argTypes = {\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n options: {\n control: 'object',\n description: 'List of selectable options',\n table: { defaultValue: { summary: 'undefined' } }\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 { default as ListItemPickerComponent } from './ListItemPicker';\nimport mdx from './ListItemPicker.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItemPicker`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemPicker = args =>\n class ListItemPicker extends lng.Component {\n static _template() {\n return {\n ListItemPicker: {\n type: ListItemPickerComponent,\n options: args.options\n }\n };\n }\n };\n\nListItemPicker.storyName = 'ListItemPicker';\n\nListItemPicker.args = {\n title: 'List Item',\n options: ['Description1', 'Description2', 'Description3'],\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemPicker.argTypes = {\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n options: {\n control: 'object',\n description: 'List of selectable options',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ListItemPicker": { @@ -34641,10 +34571,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var ListItemPicker_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][2] + "/ListItemPicker", + title: constants["a" /* CATEGORIES */][8] + "/ListItemPicker", 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 { default as ListItemPickerComponent } from './ListItemPicker';\nimport mdx from './ListItemPicker.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItemPicker`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemPicker = args =>\n class ListItemPicker extends lng.Component {\n static _template() {\n return {\n ListItemPicker: {\n type: ListItemPickerComponent,\n options: args.options\n }\n };\n }\n };\n\nListItemPicker.storyName = 'ListItemPicker';\n\nListItemPicker.args = {\n title: 'List Item',\n options: ['Description1', 'Description2', 'Description3'],\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemPicker.argTypes = {\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n options: {\n control: 'object',\n description: 'List of selectable options',\n table: { defaultValue: { summary: 'undefined' } }\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 { default as ListItemPickerComponent } from './ListItemPicker';\nimport mdx from './ListItemPicker.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItemPicker`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemPicker = args =>\n class ListItemPicker extends lng.Component {\n static _template() {\n return {\n ListItemPicker: {\n type: ListItemPickerComponent,\n options: args.options\n }\n };\n }\n };\n\nListItemPicker.storyName = 'ListItemPicker';\n\nListItemPicker.args = {\n title: 'List Item',\n options: ['Description1', 'Description2', 'Description3'],\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemPicker.argTypes = {\n ...createModeControl({ summaryValue: ListItemPicker.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n },\n options: {\n control: 'object',\n description: 'List of selectable options',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n", "locationsMap": { "list-item-picker": { "startLoc": { @@ -35378,7 +35308,7 @@ function MDXContent(_ref) { }, "import { ListItemSlider } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n ListItemSlider: {\n type: ListItemSlider,\n title: 'List Item',\n value: 50\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "controls-listitemslider--list-item-slider", + id: "components-listitemslider--list-item-slider", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -35424,7 +35354,7 @@ function MDXContent(_ref) { "align": null }, "object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/elements-slider--basic" + "href": "?path=/docs/components-slider--basic" }, "Slider component"))), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { @@ -35534,7 +35464,7 @@ function ListItemSlider_stories_getPrototypeOf(o) { ListItemSlider_stories_getPr /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ListItemSliderComponent } from './ListItemSlider';\\nimport mdx from './ListItemSlider.mdx';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ListItemSlider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemSlider = () =>\\n class ListItemSlider extends lng.Component {\\n static _template() {\\n return {\\n ListItemSlider: {\\n type: ListItemSliderComponent\\n }\\n };\\n }\\n };\\n\\nListItemSlider.storyName = 'ListItemSlider';\\n\\nListItemSlider.args = {\\n title: 'List Item',\\n value: 50,\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemSlider.argTypes = {\\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n value: {\\n control: 'number',\\n description: 'Current slider value',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nListItemSlider.argActions = {\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'ListItemSlider',\\n baseStory: ListItemSlider,\\n subStory: SliderStory,\\n targetProperty: 'slider',\\n include: ['min', 'max', 'step']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ListItemSlider\":{\"startLoc\":{\"col\":30,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ListItemSliderComponent } from './ListItemSlider';\nimport mdx from './ListItemSlider.mdx';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItemSlider`,\n 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 { default as ListItemSliderComponent } from './ListItemSlider';\\nimport mdx from './ListItemSlider.mdx';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[2]}/ListItemSlider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemSlider = () =>\\n class ListItemSlider extends lng.Component {\\n static _template() {\\n return {\\n ListItemSlider: {\\n type: ListItemSliderComponent\\n }\\n };\\n }\\n };\\n\\nListItemSlider.storyName = 'ListItemSlider';\\n\\nListItemSlider.args = {\\n title: 'List Item',\\n value: 50,\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemSlider.argTypes = {\\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n value: {\\n control: 'number',\\n description: 'Current slider value',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nListItemSlider.argActions = {\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'ListItemSlider',\\n baseStory: ListItemSlider,\\n subStory: SliderStory,\\n targetProperty: 'slider',\\n include: ['min', 'max', 'step']\\n});\\n\",\"locationsMap\":{\"list-item-slider\":{\"startLoc\":{\"col\":30,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ListItemSlider = () =>\n class ListItemSlider extends lng.Component {\n static _template() {\n return {\n ListItemSlider: {\n type: ListItemSliderComponent\n }\n };\n }\n };\n\nListItemSlider.storyName = 'ListItemSlider';\n\nListItemSlider.args = {\n title: 'List Item',\n value: 50,\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemSlider.argTypes = {\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n value: {\n control: 'number',\n description: 'Current slider value',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nListItemSlider.argActions = {\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\n }\n};\n\ngenerateSubStory({\n componentName: 'ListItemSlider',\n baseStory: ListItemSlider,\n subStory: SliderStory,\n targetProperty: 'slider',\n include: ['min', 'max', 'step']\n});\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ListItemSliderComponent } from './ListItemSlider';\\nimport mdx from './ListItemSlider.mdx';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ListItemSlider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemSlider = () =>\\n class ListItemSlider extends lng.Component {\\n static _template() {\\n return {\\n ListItemSlider: {\\n type: ListItemSliderComponent\\n }\\n };\\n }\\n };\\n\\nListItemSlider.storyName = 'ListItemSlider';\\n\\nListItemSlider.args = {\\n title: 'List Item',\\n value: 50,\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemSlider.argTypes = {\\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n value: {\\n control: 'number',\\n description: 'Current slider value',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nListItemSlider.argActions = {\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'ListItemSlider',\\n baseStory: ListItemSlider,\\n subStory: SliderStory,\\n targetProperty: 'slider',\\n include: ['min', 'max', 'step']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ListItemSlider\":{\"startLoc\":{\"col\":30,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ListItemSliderComponent } from './ListItemSlider';\nimport mdx from './ListItemSlider.mdx';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItemSlider`,\n 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 { default as ListItemSliderComponent } from './ListItemSlider';\\nimport mdx from './ListItemSlider.mdx';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ListItemSlider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ListItemSlider = () =>\\n class ListItemSlider extends lng.Component {\\n static _template() {\\n return {\\n ListItemSlider: {\\n type: ListItemSliderComponent\\n }\\n };\\n }\\n };\\n\\nListItemSlider.storyName = 'ListItemSlider';\\n\\nListItemSlider.args = {\\n title: 'List Item',\\n value: 50,\\n shouldCollapse: false,\\n mode: 'focused'\\n};\\n\\nListItemSlider.argTypes = {\\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n value: {\\n control: 'number',\\n description: 'Current slider value',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n shouldCollapse: {\\n control: 'boolean',\\n description:\\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nListItemSlider.argActions = {\\n shouldCollapse: (shouldCollapse, component) => {\\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'ListItemSlider',\\n baseStory: ListItemSlider,\\n subStory: SliderStory,\\n targetProperty: 'slider',\\n include: ['min', 'max', 'step']\\n});\\n\",\"locationsMap\":{\"list-item-slider\":{\"startLoc\":{\"col\":30,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":30,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ListItemSlider = () =>\n class ListItemSlider extends lng.Component {\n static _template() {\n return {\n ListItemSlider: {\n type: ListItemSliderComponent\n }\n };\n }\n };\n\nListItemSlider.storyName = 'ListItemSlider';\n\nListItemSlider.args = {\n title: 'List Item',\n value: 50,\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemSlider.argTypes = {\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n value: {\n control: 'number',\n description: 'Current slider value',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nListItemSlider.argActions = {\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\n }\n};\n\ngenerateSubStory({\n componentName: 'ListItemSlider',\n baseStory: ListItemSlider,\n subStory: SliderStory,\n targetProperty: 'slider',\n include: ['min', 'max', 'step']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ListItemSlider": { @@ -35560,7 +35490,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ListItemSliderComponent } from './ListItemSlider';\nimport mdx from './ListItemSlider.mdx';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItemSlider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemSlider = () =>\n class ListItemSlider extends lng.Component {\n static _template() {\n return {\n ListItemSlider: {\n type: ListItemSliderComponent\n }\n };\n }\n };\n\nListItemSlider.storyName = 'ListItemSlider';\n\nListItemSlider.args = {\n title: 'List Item',\n value: 50,\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemSlider.argTypes = {\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n value: {\n control: 'number',\n description: 'Current slider value',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nListItemSlider.argActions = {\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\n }\n};\n\ngenerateSubStory({\n componentName: 'ListItemSlider',\n baseStory: ListItemSlider,\n subStory: SliderStory,\n targetProperty: 'slider',\n include: ['min', 'max', 'step']\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 { default as ListItemSliderComponent } from './ListItemSlider';\nimport mdx from './ListItemSlider.mdx';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItemSlider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemSlider = () =>\n class ListItemSlider extends lng.Component {\n static _template() {\n return {\n ListItemSlider: {\n type: ListItemSliderComponent\n }\n };\n }\n };\n\nListItemSlider.storyName = 'ListItemSlider';\n\nListItemSlider.args = {\n title: 'List Item',\n value: 50,\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemSlider.argTypes = {\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n value: {\n control: 'number',\n description: 'Current slider value',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nListItemSlider.argActions = {\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\n }\n};\n\ngenerateSubStory({\n componentName: 'ListItemSlider',\n baseStory: ListItemSlider,\n subStory: SliderStory,\n targetProperty: 'slider',\n include: ['min', 'max', 'step']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ListItemSlider": { @@ -35608,10 +35538,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var ListItemSlider_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][2] + "/ListItemSlider", + title: constants["a" /* CATEGORIES */][8] + "/ListItemSlider", 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 { default as ListItemSliderComponent } from './ListItemSlider';\nimport mdx from './ListItemSlider.mdx';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[2]}/ListItemSlider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemSlider = () =>\n class ListItemSlider extends lng.Component {\n static _template() {\n return {\n ListItemSlider: {\n type: ListItemSliderComponent\n }\n };\n }\n };\n\nListItemSlider.storyName = 'ListItemSlider';\n\nListItemSlider.args = {\n title: 'List Item',\n value: 50,\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemSlider.argTypes = {\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n value: {\n control: 'number',\n description: 'Current slider value',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nListItemSlider.argActions = {\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\n }\n};\n\ngenerateSubStory({\n componentName: 'ListItemSlider',\n baseStory: ListItemSlider,\n subStory: SliderStory,\n targetProperty: 'slider',\n include: ['min', 'max', 'step']\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 { default as ListItemSliderComponent } from './ListItemSlider';\nimport mdx from './ListItemSlider.mdx';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { Basic as SliderStory } from '../Slider/Slider.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ListItemSlider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ListItemSlider = () =>\n class ListItemSlider extends lng.Component {\n static _template() {\n return {\n ListItemSlider: {\n type: ListItemSliderComponent\n }\n };\n }\n };\n\nListItemSlider.storyName = 'ListItemSlider';\n\nListItemSlider.args = {\n title: 'List Item',\n value: 50,\n shouldCollapse: false,\n mode: 'focused'\n};\n\nListItemSlider.argTypes = {\n ...createModeControl({ summaryValue: ListItemSlider.args.mode }),\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n value: {\n control: 'number',\n description: 'Current slider value',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n shouldCollapse: {\n control: 'boolean',\n description:\n 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nListItemSlider.argActions = {\n shouldCollapse: (shouldCollapse, component) => {\n component.tag('ListItemSlider').shouldCollapse = shouldCollapse;\n }\n};\n\ngenerateSubStory({\n componentName: 'ListItemSlider',\n baseStory: ListItemSlider,\n subStory: SliderStory,\n targetProperty: 'slider',\n include: ['min', 'max', 'step']\n});\n", "locationsMap": { "list-item-slider": { "startLoc": { @@ -36283,7 +36213,7 @@ function MDXContent(_ref) { }, "import { Marquee } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: Marquee,\n w: 350,\n h: 50,\n title: {\n text: 'This is a scrolling Marquee component for long text',\n ...TYPESCALE.headline2,\n textColor: getHexColor(COLORS_TEXT.light),\n maxLines: 1\n },\n autoStart: true\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["e" /* Preview */], { mdxType: "Preview" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "text-marquee--marquee", + id: "components-marquee--marquee", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -36541,7 +36471,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport MarqueeComponent from '.';\\nimport InlineContent from '../InlineContent';\\nimport mdx from './Marquee.mdx';\\nimport { context } from '../../globals';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[256]}/Marquee`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Marquee = args =>\\n class Marquee extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 350,\\n h: 180,\\n title: {\\n text: args.title,\\n ...context.theme.typography.body1,\\n maxLines: 1\\n }\\n }\\n };\\n }\\n };\\n\\nMarquee.args = {\\n title: 'This is a scrolling Marquee component for long text',\\n autoStart: true,\\n centerAlign: false,\\n repeat: -1,\\n delay: 1.5\\n};\\n\\nMarquee.argTypes = {\\n title: {\\n control: 'text',\\n description: 'An object matching Lightning text object',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n autoStart: {\\n control: 'boolean',\\n description: 'Start scrolling on initiation',\\n remount: true,\\n table: { defaultValue: { summary: false } }\\n },\\n color: {\\n name: 'color',\\n control: 'color',\\n description: 'Set color of text',\\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\\n },\\n repeat: {\\n control: { type: 'number', min: -1 },\\n description: 'Number of times to repeat scrolling',\\n remount: true,\\n table: { defaultValue: { summary: -1 } }\\n },\\n delay: {\\n control: { type: 'number', min: 1.5 },\\n description: 'Delay before scrolling starts',\\n remount: true,\\n table: { defaultValue: { summary: 1.5 } }\\n },\\n centerAlign: {\\n control: 'boolean',\\n description:\\n 'Will center the entire texture if the width of the content is less than the container',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nMarquee.parameters = {\\n argActions: {}\\n};\\n\\nexport const CenteredText = () =>\\n class CenteredText extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 400,\\n h: 50,\\n title: {\\n text: 'No scroll center',\\n textAlign: 'center'\\n },\\n autoStart: true,\\n delay: 1\\n },\\n InlineContent: {\\n type: InlineContent,\\n x: 200,\\n alpha: 0.001,\\n justify: 'flex-start',\\n content: [\\n 'Centered',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n ' InlineContent'\\n ],\\n rtt: true\\n },\\n MarqueeInlineContent: {\\n type: MarqueeComponent,\\n y: 100,\\n w: 400,\\n h: 180,\\n centerAlign: true,\\n alpha: 0,\\n autoStart: true,\\n delay: 1\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('MarqueeInlineContent').contentTexture =\\n this.tag('InlineContent').getTexture();\\n this.tag('MarqueeInlineContent').alpha = 1;\\n }\\n };\\n\\nCenteredText.args = {};\\nCenteredText.argTypes = {};\\nCenteredText.parameters = {\\n argActions: {}\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Marquee\":{\"startLoc\":{\"col\":23,\"line\":36},\"endLoc\":{\"col\":3,\"line\":52},\"startBody\":{\"col\":23,\"line\":36},\"endBody\":{\"col\":3,\"line\":52}},\"CenteredText\":{\"startLoc\":{\"col\":28,\"line\":104},\"endLoc\":{\"col\":3,\"line\":152},\"startBody\":{\"col\":28,\"line\":104},\"endBody\":{\"col\":3,\"line\":152}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport MarqueeComponent from '.';\nimport InlineContent from '../InlineContent';\nimport mdx from './Marquee.mdx';\nimport { context } from '../../globals';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/Marquee`,\n 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';\\n\\nimport MarqueeComponent from '.';\\nimport InlineContent from '../InlineContent';\\nimport mdx from './Marquee.mdx';\\nimport { context } from '../../globals';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[256]}/Marquee`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Marquee = args =>\\n class Marquee extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 350,\\n h: 180,\\n title: {\\n text: args.title,\\n ...context.theme.typography.body1,\\n maxLines: 1\\n }\\n }\\n };\\n }\\n };\\n\\nMarquee.args = {\\n title: 'This is a scrolling Marquee component for long text',\\n autoStart: true,\\n centerAlign: false,\\n repeat: -1,\\n delay: 1.5\\n};\\n\\nMarquee.argTypes = {\\n title: {\\n control: 'text',\\n description: 'An object matching Lightning text object',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n autoStart: {\\n control: 'boolean',\\n description: 'Start scrolling on initiation',\\n remount: true,\\n table: { defaultValue: { summary: false } }\\n },\\n color: {\\n name: 'color',\\n control: 'color',\\n description: 'Set color of text',\\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\\n },\\n repeat: {\\n control: { type: 'number', min: -1 },\\n description: 'Number of times to repeat scrolling',\\n remount: true,\\n table: { defaultValue: { summary: -1 } }\\n },\\n delay: {\\n control: { type: 'number', min: 1.5 },\\n description: 'Delay before scrolling starts',\\n remount: true,\\n table: { defaultValue: { summary: 1.5 } }\\n },\\n centerAlign: {\\n control: 'boolean',\\n description:\\n 'Will center the entire texture if the width of the content is less than the container',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nMarquee.parameters = {\\n argActions: {}\\n};\\n\\nexport const CenteredText = () =>\\n class CenteredText extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 400,\\n h: 50,\\n title: {\\n text: 'No scroll center',\\n textAlign: 'center'\\n },\\n autoStart: true,\\n delay: 1\\n },\\n InlineContent: {\\n type: InlineContent,\\n x: 200,\\n alpha: 0.001,\\n justify: 'flex-start',\\n content: [\\n 'Centered',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n ' InlineContent'\\n ],\\n rtt: true\\n },\\n MarqueeInlineContent: {\\n type: MarqueeComponent,\\n y: 100,\\n w: 400,\\n h: 180,\\n centerAlign: true,\\n alpha: 0,\\n autoStart: true,\\n delay: 1\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('MarqueeInlineContent').contentTexture =\\n this.tag('InlineContent').getTexture();\\n this.tag('MarqueeInlineContent').alpha = 1;\\n }\\n };\\n\\nCenteredText.args = {};\\nCenteredText.argTypes = {};\\nCenteredText.parameters = {\\n argActions: {}\\n};\\n\",\"locationsMap\":{\"marquee\":{\"startLoc\":{\"col\":23,\"line\":36},\"endLoc\":{\"col\":3,\"line\":52},\"startBody\":{\"col\":23,\"line\":36},\"endBody\":{\"col\":3,\"line\":52}},\"centered-text\":{\"startLoc\":{\"col\":28,\"line\":104},\"endLoc\":{\"col\":3,\"line\":152},\"startBody\":{\"col\":28,\"line\":104},\"endBody\":{\"col\":3,\"line\":152}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Marquee = args =>\n class Marquee extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 350,\n h: 180,\n title: {\n text: args.title,\n ...context.theme.typography.body1,\n maxLines: 1\n }\n }\n };\n }\n };;\n\nMarquee.args = {\n title: 'This is a scrolling Marquee component for long text',\n autoStart: true,\n centerAlign: false,\n repeat: -1,\n delay: 1.5\n};\n\nMarquee.argTypes = {\n title: {\n control: 'text',\n description: 'An object matching Lightning text object',\n table: { defaultValue: { summary: 'undefined' } }\n },\n autoStart: {\n control: 'boolean',\n description: 'Start scrolling on initiation',\n remount: true,\n table: { defaultValue: { summary: false } }\n },\n color: {\n name: 'color',\n control: 'color',\n description: 'Set color of text',\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\n },\n repeat: {\n control: { type: 'number', min: -1 },\n description: 'Number of times to repeat scrolling',\n remount: true,\n table: { defaultValue: { summary: -1 } }\n },\n delay: {\n control: { type: 'number', min: 1.5 },\n description: 'Delay before scrolling starts',\n remount: true,\n table: { defaultValue: { summary: 1.5 } }\n },\n centerAlign: {\n control: 'boolean',\n description:\n 'Will center the entire texture if the width of the content is less than the container',\n table: { defaultValue: { summary: false } }\n }\n};\n\nMarquee.parameters = {\n argActions: {}\n};\n\nexport const CenteredText = () =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n justify: 'flex-start',\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n };\n\nCenteredText.args = {};\nCenteredText.argTypes = {};\nCenteredText.parameters = {\n argActions: {}\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport MarqueeComponent from '.';\\nimport InlineContent from '../InlineContent';\\nimport mdx from './Marquee.mdx';\\nimport { context } from '../../globals';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Marquee`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Marquee = args =>\\n class Marquee extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 350,\\n h: 180,\\n title: {\\n text: args.title,\\n ...context.theme.typography.body1,\\n maxLines: 1\\n }\\n }\\n };\\n }\\n };\\n\\nMarquee.args = {\\n title: 'This is a scrolling Marquee component for long text',\\n autoStart: true,\\n centerAlign: false,\\n repeat: -1,\\n delay: 1.5\\n};\\n\\nMarquee.argTypes = {\\n title: {\\n control: 'text',\\n description: 'An object matching Lightning text object',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n autoStart: {\\n control: 'boolean',\\n description: 'Start scrolling on initiation',\\n remount: true,\\n table: { defaultValue: { summary: false } }\\n },\\n color: {\\n name: 'color',\\n control: 'color',\\n description: 'Set color of text',\\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\\n },\\n repeat: {\\n control: { type: 'number', min: -1 },\\n description: 'Number of times to repeat scrolling',\\n remount: true,\\n table: { defaultValue: { summary: -1 } }\\n },\\n delay: {\\n control: { type: 'number', min: 1.5 },\\n description: 'Delay before scrolling starts',\\n remount: true,\\n table: { defaultValue: { summary: 1.5 } }\\n },\\n centerAlign: {\\n control: 'boolean',\\n description:\\n 'Will center the entire texture if the width of the content is less than the container',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nMarquee.parameters = {\\n argActions: {}\\n};\\n\\nexport const CenteredText = () =>\\n class CenteredText extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 400,\\n h: 50,\\n title: {\\n text: 'No scroll center',\\n textAlign: 'center'\\n },\\n autoStart: true,\\n delay: 1\\n },\\n InlineContent: {\\n type: InlineContent,\\n x: 200,\\n alpha: 0.001,\\n content: [\\n 'Centered',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n ' InlineContent'\\n ],\\n rtt: true\\n },\\n MarqueeInlineContent: {\\n type: MarqueeComponent,\\n y: 100,\\n w: 400,\\n h: 180,\\n centerAlign: true,\\n alpha: 0,\\n autoStart: true,\\n delay: 1\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('MarqueeInlineContent').contentTexture =\\n this.tag('InlineContent').getTexture();\\n this.tag('MarqueeInlineContent').alpha = 1;\\n }\\n };\\n\\nCenteredText.args = {};\\nCenteredText.argTypes = {};\\nCenteredText.parameters = {\\n argActions: {}\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Marquee\":{\"startLoc\":{\"col\":23,\"line\":36},\"endLoc\":{\"col\":3,\"line\":52},\"startBody\":{\"col\":23,\"line\":36},\"endBody\":{\"col\":3,\"line\":52}},\"CenteredText\":{\"startLoc\":{\"col\":28,\"line\":104},\"endLoc\":{\"col\":3,\"line\":151},\"startBody\":{\"col\":28,\"line\":104},\"endBody\":{\"col\":3,\"line\":151}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport MarqueeComponent from '.';\nimport InlineContent from '../InlineContent';\nimport mdx from './Marquee.mdx';\nimport { context } from '../../globals';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Marquee`,\n 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';\\n\\nimport MarqueeComponent from '.';\\nimport InlineContent from '../InlineContent';\\nimport mdx from './Marquee.mdx';\\nimport { context } from '../../globals';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Marquee`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Marquee = args =>\\n class Marquee extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 350,\\n h: 180,\\n title: {\\n text: args.title,\\n ...context.theme.typography.body1,\\n maxLines: 1\\n }\\n }\\n };\\n }\\n };\\n\\nMarquee.args = {\\n title: 'This is a scrolling Marquee component for long text',\\n autoStart: true,\\n centerAlign: false,\\n repeat: -1,\\n delay: 1.5\\n};\\n\\nMarquee.argTypes = {\\n title: {\\n control: 'text',\\n description: 'An object matching Lightning text object',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n autoStart: {\\n control: 'boolean',\\n description: 'Start scrolling on initiation',\\n remount: true,\\n table: { defaultValue: { summary: false } }\\n },\\n color: {\\n name: 'color',\\n control: 'color',\\n description: 'Set color of text',\\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\\n },\\n repeat: {\\n control: { type: 'number', min: -1 },\\n description: 'Number of times to repeat scrolling',\\n remount: true,\\n table: { defaultValue: { summary: -1 } }\\n },\\n delay: {\\n control: { type: 'number', min: 1.5 },\\n description: 'Delay before scrolling starts',\\n remount: true,\\n table: { defaultValue: { summary: 1.5 } }\\n },\\n centerAlign: {\\n control: 'boolean',\\n description:\\n 'Will center the entire texture if the width of the content is less than the container',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nMarquee.parameters = {\\n argActions: {}\\n};\\n\\nexport const CenteredText = () =>\\n class CenteredText extends lng.Component {\\n static _template() {\\n return {\\n Marquee: {\\n type: MarqueeComponent,\\n w: 400,\\n h: 50,\\n title: {\\n text: 'No scroll center',\\n textAlign: 'center'\\n },\\n autoStart: true,\\n delay: 1\\n },\\n InlineContent: {\\n type: InlineContent,\\n x: 200,\\n alpha: 0.001,\\n content: [\\n 'Centered',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n ' InlineContent'\\n ],\\n rtt: true\\n },\\n MarqueeInlineContent: {\\n type: MarqueeComponent,\\n y: 100,\\n w: 400,\\n h: 180,\\n centerAlign: true,\\n alpha: 0,\\n autoStart: true,\\n delay: 1\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('MarqueeInlineContent').contentTexture =\\n this.tag('InlineContent').getTexture();\\n this.tag('MarqueeInlineContent').alpha = 1;\\n }\\n };\\n\\nCenteredText.args = {};\\nCenteredText.argTypes = {};\\nCenteredText.parameters = {\\n argActions: {}\\n};\\n\",\"locationsMap\":{\"marquee\":{\"startLoc\":{\"col\":23,\"line\":36},\"endLoc\":{\"col\":3,\"line\":52},\"startBody\":{\"col\":23,\"line\":36},\"endBody\":{\"col\":3,\"line\":52}},\"centered-text\":{\"startLoc\":{\"col\":28,\"line\":104},\"endLoc\":{\"col\":3,\"line\":151},\"startBody\":{\"col\":28,\"line\":104},\"endBody\":{\"col\":3,\"line\":151}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Marquee = args =>\n class Marquee extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 350,\n h: 180,\n title: {\n text: args.title,\n ...context.theme.typography.body1,\n maxLines: 1\n }\n }\n };\n }\n };;\n\nMarquee.args = {\n title: 'This is a scrolling Marquee component for long text',\n autoStart: true,\n centerAlign: false,\n repeat: -1,\n delay: 1.5\n};\n\nMarquee.argTypes = {\n title: {\n control: 'text',\n description: 'An object matching Lightning text object',\n table: { defaultValue: { summary: 'undefined' } }\n },\n autoStart: {\n control: 'boolean',\n description: 'Start scrolling on initiation',\n remount: true,\n table: { defaultValue: { summary: false } }\n },\n color: {\n name: 'color',\n control: 'color',\n description: 'Set color of text',\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\n },\n repeat: {\n control: { type: 'number', min: -1 },\n description: 'Number of times to repeat scrolling',\n remount: true,\n table: { defaultValue: { summary: -1 } }\n },\n delay: {\n control: { type: 'number', min: 1.5 },\n description: 'Delay before scrolling starts',\n remount: true,\n table: { defaultValue: { summary: 1.5 } }\n },\n centerAlign: {\n control: 'boolean',\n description:\n 'Will center the entire texture if the width of the content is less than the container',\n table: { defaultValue: { summary: false } }\n }\n};\n\nMarquee.parameters = {\n argActions: {}\n};\n\nexport const CenteredText = () =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n };\n\nCenteredText.args = {};\nCenteredText.argTypes = {};\nCenteredText.parameters = {\n argActions: {}\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Marquee": { @@ -36569,7 +36499,7 @@ var __LOCATIONS_MAP__ = { }, "endLoc": { "col": 3, - "line": 159 + "line": 158 }, "startBody": { "col": 28, @@ -36577,7 +36507,7 @@ var __LOCATIONS_MAP__ = { }, "endBody": { "col": 3, - "line": 159 + "line": 158 } } }; @@ -36585,7 +36515,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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';\n\nimport MarqueeComponent from '.';\nimport InlineContent from '../InlineContent';\nimport mdx from './Marquee.mdx';\nimport { context } from '../../globals';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/Marquee`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Marquee = args =>\n class Marquee extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 350,\n h: 180,\n title: {\n text: args.title,\n ...context.theme.typography.body1,\n maxLines: 1\n }\n }\n };\n }\n };\n\nMarquee.args = {\n title: 'This is a scrolling Marquee component for long text',\n autoStart: true,\n centerAlign: false,\n repeat: -1,\n delay: 1.5\n};\n\nMarquee.argTypes = {\n title: {\n control: 'text',\n description: 'An object matching Lightning text object',\n table: { defaultValue: { summary: 'undefined' } }\n },\n autoStart: {\n control: 'boolean',\n description: 'Start scrolling on initiation',\n remount: true,\n table: { defaultValue: { summary: false } }\n },\n color: {\n name: 'color',\n control: 'color',\n description: 'Set color of text',\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\n },\n repeat: {\n control: { type: 'number', min: -1 },\n description: 'Number of times to repeat scrolling',\n remount: true,\n table: { defaultValue: { summary: -1 } }\n },\n delay: {\n control: { type: 'number', min: 1.5 },\n description: 'Delay before scrolling starts',\n remount: true,\n table: { defaultValue: { summary: 1.5 } }\n },\n centerAlign: {\n control: 'boolean',\n description:\n 'Will center the entire texture if the width of the content is less than the container',\n table: { defaultValue: { summary: false } }\n }\n};\n\nMarquee.parameters = {\n argActions: {}\n};\n\nexport const CenteredText = () =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n justify: 'flex-start',\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n };\n\nCenteredText.args = {};\nCenteredText.argTypes = {};\nCenteredText.parameters = {\n argActions: {}\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';\n\nimport MarqueeComponent from '.';\nimport InlineContent from '../InlineContent';\nimport mdx from './Marquee.mdx';\nimport { context } from '../../globals';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Marquee`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Marquee = args =>\n class Marquee extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 350,\n h: 180,\n title: {\n text: args.title,\n ...context.theme.typography.body1,\n maxLines: 1\n }\n }\n };\n }\n };\n\nMarquee.args = {\n title: 'This is a scrolling Marquee component for long text',\n autoStart: true,\n centerAlign: false,\n repeat: -1,\n delay: 1.5\n};\n\nMarquee.argTypes = {\n title: {\n control: 'text',\n description: 'An object matching Lightning text object',\n table: { defaultValue: { summary: 'undefined' } }\n },\n autoStart: {\n control: 'boolean',\n description: 'Start scrolling on initiation',\n remount: true,\n table: { defaultValue: { summary: false } }\n },\n color: {\n name: 'color',\n control: 'color',\n description: 'Set color of text',\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\n },\n repeat: {\n control: { type: 'number', min: -1 },\n description: 'Number of times to repeat scrolling',\n remount: true,\n table: { defaultValue: { summary: -1 } }\n },\n delay: {\n control: { type: 'number', min: 1.5 },\n description: 'Delay before scrolling starts',\n remount: true,\n table: { defaultValue: { summary: 1.5 } }\n },\n centerAlign: {\n control: 'boolean',\n description:\n 'Will center the entire texture if the width of the content is less than the container',\n table: { defaultValue: { summary: false } }\n }\n};\n\nMarquee.parameters = {\n argActions: {}\n};\n\nexport const CenteredText = () =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n };\n\nCenteredText.args = {};\nCenteredText.argTypes = {};\nCenteredText.parameters = {\n argActions: {}\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Marquee": { @@ -36613,7 +36543,7 @@ var __LOCATIONS_MAP__ = { }, "endLoc": { "col": 3, - "line": 152 + "line": 151 }, "startBody": { "col": 28, @@ -36621,7 +36551,7 @@ var __LOCATIONS_MAP__ = { }, "endBody": { "col": 3, - "line": 152 + "line": 151 } } }; @@ -36651,10 +36581,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Marquee_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][256] + "/Marquee", + title: constants["a" /* CATEGORIES */][8] + "/Marquee", 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';\n\nimport MarqueeComponent from '.';\nimport InlineContent from '../InlineContent';\nimport mdx from './Marquee.mdx';\nimport { context } from '../../globals';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/Marquee`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Marquee = args =>\n class Marquee extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 350,\n h: 180,\n title: {\n text: args.title,\n ...context.theme.typography.body1,\n maxLines: 1\n }\n }\n };\n }\n };\n\nMarquee.args = {\n title: 'This is a scrolling Marquee component for long text',\n autoStart: true,\n centerAlign: false,\n repeat: -1,\n delay: 1.5\n};\n\nMarquee.argTypes = {\n title: {\n control: 'text',\n description: 'An object matching Lightning text object',\n table: { defaultValue: { summary: 'undefined' } }\n },\n autoStart: {\n control: 'boolean',\n description: 'Start scrolling on initiation',\n remount: true,\n table: { defaultValue: { summary: false } }\n },\n color: {\n name: 'color',\n control: 'color',\n description: 'Set color of text',\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\n },\n repeat: {\n control: { type: 'number', min: -1 },\n description: 'Number of times to repeat scrolling',\n remount: true,\n table: { defaultValue: { summary: -1 } }\n },\n delay: {\n control: { type: 'number', min: 1.5 },\n description: 'Delay before scrolling starts',\n remount: true,\n table: { defaultValue: { summary: 1.5 } }\n },\n centerAlign: {\n control: 'boolean',\n description:\n 'Will center the entire texture if the width of the content is less than the container',\n table: { defaultValue: { summary: false } }\n }\n};\n\nMarquee.parameters = {\n argActions: {}\n};\n\nexport const CenteredText = () =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n justify: 'flex-start',\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n };\n\nCenteredText.args = {};\nCenteredText.argTypes = {};\nCenteredText.parameters = {\n argActions: {}\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';\n\nimport MarqueeComponent from '.';\nimport InlineContent from '../InlineContent';\nimport mdx from './Marquee.mdx';\nimport { context } from '../../globals';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Marquee`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Marquee = args =>\n class Marquee extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 350,\n h: 180,\n title: {\n text: args.title,\n ...context.theme.typography.body1,\n maxLines: 1\n }\n }\n };\n }\n };\n\nMarquee.args = {\n title: 'This is a scrolling Marquee component for long text',\n autoStart: true,\n centerAlign: false,\n repeat: -1,\n delay: 1.5\n};\n\nMarquee.argTypes = {\n title: {\n control: 'text',\n description: 'An object matching Lightning text object',\n table: { defaultValue: { summary: 'undefined' } }\n },\n autoStart: {\n control: 'boolean',\n description: 'Start scrolling on initiation',\n remount: true,\n table: { defaultValue: { summary: false } }\n },\n color: {\n name: 'color',\n control: 'color',\n description: 'Set color of text',\n table: { defaultValue: { summary: 'theme.color.fillNeutral' } }\n },\n repeat: {\n control: { type: 'number', min: -1 },\n description: 'Number of times to repeat scrolling',\n remount: true,\n table: { defaultValue: { summary: -1 } }\n },\n delay: {\n control: { type: 'number', min: 1.5 },\n description: 'Delay before scrolling starts',\n remount: true,\n table: { defaultValue: { summary: 1.5 } }\n },\n centerAlign: {\n control: 'boolean',\n description:\n 'Will center the entire texture if the width of the content is less than the container',\n table: { defaultValue: { summary: false } }\n }\n};\n\nMarquee.parameters = {\n argActions: {}\n};\n\nexport const CenteredText = () =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n };\n\nCenteredText.args = {};\nCenteredText.argTypes = {};\nCenteredText.parameters = {\n argActions: {}\n};\n", "locationsMap": { "marquee": { "startLoc": { @@ -36681,7 +36611,7 @@ var __LOCATIONS_MAP__ = { }, "endLoc": { "col": 3, - "line": 152 + "line": 151 }, "startBody": { "col": 28, @@ -36689,7 +36619,7 @@ var __LOCATIONS_MAP__ = { }, "endBody": { "col": 3, - "line": 152 + "line": 151 } } } @@ -36838,7 +36768,6 @@ var Marquee_stories_CenteredText = function CenteredText() { type: InlineContent["a" /* default */], x: 200, alpha: 0.001, - justify: 'flex-start', content: ['Centered', { icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png', title: 'Rotten Tomatoes rating' @@ -36873,7 +36802,7 @@ Marquee_stories_Marquee.parameters = Object.assign({ }, Marquee_stories_Marquee.parameters); Marquee_stories_CenteredText.parameters = Object.assign({ storySource: { - source: "() =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n justify: 'flex-start',\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n }" + source: "() =>\n class CenteredText extends lng.Component {\n static _template() {\n return {\n Marquee: {\n type: MarqueeComponent,\n w: 400,\n h: 50,\n title: {\n text: 'No scroll center',\n textAlign: 'center'\n },\n autoStart: true,\n delay: 1\n },\n InlineContent: {\n type: InlineContent,\n x: 200,\n alpha: 0.001,\n content: [\n 'Centered',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n ' InlineContent'\n ],\n rtt: true\n },\n MarqueeInlineContent: {\n type: MarqueeComponent,\n y: 100,\n w: 400,\n h: 180,\n centerAlign: true,\n alpha: 0,\n autoStart: true,\n delay: 1\n }\n };\n }\n\n _init() {\n this.tag('MarqueeInlineContent').contentTexture =\n this.tag('InlineContent').getTexture();\n this.tag('MarqueeInlineContent').alpha = 1;\n }\n }" } }, Marquee_stories_CenteredText.parameters); @@ -37306,8 +37235,7 @@ var MetadataBase_MetadataBase = /*#__PURE__*/function (_Base) { content: this.subtitle, style: { textStyle: this.style.subtitleTextStyle - }, - justify: 'flex-start' + } }); if (this._Subtitle.finalW > this._textW()) { this._SubtitleWrapper.patch({ @@ -37601,7 +37529,7 @@ function MDXContent(_ref) { }, "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: [\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")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-metadatabase--metadata-base", + id: "components-metadatabase--metadata-base", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -37898,7 +37826,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 '.';\\nimport mdx from './MetadataBase.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataBase`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\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: [\\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: 'object',\\n description: 'subtitle 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\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataBase\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataBaseComponent } from '.';\nimport mdx from './MetadataBase.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataBase`,\n 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 '.';\\nimport mdx from './MetadataBase.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataBase`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\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: [\\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: 'object',\\n description: 'subtitle 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\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\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: [\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: 'object',\n description: 'subtitle 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 \n // @ts-nocheck\n // @ts-ignore\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 '.';\\nimport mdx from './MetadataBase.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataBase`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\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: [\\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: 'object',\\n description: 'subtitle 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\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataBase\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataBaseComponent } from '.';\nimport mdx from './MetadataBase.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataBase`,\n 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 '.';\\nimport mdx from './MetadataBase.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataBase`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\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: [\\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: 'object',\\n description: 'subtitle 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\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\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: [\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: 'object',\n description: 'subtitle 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-ignore var __LOCATIONS_MAP__ = { "MetadataBase": { @@ -37924,7 +37852,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 '.';\nimport mdx from './MetadataBase.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataBase`,\n parameters: {\n docs: {\n page: mdx\n }\n }\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: [\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: 'object',\n description: 'subtitle 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 '.';\nimport mdx from './MetadataBase.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataBase`,\n parameters: {\n docs: {\n page: mdx\n }\n }\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: [\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: 'object',\n description: 'subtitle 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-ignore var __LOCATIONS_MAP__ = { "MetadataBase": { @@ -37974,10 +37902,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var MetadataBase_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][32] + "/MetadataBase", + title: constants["a" /* CATEGORIES */][8] + "/MetadataBase", 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 '.';\nimport mdx from './MetadataBase.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataBase`,\n parameters: {\n docs: {\n page: mdx\n }\n }\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: [\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: 'object',\n description: 'subtitle 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 '.';\nimport mdx from './MetadataBase.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataBase`,\n parameters: {\n docs: {\n page: mdx\n }\n }\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: [\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: 'object',\n description: 'subtitle 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": { @@ -38308,7 +38236,7 @@ function MDXContent(_ref) { }, "import { MetadataCard } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n MetadataCard: {\n type: MetadataCard,\n w: args.w,\n title: args.title,\n subtitle: args.subtitle,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-metadatacard--metadata-card", + id: "components-metadatacard--metadata-card", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -38605,7 +38533,7 @@ function MetadataCard_stories_getPrototypeOf(o) { MetadataCard_stories_getProtot /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 utils from '../../utils';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as MetadataCardComponent } from '.';\\nimport mdx from './MetadataCard.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataCard`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCard = () =>\\n class MetadataCard extends lng.Component {\\n static _template() {\\n return {\\n MetadataCard: {\\n type: MetadataCardComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCard.storyName = 'MetadataCard';\\nMetadataCard.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: utils.getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataCard.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 400 }\\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: 'Subtitle content',\\n table: {\\n defaultValue: {\\n summary: 'undefined'\\n }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'Description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n options: ['none', circle],\\n control: 'select',\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'none' }\\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 options: ['right', 'left'],\\n control: 'select',\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataCard\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport utils from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataCardComponent } from '.';\nimport mdx from './MetadataCard.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataCard`,\n 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 utils from '../../utils';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as MetadataCardComponent } from '.';\\nimport mdx from './MetadataCard.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataCard`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCard = () =>\\n class MetadataCard extends lng.Component {\\n static _template() {\\n return {\\n MetadataCard: {\\n type: MetadataCardComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCard.storyName = 'MetadataCard';\\nMetadataCard.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: utils.getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataCard.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 400 }\\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: 'Subtitle content',\\n table: {\\n defaultValue: {\\n summary: 'undefined'\\n }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'Description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n options: ['none', circle],\\n control: 'select',\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'none' }\\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 options: ['right', 'left'],\\n control: 'select',\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"metadata-card\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const MetadataCard = () =>\n class MetadataCard extends lng.Component {\n static _template() {\n return {\n MetadataCard: {\n type: MetadataCardComponent\n }\n };\n }\n };\n\nMetadataCard.storyName = 'MetadataCard';\nMetadataCard.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: utils.getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataCard.argTypes = {\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 400 }\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: 'Subtitle content',\n table: {\n defaultValue: {\n summary: 'undefined'\n }\n }\n },\n description: {\n control: 'text',\n description: 'Description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n options: ['none', circle],\n control: 'select',\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'none' }\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 options: ['right', 'left'],\n control: 'select',\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 utils from '../../utils';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as MetadataCardComponent } from '.';\\nimport mdx from './MetadataCard.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataCard`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCard = () =>\\n class MetadataCard extends lng.Component {\\n static _template() {\\n return {\\n MetadataCard: {\\n type: MetadataCardComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCard.storyName = 'MetadataCard';\\nMetadataCard.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: utils.getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataCard.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 400 }\\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: 'Subtitle content',\\n table: {\\n defaultValue: {\\n summary: 'undefined'\\n }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'Description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n options: ['none', circle],\\n control: 'select',\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'none' }\\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 options: ['right', 'left'],\\n control: 'select',\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataCard\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport utils from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataCardComponent } from '.';\nimport mdx from './MetadataCard.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataCard`,\n 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 utils from '../../utils';\\nimport { createModeControl } from '../../docs/utils';\\nimport { default as MetadataCardComponent } from '.';\\nimport mdx from './MetadataCard.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataCard`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCard = () =>\\n class MetadataCard extends lng.Component {\\n static _template() {\\n return {\\n MetadataCard: {\\n type: MetadataCardComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCard.storyName = 'MetadataCard';\\nMetadataCard.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: utils.getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataCard.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 400 }\\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: 'Subtitle content',\\n table: {\\n defaultValue: {\\n summary: 'undefined'\\n }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'Description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n options: ['none', circle],\\n control: 'select',\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'none' }\\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 options: ['right', 'left'],\\n control: 'select',\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"metadata-card\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const MetadataCard = () =>\n class MetadataCard extends lng.Component {\n static _template() {\n return {\n MetadataCard: {\n type: MetadataCardComponent\n }\n };\n }\n };\n\nMetadataCard.storyName = 'MetadataCard';\nMetadataCard.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: utils.getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataCard.argTypes = {\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 400 }\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: 'Subtitle content',\n table: {\n defaultValue: {\n summary: 'undefined'\n }\n }\n },\n description: {\n control: 'text',\n description: 'Description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n options: ['none', circle],\n control: 'select',\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'none' }\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 options: ['right', 'left'],\n control: 'select',\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "MetadataCard": { @@ -38631,7 +38559,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 utils from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataCardComponent } from '.';\nimport mdx from './MetadataCard.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataCard`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCard = () =>\n class MetadataCard extends lng.Component {\n static _template() {\n return {\n MetadataCard: {\n type: MetadataCardComponent\n }\n };\n }\n };\n\nMetadataCard.storyName = 'MetadataCard';\nMetadataCard.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: utils.getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataCard.argTypes = {\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 400 }\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: 'Subtitle content',\n table: {\n defaultValue: {\n summary: 'undefined'\n }\n }\n },\n description: {\n control: 'text',\n description: 'Description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n options: ['none', circle],\n control: 'select',\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'none' }\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 options: ['right', 'left'],\n control: 'select',\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 utils from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataCardComponent } from '.';\nimport mdx from './MetadataCard.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataCard`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCard = () =>\n class MetadataCard extends lng.Component {\n static _template() {\n return {\n MetadataCard: {\n type: MetadataCardComponent\n }\n };\n }\n };\n\nMetadataCard.storyName = 'MetadataCard';\nMetadataCard.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: utils.getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataCard.argTypes = {\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 400 }\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: 'Subtitle content',\n table: {\n defaultValue: {\n summary: 'undefined'\n }\n }\n },\n description: {\n control: 'text',\n description: 'Description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n options: ['none', circle],\n control: 'select',\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'none' }\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 options: ['right', 'left'],\n control: 'select',\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "MetadataCard": { @@ -38681,10 +38609,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var MetadataCard_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][32] + "/MetadataCard", + title: constants["a" /* CATEGORIES */][8] + "/MetadataCard", 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 utils from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataCardComponent } from '.';\nimport mdx from './MetadataCard.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataCard`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCard = () =>\n class MetadataCard extends lng.Component {\n static _template() {\n return {\n MetadataCard: {\n type: MetadataCardComponent\n }\n };\n }\n };\n\nMetadataCard.storyName = 'MetadataCard';\nMetadataCard.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: utils.getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataCard.argTypes = {\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 400 }\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: 'Subtitle content',\n table: {\n defaultValue: {\n summary: 'undefined'\n }\n }\n },\n description: {\n control: 'text',\n description: 'Description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n options: ['none', circle],\n control: 'select',\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'none' }\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 options: ['right', 'left'],\n control: 'select',\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 utils from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataCardComponent } from '.';\nimport mdx from './MetadataCard.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataCard`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCard = () =>\n class MetadataCard extends lng.Component {\n static _template() {\n return {\n MetadataCard: {\n type: MetadataCardComponent\n }\n };\n }\n };\n\nMetadataCard.storyName = 'MetadataCard';\nMetadataCard.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: utils.getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataCard.argTypes = {\n ...createModeControl({ summaryValue: MetadataCard.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 400 }\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: 'Subtitle content',\n table: {\n defaultValue: {\n summary: 'undefined'\n }\n }\n },\n description: {\n control: 'text',\n description: 'Description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n options: ['none', circle],\n control: 'select',\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'none' }\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 options: ['right', 'left'],\n control: 'select',\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n", "locationsMap": { "metadata-card": { "startLoc": { @@ -39445,10 +39373,10 @@ function MDXContent(_ref) { "id": "metadatacardcontent" }, "MetadataCardContent"), Object(esm["b" /* mdx */])("p", null, "A component to format metadata on CardContent. Contains a ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/elements-provider--basic" + "href": "?path=/docs/components-provider--basic" }, "Provider"), " to format ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/foundations-icon--png" + "href": "?path=/docs/components-icon--png" }, "Icon(s)"), "."), Object(esm["b" /* mdx */])("h2", { "id": "source" }, "Source"), Object(esm["b" /* mdx */])("p", null, Object(esm["b" /* mdx */])("a", { @@ -39464,7 +39392,7 @@ function MDXContent(_ref) { }, "import { MetadataCardContent } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n MetadataCardContent: {\n type: MetadataCardContent,\n w: 600,\n h: 250,\n title: 'Title',\n description: 'Description',\n details: 'Details',\n provider: {\n visibleCount: args.visibleCount,\n providers: Array(10).fill(xfinityProviderLogoSquare)\n }\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-metadatacardcontent--metadata-card-content", + id: "components-metadatacardcontent--metadata-card-content", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -39552,7 +39480,7 @@ function MDXContent(_ref) { "align": null }, Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/utilities-provider--provider" + "href": "?path=/docs/components-provider--provider" }, "Provider")), Object(esm["b" /* mdx */])("td", { parentName: "tr", "align": null @@ -39564,7 +39492,7 @@ function MDXContent(_ref) { "align": null }, "an object of ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/utilities-provider--provider" + "href": "?path=/docs/components-provider--provider" }, "Provider"), " properties to patch in")))), Object(esm["b" /* mdx */])("h3", { "id": "style-properties" }, "Style Properties"), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { @@ -39606,7 +39534,7 @@ function MDXContent(_ref) { "align": null }, "style properties to pass along to the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/elements-provider--basic" + "href": "?path=/docs/components-provider--basic" }, "Provider"))))), Object(esm["b" /* mdx */])("h3", { "id": "methods" }, "Methods")); @@ -39653,7 +39581,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as MetadataCardContentComponent } from '.';\\nimport mdx from './MetadataCardContent.mdx';\\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataCardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCardContent = () =>\\n class MetadataCardContent extends lng.Component {\\n static _template() {\\n return {\\n MetadataCardContent: {\\n type: MetadataCardContentComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCardContent.storyName = 'MetadataCardContent';\\n\\n// used to show example of longer text in description\\nconst descriptionSample =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\\n\\nMetadataCardContent.args = {\\n w: 600,\\n h: 250,\\n title: 'Title',\\n description: descriptionSample,\\n details: 'Details',\\n visibleCount: 3,\\n mode: 'unfocused'\\n};\\n\\nMetadataCardContent.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: 'number',\\n description: 'Height 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 description: {\\n control: 'text',\\n description: 'Description text directly below title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text at bottom left of componentDetails text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 1 }\\n }\\n }\\n};\\n\\nMetadataCardContent.parameters = {\\n argActions: {\\n visibleCount(visibleCount, component) {\\n component.tag('MetadataCardContent').provider = {\\n visibleCount: visibleCount,\\n providers: Array(10).fill({\\n icon: xfinityProviderLogoSquare,\\n announce: 'xFinity',\\n visibleCount: 3\\n })\\n };\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataCardContent\":{\"startLoc\":{\"col\":35,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":35,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as MetadataCardContentComponent } from '.';\nimport mdx from './MetadataCardContent.mdx';\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataCardContent`,\n 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 { default as MetadataCardContentComponent } from '.';\\nimport mdx from './MetadataCardContent.mdx';\\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataCardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCardContent = () =>\\n class MetadataCardContent extends lng.Component {\\n static _template() {\\n return {\\n MetadataCardContent: {\\n type: MetadataCardContentComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCardContent.storyName = 'MetadataCardContent';\\n\\n// used to show example of longer text in description\\nconst descriptionSample =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\\n\\nMetadataCardContent.args = {\\n w: 600,\\n h: 250,\\n title: 'Title',\\n description: descriptionSample,\\n details: 'Details',\\n visibleCount: 3,\\n mode: 'unfocused'\\n};\\n\\nMetadataCardContent.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: 'number',\\n description: 'Height 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 description: {\\n control: 'text',\\n description: 'Description text directly below title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text at bottom left of componentDetails text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 1 }\\n }\\n }\\n};\\n\\nMetadataCardContent.parameters = {\\n argActions: {\\n visibleCount(visibleCount, component) {\\n component.tag('MetadataCardContent').provider = {\\n visibleCount: visibleCount,\\n providers: Array(10).fill({\\n icon: xfinityProviderLogoSquare,\\n announce: 'xFinity',\\n visibleCount: 3\\n })\\n };\\n }\\n }\\n};\\n\",\"locationsMap\":{\"metadata-card-content\":{\"startLoc\":{\"col\":35,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":35,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const MetadataCardContent = () =>\n class MetadataCardContent extends lng.Component {\n static _template() {\n return {\n MetadataCardContent: {\n type: MetadataCardContentComponent\n }\n };\n }\n };\n\nMetadataCardContent.storyName = 'MetadataCardContent';\n\n// used to show example of longer text in description\nconst descriptionSample =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n\nMetadataCardContent.args = {\n w: 600,\n h: 250,\n title: 'Title',\n description: descriptionSample,\n details: 'Details',\n visibleCount: 3,\n mode: 'unfocused'\n};\n\nMetadataCardContent.argTypes = {\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: 'number',\n description: 'Height 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 description: {\n control: 'text',\n description: 'Description text directly below title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text at bottom left of componentDetails text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 1 }\n }\n }\n};\n\nMetadataCardContent.parameters = {\n argActions: {\n visibleCount(visibleCount, component) {\n component.tag('MetadataCardContent').provider = {\n visibleCount: visibleCount,\n providers: Array(10).fill({\n icon: xfinityProviderLogoSquare,\n announce: 'xFinity',\n visibleCount: 3\n })\n };\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as MetadataCardContentComponent } from '.';\\nimport mdx from './MetadataCardContent.mdx';\\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataCardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCardContent = () =>\\n class MetadataCardContent extends lng.Component {\\n static _template() {\\n return {\\n MetadataCardContent: {\\n type: MetadataCardContentComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCardContent.storyName = 'MetadataCardContent';\\n\\n// used to show example of longer text in description\\nconst descriptionSample =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\\n\\nMetadataCardContent.args = {\\n w: 600,\\n h: 250,\\n title: 'Title',\\n description: descriptionSample,\\n details: 'Details',\\n visibleCount: 3,\\n mode: 'unfocused'\\n};\\n\\nMetadataCardContent.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: 'number',\\n description: 'Height 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 description: {\\n control: 'text',\\n description: 'Description text directly below title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text at bottom left of componentDetails text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 1 }\\n }\\n }\\n};\\n\\nMetadataCardContent.parameters = {\\n argActions: {\\n visibleCount(visibleCount, component) {\\n component.tag('MetadataCardContent').provider = {\\n visibleCount: visibleCount,\\n providers: Array(10).fill({\\n icon: xfinityProviderLogoSquare,\\n announce: 'xFinity',\\n visibleCount: 3\\n })\\n };\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataCardContent\":{\"startLoc\":{\"col\":35,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":35,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as MetadataCardContentComponent } from '.';\nimport mdx from './MetadataCardContent.mdx';\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataCardContent`,\n 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 { default as MetadataCardContentComponent } from '.';\\nimport mdx from './MetadataCardContent.mdx';\\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataCardContent`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataCardContent = () =>\\n class MetadataCardContent extends lng.Component {\\n static _template() {\\n return {\\n MetadataCardContent: {\\n type: MetadataCardContentComponent\\n }\\n };\\n }\\n };\\n\\nMetadataCardContent.storyName = 'MetadataCardContent';\\n\\n// used to show example of longer text in description\\nconst descriptionSample =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\\n\\nMetadataCardContent.args = {\\n w: 600,\\n h: 250,\\n title: 'Title',\\n description: descriptionSample,\\n details: 'Details',\\n visibleCount: 3,\\n mode: 'unfocused'\\n};\\n\\nMetadataCardContent.argTypes = {\\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n h: {\\n control: 'number',\\n description: 'Height 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 description: {\\n control: 'text',\\n description: 'Description text directly below title',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n details: {\\n control: 'text',\\n description: 'Details text at bottom left of componentDetails text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 1 }\\n }\\n }\\n};\\n\\nMetadataCardContent.parameters = {\\n argActions: {\\n visibleCount(visibleCount, component) {\\n component.tag('MetadataCardContent').provider = {\\n visibleCount: visibleCount,\\n providers: Array(10).fill({\\n icon: xfinityProviderLogoSquare,\\n announce: 'xFinity',\\n visibleCount: 3\\n })\\n };\\n }\\n }\\n};\\n\",\"locationsMap\":{\"metadata-card-content\":{\"startLoc\":{\"col\":35,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":35,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const MetadataCardContent = () =>\n class MetadataCardContent extends lng.Component {\n static _template() {\n return {\n MetadataCardContent: {\n type: MetadataCardContentComponent\n }\n };\n }\n };\n\nMetadataCardContent.storyName = 'MetadataCardContent';\n\n// used to show example of longer text in description\nconst descriptionSample =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n\nMetadataCardContent.args = {\n w: 600,\n h: 250,\n title: 'Title',\n description: descriptionSample,\n details: 'Details',\n visibleCount: 3,\n mode: 'unfocused'\n};\n\nMetadataCardContent.argTypes = {\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: 'number',\n description: 'Height 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 description: {\n control: 'text',\n description: 'Description text directly below title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text at bottom left of componentDetails text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 1 }\n }\n }\n};\n\nMetadataCardContent.parameters = {\n argActions: {\n visibleCount(visibleCount, component) {\n component.tag('MetadataCardContent').provider = {\n visibleCount: visibleCount,\n providers: Array(10).fill({\n icon: xfinityProviderLogoSquare,\n announce: 'xFinity',\n visibleCount: 3\n })\n };\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "MetadataCardContent": { @@ -39679,7 +39607,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as MetadataCardContentComponent } from '.';\nimport mdx from './MetadataCardContent.mdx';\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataCardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCardContent = () =>\n class MetadataCardContent extends lng.Component {\n static _template() {\n return {\n MetadataCardContent: {\n type: MetadataCardContentComponent\n }\n };\n }\n };\n\nMetadataCardContent.storyName = 'MetadataCardContent';\n\n// used to show example of longer text in description\nconst descriptionSample =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n\nMetadataCardContent.args = {\n w: 600,\n h: 250,\n title: 'Title',\n description: descriptionSample,\n details: 'Details',\n visibleCount: 3,\n mode: 'unfocused'\n};\n\nMetadataCardContent.argTypes = {\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: 'number',\n description: 'Height 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 description: {\n control: 'text',\n description: 'Description text directly below title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text at bottom left of componentDetails text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 1 }\n }\n }\n};\n\nMetadataCardContent.parameters = {\n argActions: {\n visibleCount(visibleCount, component) {\n component.tag('MetadataCardContent').provider = {\n visibleCount: visibleCount,\n providers: Array(10).fill({\n icon: xfinityProviderLogoSquare,\n announce: 'xFinity',\n visibleCount: 3\n })\n };\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 { default as MetadataCardContentComponent } from '.';\nimport mdx from './MetadataCardContent.mdx';\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataCardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCardContent = () =>\n class MetadataCardContent extends lng.Component {\n static _template() {\n return {\n MetadataCardContent: {\n type: MetadataCardContentComponent\n }\n };\n }\n };\n\nMetadataCardContent.storyName = 'MetadataCardContent';\n\n// used to show example of longer text in description\nconst descriptionSample =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n\nMetadataCardContent.args = {\n w: 600,\n h: 250,\n title: 'Title',\n description: descriptionSample,\n details: 'Details',\n visibleCount: 3,\n mode: 'unfocused'\n};\n\nMetadataCardContent.argTypes = {\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: 'number',\n description: 'Height 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 description: {\n control: 'text',\n description: 'Description text directly below title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text at bottom left of componentDetails text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 1 }\n }\n }\n};\n\nMetadataCardContent.parameters = {\n argActions: {\n visibleCount(visibleCount, component) {\n component.tag('MetadataCardContent').provider = {\n visibleCount: visibleCount,\n providers: Array(10).fill({\n icon: xfinityProviderLogoSquare,\n announce: 'xFinity',\n visibleCount: 3\n })\n };\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "MetadataCardContent": { @@ -39727,10 +39655,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var MetadataCardContent_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][32] + "/MetadataCardContent", + title: constants["a" /* CATEGORIES */][8] + "/MetadataCardContent", 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 { default as MetadataCardContentComponent } from '.';\nimport mdx from './MetadataCardContent.mdx';\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataCardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCardContent = () =>\n class MetadataCardContent extends lng.Component {\n static _template() {\n return {\n MetadataCardContent: {\n type: MetadataCardContentComponent\n }\n };\n }\n };\n\nMetadataCardContent.storyName = 'MetadataCardContent';\n\n// used to show example of longer text in description\nconst descriptionSample =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n\nMetadataCardContent.args = {\n w: 600,\n h: 250,\n title: 'Title',\n description: descriptionSample,\n details: 'Details',\n visibleCount: 3,\n mode: 'unfocused'\n};\n\nMetadataCardContent.argTypes = {\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: 'number',\n description: 'Height 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 description: {\n control: 'text',\n description: 'Description text directly below title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text at bottom left of componentDetails text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 1 }\n }\n }\n};\n\nMetadataCardContent.parameters = {\n argActions: {\n visibleCount(visibleCount, component) {\n component.tag('MetadataCardContent').provider = {\n visibleCount: visibleCount,\n providers: Array(10).fill({\n icon: xfinityProviderLogoSquare,\n announce: 'xFinity',\n visibleCount: 3\n })\n };\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 { default as MetadataCardContentComponent } from '.';\nimport mdx from './MetadataCardContent.mdx';\nimport xfinityProviderLogoSquare from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataCardContent`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataCardContent = () =>\n class MetadataCardContent extends lng.Component {\n static _template() {\n return {\n MetadataCardContent: {\n type: MetadataCardContentComponent\n }\n };\n }\n };\n\nMetadataCardContent.storyName = 'MetadataCardContent';\n\n// used to show example of longer text in description\nconst descriptionSample =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n\nMetadataCardContent.args = {\n w: 600,\n h: 250,\n title: 'Title',\n description: descriptionSample,\n details: 'Details',\n visibleCount: 3,\n mode: 'unfocused'\n};\n\nMetadataCardContent.argTypes = {\n ...createModeControl({ summaryValue: MetadataCardContent.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n h: {\n control: 'number',\n description: 'Height 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 description: {\n control: 'text',\n description: 'Description text directly below title',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n details: {\n control: 'text',\n description: 'Details text at bottom left of componentDetails text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 1 }\n }\n }\n};\n\nMetadataCardContent.parameters = {\n argActions: {\n visibleCount(visibleCount, component) {\n component.tag('MetadataCardContent').provider = {\n visibleCount: visibleCount,\n providers: Array(10).fill({\n icon: xfinityProviderLogoSquare,\n announce: 'xFinity',\n visibleCount: 3\n })\n };\n }\n }\n};\n", "locationsMap": { "metadata-card-content": { "startLoc": { @@ -40268,7 +40196,7 @@ function MDXContent(_ref) { }, "import { MetadataTile } 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 MetadataTile: {\n type: MetadataTile,\n w: 400,\n h: 300,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n logo: circle,\n logoWidth: 32,\n logoHeight: 32\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "metadata-metadatatile--metadata-tile", + id: "components-metadatatile--metadata-tile", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -40565,7 +40493,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 MetadataTileComponent } from '.';\\nimport mdx from './MetadataTile.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataTile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataTile = args =>\\n class MetadataTile extends lng.Component {\\n static _template() {\\n return {\\n MetadataTile: {\\n type: MetadataTileComponent,\\n w: args.w,\\n title: args.title,\\n subtitle: args.subtitle,\\n description: args.description,\\n logo: args.logo !== 'none' ? circle : null,\\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\\n logoPosition: args.logoPosition\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('MetadataTile');\\n }\\n };\\n\\nMetadataTile.storyName = 'MetadataTile';\\n\\nMetadataTile.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataTile.argTypes = {\\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n subtitle: {\\n control: 'object',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'select',\\n options: ['none', circle],\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoTitle: {\\n control: 'text',\\n description: 'Title to use for logo in announcer',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoPosition: {\\n control: 'select',\\n options: ['right', 'left'],\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataTile\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":57},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":57}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataTileComponent } from '.';\nimport mdx from './MetadataTile.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataTile`,\n 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 MetadataTileComponent } from '.';\\nimport mdx from './MetadataTile.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[32]}/MetadataTile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataTile = args =>\\n class MetadataTile extends lng.Component {\\n static _template() {\\n return {\\n MetadataTile: {\\n type: MetadataTileComponent,\\n w: args.w,\\n title: args.title,\\n subtitle: args.subtitle,\\n description: args.description,\\n logo: args.logo !== 'none' ? circle : null,\\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\\n logoPosition: args.logoPosition\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('MetadataTile');\\n }\\n };\\n\\nMetadataTile.storyName = 'MetadataTile';\\n\\nMetadataTile.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataTile.argTypes = {\\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n subtitle: {\\n control: 'object',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'select',\\n options: ['none', circle],\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoTitle: {\\n control: 'text',\\n description: 'Title to use for logo in announcer',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoPosition: {\\n control: 'select',\\n options: ['right', 'left'],\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"metadata-tile\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":57},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":57}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n subtitle: args.subtitle,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n subtitle: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 MetadataTileComponent } from '.';\\nimport mdx from './MetadataTile.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataTile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataTile = args =>\\n class MetadataTile extends lng.Component {\\n static _template() {\\n return {\\n MetadataTile: {\\n type: MetadataTileComponent,\\n w: args.w,\\n title: args.title,\\n subtitle: args.subtitle,\\n description: args.description,\\n logo: args.logo !== 'none' ? circle : null,\\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\\n logoPosition: args.logoPosition\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('MetadataTile');\\n }\\n };\\n\\nMetadataTile.storyName = 'MetadataTile';\\n\\nMetadataTile.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataTile.argTypes = {\\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n subtitle: {\\n control: 'object',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'select',\\n options: ['none', circle],\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoTitle: {\\n control: 'text',\\n description: 'Title to use for logo in announcer',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoPosition: {\\n control: 'select',\\n options: ['right', 'left'],\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"MetadataTile\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":57},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":57}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport circle from '../../assets/images/circle.svg';\nimport { getHexColor } from '../../utils';\nimport { createModeControl } from '../../docs/utils';\nimport { default as MetadataTileComponent } from '.';\nimport mdx from './MetadataTile.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataTile`,\n 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 MetadataTileComponent } from '.';\\nimport mdx from './MetadataTile.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/MetadataTile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const MetadataTile = args =>\\n class MetadataTile extends lng.Component {\\n static _template() {\\n return {\\n MetadataTile: {\\n type: MetadataTileComponent,\\n w: args.w,\\n title: args.title,\\n subtitle: args.subtitle,\\n description: args.description,\\n logo: args.logo !== 'none' ? circle : null,\\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\\n logoPosition: args.logoPosition\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('MetadataTile');\\n }\\n };\\n\\nMetadataTile.storyName = 'MetadataTile';\\n\\nMetadataTile.args = {\\n w: 400,\\n title: 'Title',\\n subtitle: [\\n '94%',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n '86%',\\n {\\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\\n title: 'Rotten Tomatoes rating'\\n }\\n ],\\n description: 'Description',\\n logo: circle,\\n logoTitle: 'Logo title',\\n logoPosition: 'right',\\n mode: 'unfocused'\\n};\\n\\nMetadataTile.argTypes = {\\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\\n w: {\\n control: 'number',\\n description: 'Width of component',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n subtitle: {\\n control: 'object',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n description: {\\n control: 'text',\\n description: 'description text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logo: {\\n control: 'select',\\n options: ['none', circle],\\n description: 'Image to use for logo',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoTitle: {\\n control: 'text',\\n description: 'Title to use for logo in announcer',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n logoPosition: {\\n control: 'select',\\n options: ['right', 'left'],\\n description: 'Position logo on the left/right side',\\n table: {\\n defaultValue: { summary: 'right' }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"metadata-tile\":{\"startLoc\":{\"col\":28,\"line\":37},\"endLoc\":{\"col\":3,\"line\":57},\"startBody\":{\"col\":28,\"line\":37},\"endBody\":{\"col\":3,\"line\":57}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n subtitle: args.subtitle,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n subtitle: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "MetadataTile": { @@ -40591,7 +40519,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 MetadataTileComponent } from '.';\nimport mdx from './MetadataTile.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataTile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n subtitle: args.subtitle,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n subtitle: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n"; +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 MetadataTileComponent } from '.';\nimport mdx from './MetadataTile.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataTile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n subtitle: args.subtitle,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n subtitle: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "MetadataTile": { @@ -40641,10 +40569,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var MetadataTile_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][32] + "/MetadataTile", + title: constants["a" /* CATEGORIES */][8] + "/MetadataTile", 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 MetadataTileComponent } from '.';\nimport mdx from './MetadataTile.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[32]}/MetadataTile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n subtitle: args.subtitle,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n subtitle: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n", + "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 MetadataTileComponent } from '.';\nimport mdx from './MetadataTile.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/MetadataTile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const MetadataTile = args =>\n class MetadataTile extends lng.Component {\n static _template() {\n return {\n MetadataTile: {\n type: MetadataTileComponent,\n w: args.w,\n title: args.title,\n subtitle: args.subtitle,\n description: args.description,\n logo: args.logo !== 'none' ? circle : null,\n logoTitle: args.logo !== 'none' ? args.logoTitle : null,\n logoPosition: args.logoPosition\n }\n };\n }\n\n _getFocused() {\n return this.tag('MetadataTile');\n }\n };\n\nMetadataTile.storyName = 'MetadataTile';\n\nMetadataTile.args = {\n w: 400,\n title: 'Title',\n subtitle: [\n '94%',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n '86%',\n {\n icon: 'http://myriad.merlin.comcast.com/select/logo?entityId=8527084350383982239&width=32&height=&ratio=1x1&trim=false',\n title: 'Rotten Tomatoes rating'\n }\n ],\n description: 'Description',\n logo: circle,\n logoTitle: 'Logo title',\n logoPosition: 'right',\n mode: 'unfocused'\n};\n\nMetadataTile.argTypes = {\n ...createModeControl({ summaryValue: MetadataTile.args.mode }),\n w: {\n control: 'number',\n description: 'Width of component',\n table: {\n defaultValue: { summary: 0 }\n }\n },\n title: {\n control: 'text',\n description: 'Title text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n subtitle: {\n control: 'object',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n description: {\n control: 'text',\n description: 'description text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logo: {\n control: 'select',\n options: ['none', circle],\n description: 'Image to use for logo',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoTitle: {\n control: 'text',\n description: 'Title to use for logo in announcer',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n logoPosition: {\n control: 'select',\n options: ['right', 'left'],\n description: 'Position logo on the left/right side',\n table: {\n defaultValue: { summary: 'right' }\n }\n }\n};\n", "locationsMap": { "metadata-tile": { "startLoc": { @@ -41579,13 +41507,13 @@ function MDXContent(_ref) { "id": "navigationmanager" }, "NavigationManager"), Object(esm["b" /* mdx */])("p", null, "NavigationManager is a subclass of ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/navigation-focusmanager--rows" + "href": "?path=/docs/components-focusmanager--rows" }, "FocusManager"), ",\nand parent class of ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/navigation-row--row" + "href": "?path=/docs/components-row--row" }, "Row"), " and ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/navigation-column--column" + "href": "?path=/docs/components-column--column" }, "Column"), ".\nIt contains shared properties and methods primarily concerned with scrolling and layout."), Object(esm["b" /* mdx */])("h2", { "id": "source" }, "Source"), Object(esm["b" /* mdx */])("p", null, Object(esm["b" /* mdx */])("a", { @@ -41601,7 +41529,7 @@ function MDXContent(_ref) { }, "import { NavigationManager } from '@lightningjs/ui-components';\n\nclass CustomRow extends NavigationManager {}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "navigation-navigationmanager--row", + id: "components-navigationmanager--row", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "scrolling" @@ -41623,7 +41551,7 @@ function MDXContent(_ref) { parentName: "p" }, "direction"), " propety set in ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/elements-focusmanager--row" + "href": "?path=/docs/components-focusmanager--row" }, "FocusManager"), ". The properties it maps to are as follows:"), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" @@ -41981,7 +41909,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 NavigationManager from '.';\\nimport mdx from './NavigationManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nfunction createRow(props = {}) {\\n return {\\n type: NavigationManager,\\n direction: 'row',\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ],\\n ...props\\n };\\n}\\n\\nexport default {\\n title: `${CATEGORIES[64]}/NavigationManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Row = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: createRow()\\n };\\n }\\n };\\n\\nexport const Column = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n items: [\\n { type: ButtonFixedWidth, title: 'Top' },\\n { type: ButtonFixedWidth, title: 'Center' },\\n { type: ButtonFixedWidth, title: 'Bottom' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const ColumnOfRows = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n plinko: true,\\n items: [\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true })\\n ]\\n }\\n };\\n }\\n };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Row\":{\"startLoc\":{\"col\":19,\"line\":59},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":19,\"line\":59},\"endBody\":{\"col\":3,\"line\":66}},\"Column\":{\"startLoc\":{\"col\":22,\"line\":68},\"endLoc\":{\"col\":3,\"line\":83},\"startBody\":{\"col\":22,\"line\":68},\"endBody\":{\"col\":3,\"line\":83}},\"ColumnOfRows\":{\"startLoc\":{\"col\":28,\"line\":85},\"endLoc\":{\"col\":3,\"line\":101},\"startBody\":{\"col\":28,\"line\":85},\"endBody\":{\"col\":3,\"line\":101}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport NavigationManager from '.';\nimport mdx from './NavigationManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nfunction createRow(props = {}) {\n return {\n type: NavigationManager,\n direction: 'row',\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ],\n ...props\n };\n}\n\nexport default {\n title: `${CATEGORIES[64]}/NavigationManager`,\n 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 NavigationManager from '.';\\nimport mdx from './NavigationManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nfunction createRow(props = {}) {\\n return {\\n type: NavigationManager,\\n direction: 'row',\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ],\\n ...props\\n };\\n}\\n\\nexport default {\\n title: `${CATEGORIES[64]}/NavigationManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Row = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: createRow()\\n };\\n }\\n };\\n\\nexport const Column = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n items: [\\n { type: ButtonFixedWidth, title: 'Top' },\\n { type: ButtonFixedWidth, title: 'Center' },\\n { type: ButtonFixedWidth, title: 'Bottom' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const ColumnOfRows = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n plinko: true,\\n items: [\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true })\\n ]\\n }\\n };\\n }\\n };\\n\",\"locationsMap\":{\"row\":{\"startLoc\":{\"col\":19,\"line\":59},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":19,\"line\":59},\"endBody\":{\"col\":3,\"line\":66}},\"column\":{\"startLoc\":{\"col\":22,\"line\":68},\"endLoc\":{\"col\":3,\"line\":83},\"startBody\":{\"col\":22,\"line\":68},\"endBody\":{\"col\":3,\"line\":83}},\"column-of-rows\":{\"startLoc\":{\"col\":28,\"line\":85},\"endLoc\":{\"col\":3,\"line\":101},\"startBody\":{\"col\":28,\"line\":85},\"endBody\":{\"col\":3,\"line\":101}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Row = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: createRow()\n };\n }\n };;\n\nexport const Column = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n items: [\n { type: ButtonFixedWidth, title: 'Top' },\n { type: ButtonFixedWidth, title: 'Center' },\n { type: ButtonFixedWidth, title: 'Bottom' }\n ]\n }\n };\n }\n };;\n\nexport const ColumnOfRows = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n plinko: true,\n items: [\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true })\n ]\n }\n };\n }\n };\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 NavigationManager from '.';\\nimport mdx from './NavigationManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nfunction createRow(props = {}) {\\n return {\\n type: NavigationManager,\\n direction: 'row',\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ],\\n ...props\\n };\\n}\\n\\nexport default {\\n title: `${CATEGORIES[8]}/NavigationManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Row = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: createRow()\\n };\\n }\\n };\\n\\nexport const Column = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n items: [\\n { type: ButtonFixedWidth, title: 'Top' },\\n { type: ButtonFixedWidth, title: 'Center' },\\n { type: ButtonFixedWidth, title: 'Bottom' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const ColumnOfRows = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n plinko: true,\\n items: [\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true })\\n ]\\n }\\n };\\n }\\n };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Row\":{\"startLoc\":{\"col\":19,\"line\":59},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":19,\"line\":59},\"endBody\":{\"col\":3,\"line\":66}},\"Column\":{\"startLoc\":{\"col\":22,\"line\":68},\"endLoc\":{\"col\":3,\"line\":83},\"startBody\":{\"col\":22,\"line\":68},\"endBody\":{\"col\":3,\"line\":83}},\"ColumnOfRows\":{\"startLoc\":{\"col\":28,\"line\":85},\"endLoc\":{\"col\":3,\"line\":101},\"startBody\":{\"col\":28,\"line\":85},\"endBody\":{\"col\":3,\"line\":101}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport NavigationManager from '.';\nimport mdx from './NavigationManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nfunction createRow(props = {}) {\n return {\n type: NavigationManager,\n direction: 'row',\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ],\n ...props\n };\n}\n\nexport default {\n title: `${CATEGORIES[8]}/NavigationManager`,\n 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 NavigationManager from '.';\\nimport mdx from './NavigationManager.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport Button from '../Button';\\n\\nclass ButtonFixedWidth extends Button {\\n static get __componentName() {\\n return 'ButtonSmall';\\n }\\n\\n _init() {\\n this.fixed = true;\\n this.w = 200;\\n super._init();\\n }\\n}\\n\\nfunction createRow(props = {}) {\\n return {\\n type: NavigationManager,\\n direction: 'row',\\n items: [\\n { type: ButtonFixedWidth, title: 'Left' },\\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\\n ],\\n ...props\\n };\\n}\\n\\nexport default {\\n title: `${CATEGORIES[8]}/NavigationManager`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Row = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: createRow()\\n };\\n }\\n };\\n\\nexport const Column = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n items: [\\n { type: ButtonFixedWidth, title: 'Top' },\\n { type: ButtonFixedWidth, title: 'Center' },\\n { type: ButtonFixedWidth, title: 'Bottom' }\\n ]\\n }\\n };\\n }\\n };\\n\\nexport const ColumnOfRows = () =>\\n class RowExample extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: NavigationManager,\\n direction: 'column',\\n plinko: true,\\n items: [\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true }),\\n createRow({ autoResizeHeight: true })\\n ]\\n }\\n };\\n }\\n };\\n\",\"locationsMap\":{\"row\":{\"startLoc\":{\"col\":19,\"line\":59},\"endLoc\":{\"col\":3,\"line\":66},\"startBody\":{\"col\":19,\"line\":59},\"endBody\":{\"col\":3,\"line\":66}},\"column\":{\"startLoc\":{\"col\":22,\"line\":68},\"endLoc\":{\"col\":3,\"line\":83},\"startBody\":{\"col\":22,\"line\":68},\"endBody\":{\"col\":3,\"line\":83}},\"column-of-rows\":{\"startLoc\":{\"col\":28,\"line\":85},\"endLoc\":{\"col\":3,\"line\":101},\"startBody\":{\"col\":28,\"line\":85},\"endBody\":{\"col\":3,\"line\":101}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Row = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: createRow()\n };\n }\n };;\n\nexport const Column = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n items: [\n { type: ButtonFixedWidth, title: 'Top' },\n { type: ButtonFixedWidth, title: 'Center' },\n { type: ButtonFixedWidth, title: 'Bottom' }\n ]\n }\n };\n }\n };;\n\nexport const ColumnOfRows = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n plinko: true,\n items: [\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true })\n ]\n }\n };\n }\n };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Row": { @@ -42043,7 +41971,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 NavigationManager from '.';\nimport mdx from './NavigationManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nfunction createRow(props = {}) {\n return {\n type: NavigationManager,\n direction: 'row',\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ],\n ...props\n };\n}\n\nexport default {\n title: `${CATEGORIES[64]}/NavigationManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Row = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: createRow()\n };\n }\n };\n\nexport const Column = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n items: [\n { type: ButtonFixedWidth, title: 'Top' },\n { type: ButtonFixedWidth, title: 'Center' },\n { type: ButtonFixedWidth, title: 'Bottom' }\n ]\n }\n };\n }\n };\n\nexport const ColumnOfRows = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n plinko: true,\n items: [\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true })\n ]\n }\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 NavigationManager from '.';\nimport mdx from './NavigationManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nfunction createRow(props = {}) {\n return {\n type: NavigationManager,\n direction: 'row',\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ],\n ...props\n };\n}\n\nexport default {\n title: `${CATEGORIES[8]}/NavigationManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Row = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: createRow()\n };\n }\n };\n\nexport const Column = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n items: [\n { type: ButtonFixedWidth, title: 'Top' },\n { type: ButtonFixedWidth, title: 'Center' },\n { type: ButtonFixedWidth, title: 'Bottom' }\n ]\n }\n };\n }\n };\n\nexport const ColumnOfRows = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n plinko: true,\n items: [\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true })\n ]\n }\n };\n }\n };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Row": { @@ -42167,10 +42095,10 @@ function createRow() { }, props); } /* harmony default export */ var NavigationManager_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][64] + "/NavigationManager", + title: constants["a" /* CATEGORIES */][8] + "/NavigationManager", 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 NavigationManager from '.';\nimport mdx from './NavigationManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nfunction createRow(props = {}) {\n return {\n type: NavigationManager,\n direction: 'row',\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ],\n ...props\n };\n}\n\nexport default {\n title: `${CATEGORIES[64]}/NavigationManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Row = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: createRow()\n };\n }\n };\n\nexport const Column = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n items: [\n { type: ButtonFixedWidth, title: 'Top' },\n { type: ButtonFixedWidth, title: 'Center' },\n { type: ButtonFixedWidth, title: 'Bottom' }\n ]\n }\n };\n }\n };\n\nexport const ColumnOfRows = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n plinko: true,\n items: [\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true })\n ]\n }\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 NavigationManager from '.';\nimport mdx from './NavigationManager.mdx';\nimport { CATEGORIES } from '../../docs/constants';\nimport Button from '../Button';\n\nclass ButtonFixedWidth extends Button {\n static get __componentName() {\n return 'ButtonSmall';\n }\n\n _init() {\n this.fixed = true;\n this.w = 200;\n super._init();\n }\n}\n\nfunction createRow(props = {}) {\n return {\n type: NavigationManager,\n direction: 'row',\n items: [\n { type: ButtonFixedWidth, title: 'Left' },\n { type: ButtonFixedWidth, title: 'Center', x: 250 },\n { type: ButtonFixedWidth, title: 'Right', x: 500 }\n ],\n ...props\n };\n}\n\nexport default {\n title: `${CATEGORIES[8]}/NavigationManager`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Row = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: createRow()\n };\n }\n };\n\nexport const Column = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n items: [\n { type: ButtonFixedWidth, title: 'Top' },\n { type: ButtonFixedWidth, title: 'Center' },\n { type: ButtonFixedWidth, title: 'Bottom' }\n ]\n }\n };\n }\n };\n\nexport const ColumnOfRows = () =>\n class RowExample extends lng.Component {\n static _template() {\n return {\n Row: {\n type: NavigationManager,\n direction: 'column',\n plinko: true,\n items: [\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true }),\n createRow({ autoResizeHeight: true })\n ]\n }\n };\n }\n };\n", "locationsMap": { "row": { "startLoc": { @@ -42721,7 +42649,7 @@ function MDXContent(_ref) { }, "import { ProgressBar } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBar,\n w: 410,\n progress: 0.5\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "utilities-progressbar--progress-bar", + id: "components-progressbar--progress-bar", mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "The default progress bar width is 410."), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -42862,7 +42790,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ProgressBarComponent } from '.';\\nimport mdx from './ProgressBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/ProgressBar`,\\n parameters: {\\n tag: 'ProgressBar',\\n docs: {\\n page: mdx\\n },\\n actions: {\\n handles: ['mouseover', 'click .btn']\\n }\\n }\\n};\\n\\nexport const ProgressBar = () =>\\n class ProgressBar extends lng.Component {\\n static _template() {\\n return {\\n ProgressBar: {\\n type: ProgressBarComponent\\n }\\n };\\n }\\n };\\nProgressBar.storyName = 'ProgressBar';\\nProgressBar.args = {\\n progress: 0.5,\\n w: 410\\n};\\nProgressBar.argTypes = {\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'Percentage of the current progress from 0 to 1',\\n table: { defaultValue: { summary: 0 } }\\n },\\n w: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 600,\\n step: 0.01\\n },\\n description: 'width of the entire bar',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ProgressBar\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ProgressBarComponent } from '.';\nimport mdx from './ProgressBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/ProgressBar`,\n 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 { default as ProgressBarComponent } from '.';\\nimport mdx from './ProgressBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/ProgressBar`,\\n parameters: {\\n tag: 'ProgressBar',\\n docs: {\\n page: mdx\\n },\\n actions: {\\n handles: ['mouseover', 'click .btn']\\n }\\n }\\n};\\n\\nexport const ProgressBar = () =>\\n class ProgressBar extends lng.Component {\\n static _template() {\\n return {\\n ProgressBar: {\\n type: ProgressBarComponent\\n }\\n };\\n }\\n };\\nProgressBar.storyName = 'ProgressBar';\\nProgressBar.args = {\\n progress: 0.5,\\n w: 410\\n};\\nProgressBar.argTypes = {\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'Percentage of the current progress from 0 to 1',\\n table: { defaultValue: { summary: 0 } }\\n },\\n w: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 600,\\n step: 0.01\\n },\\n description: 'width of the entire bar',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\n\",\"locationsMap\":{\"progress-bar\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n tag: 'ProgressBar',\n docs: {\n page: mdx\n },\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n },};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ProgressBarComponent } from '.';\\nimport mdx from './ProgressBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ProgressBar`,\\n parameters: {\\n tag: 'ProgressBar',\\n docs: {\\n page: mdx\\n },\\n actions: {\\n handles: ['mouseover', 'click .btn']\\n }\\n }\\n};\\n\\nexport const ProgressBar = () =>\\n class ProgressBar extends lng.Component {\\n static _template() {\\n return {\\n ProgressBar: {\\n type: ProgressBarComponent\\n }\\n };\\n }\\n };\\nProgressBar.storyName = 'ProgressBar';\\nProgressBar.args = {\\n progress: 0.5,\\n w: 410\\n};\\nProgressBar.argTypes = {\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'Percentage of the current progress from 0 to 1',\\n table: { defaultValue: { summary: 0 } }\\n },\\n w: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 600,\\n step: 0.01\\n },\\n description: 'width of the entire bar',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ProgressBar\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ProgressBarComponent } from '.';\nimport mdx from './ProgressBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ProgressBar`,\n 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 { default as ProgressBarComponent } from '.';\\nimport mdx from './ProgressBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ProgressBar`,\\n parameters: {\\n tag: 'ProgressBar',\\n docs: {\\n page: mdx\\n },\\n actions: {\\n handles: ['mouseover', 'click .btn']\\n }\\n }\\n};\\n\\nexport const ProgressBar = () =>\\n class ProgressBar extends lng.Component {\\n static _template() {\\n return {\\n ProgressBar: {\\n type: ProgressBarComponent\\n }\\n };\\n }\\n };\\nProgressBar.storyName = 'ProgressBar';\\nProgressBar.args = {\\n progress: 0.5,\\n w: 410\\n};\\nProgressBar.argTypes = {\\n progress: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 1,\\n step: 0.01\\n },\\n description: 'Percentage of the current progress from 0 to 1',\\n table: { defaultValue: { summary: 0 } }\\n },\\n w: {\\n control: {\\n type: 'range',\\n min: 0,\\n max: 600,\\n step: 0.01\\n },\\n description: 'width of the entire bar',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\n\",\"locationsMap\":{\"progress-bar\":{\"startLoc\":{\"col\":27,\"line\":37},\"endLoc\":{\"col\":3,\"line\":46},\"startBody\":{\"col\":27,\"line\":37},\"endBody\":{\"col\":3,\"line\":46}}}},\n tag: 'ProgressBar',\n docs: {\n page: mdx\n },\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n },};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ProgressBar": { @@ -42888,7 +42816,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ProgressBarComponent } from '.';\nimport mdx from './ProgressBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/ProgressBar`,\n parameters: {\n tag: 'ProgressBar',\n docs: {\n page: mdx\n },\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n"; +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 { default as ProgressBarComponent } from '.';\nimport mdx from './ProgressBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ProgressBar`,\n parameters: {\n tag: 'ProgressBar',\n docs: {\n page: mdx\n },\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ProgressBar": { @@ -42934,10 +42862,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var ProgressBar_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/ProgressBar", + title: constants["a" /* CATEGORIES */][8] + "/ProgressBar", 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 { default as ProgressBarComponent } from '.';\nimport mdx from './ProgressBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/ProgressBar`,\n parameters: {\n tag: 'ProgressBar',\n docs: {\n page: mdx\n },\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n", + "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 { default as ProgressBarComponent } from '.';\nimport mdx from './ProgressBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ProgressBar`,\n parameters: {\n tag: 'ProgressBar',\n docs: {\n page: mdx\n },\n actions: {\n handles: ['mouseover', 'click .btn']\n }\n }\n};\n\nexport const ProgressBar = () =>\n class ProgressBar extends lng.Component {\n static _template() {\n return {\n ProgressBar: {\n type: ProgressBarComponent\n }\n };\n }\n };\nProgressBar.storyName = 'ProgressBar';\nProgressBar.args = {\n progress: 0.5,\n w: 410\n};\nProgressBar.argTypes = {\n progress: {\n control: {\n type: 'range',\n min: 0,\n max: 1,\n step: 0.01\n },\n description: 'Percentage of the current progress from 0 to 1',\n table: { defaultValue: { summary: 0 } }\n },\n w: {\n control: {\n type: 'range',\n min: 0,\n max: 600,\n step: 0.01\n },\n description: 'width of the entire bar',\n table: { defaultValue: { summary: 0 } }\n }\n};\n", "locationsMap": { "progress-bar": { "startLoc": { @@ -43564,7 +43492,7 @@ function MDXContent(_ref) { }, "import { Provider } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: Provider,\n visibleCount: args.visibleCount,\n providers: [\n xfinityProviderLogoSquare,\n {\n type: Icon,\n w: 96,\n h: 48,\n icon: xfinityLogo\n },\n ...Array.apply(null, { length: 10 }).map(\n () => xfinityProviderLogoSquare\n )\n ],\n counterText: '...',\n disableRadius: true\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "utilities-provider--provider", + id: "components-provider--provider", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -43811,7 +43739,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 ProviderComponent from '.';\\nimport { default as Icon } from '../Icon';\\nimport mdx from './Provider.mdx';\\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Provider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n counterText: null,\\n disableRadius: false,\\n visibleCount: 3\\n};\\nconst sharedArgTypes = {\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n counterText: {\\n control: 'select',\\n options: [null, '...'],\\n description: 'Text to display in counter (overrides default behavior)',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n disableRadius: {\\n control: 'boolean',\\n description: 'Disable applying radius to icons',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nexport const Provider = () =>\\n class Provider extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: Array(10).fill({\\n icon: xfinity,\\n announce: 'xfinity'\\n })\\n }\\n };\\n }\\n };\\n\\nProvider.args = sharedArgs;\\nProvider.argTypes = sharedArgTypes;\\n\\nexport const WithCustomIconSize = () =>\\n class WithCustomIconSize extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: [\\n {\\n icon: xfinity,\\n announce: 'xfinity'\\n },\\n {\\n type: Icon,\\n w: 85,\\n h: 48,\\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\\n icon: xfinityLogo,\\n announce: 'XFinity Logo Wide'\\n },\\n ...Array.apply(null, { length: 8 }).map(() => ({\\n icon: xfinity,\\n announce: 'xfinity'\\n }))\\n ],\\n visibleCount: 3\\n }\\n };\\n }\\n };\\n\\nWithCustomIconSize.args = sharedArgs;\\nWithCustomIconSize.argTypes = sharedArgTypes;\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Provider\":{\"startLoc\":{\"col\":24,\"line\":66},\"endLoc\":{\"col\":3,\"line\":79},\"startBody\":{\"col\":24,\"line\":66},\"endBody\":{\"col\":3,\"line\":79}},\"WithCustomIconSize\":{\"startLoc\":{\"col\":34,\"line\":84},\"endLoc\":{\"col\":3,\"line\":112},\"startBody\":{\"col\":34,\"line\":84},\"endBody\":{\"col\":3,\"line\":112}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport ProviderComponent from '.';\nimport { default as Icon } from '../Icon';\nimport mdx from './Provider.mdx';\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Provider`,\n 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 ProviderComponent from '.';\\nimport { default as Icon } from '../Icon';\\nimport mdx from './Provider.mdx';\\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Provider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n counterText: null,\\n disableRadius: false,\\n visibleCount: 3\\n};\\nconst sharedArgTypes = {\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n counterText: {\\n control: 'select',\\n options: [null, '...'],\\n description: 'Text to display in counter (overrides default behavior)',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n disableRadius: {\\n control: 'boolean',\\n description: 'Disable applying radius to icons',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nexport const Provider = () =>\\n class Provider extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: Array(10).fill({\\n icon: xfinity,\\n announce: 'xfinity'\\n })\\n }\\n };\\n }\\n };\\n\\nProvider.args = sharedArgs;\\nProvider.argTypes = sharedArgTypes;\\n\\nexport const WithCustomIconSize = () =>\\n class WithCustomIconSize extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: [\\n {\\n icon: xfinity,\\n announce: 'xfinity'\\n },\\n {\\n type: Icon,\\n w: 85,\\n h: 48,\\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\\n icon: xfinityLogo,\\n announce: 'XFinity Logo Wide'\\n },\\n ...Array.apply(null, { length: 8 }).map(() => ({\\n icon: xfinity,\\n announce: 'xfinity'\\n }))\\n ],\\n visibleCount: 3\\n }\\n };\\n }\\n };\\n\\nWithCustomIconSize.args = sharedArgs;\\nWithCustomIconSize.argTypes = sharedArgTypes;\\n\",\"locationsMap\":{\"provider\":{\"startLoc\":{\"col\":24,\"line\":66},\"endLoc\":{\"col\":3,\"line\":79},\"startBody\":{\"col\":24,\"line\":66},\"endBody\":{\"col\":3,\"line\":79}},\"with-custom-icon-size\":{\"startLoc\":{\"col\":34,\"line\":84},\"endLoc\":{\"col\":3,\"line\":112},\"startBody\":{\"col\":34,\"line\":84},\"endBody\":{\"col\":3,\"line\":112}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst sharedArgs = {\n counterText: null,\n disableRadius: false,\n visibleCount: 3\n};\nconst sharedArgTypes = {\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n counterText: {\n control: 'select',\n options: [null, '...'],\n description: 'Text to display in counter (overrides default behavior)',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n disableRadius: {\n control: 'boolean',\n description: 'Disable applying radius to icons',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nexport const Provider = () =>\n class Provider extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: Array(10).fill({\n icon: xfinity,\n announce: 'xfinity'\n })\n }\n };\n }\n };;\n\nProvider.args = sharedArgs;\nProvider.argTypes = sharedArgTypes;\n\nexport const WithCustomIconSize = () =>\n class WithCustomIconSize extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: [\n {\n icon: xfinity,\n announce: 'xfinity'\n },\n {\n type: Icon,\n w: 85,\n h: 48,\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\n icon: xfinityLogo,\n announce: 'XFinity Logo Wide'\n },\n ...Array.apply(null, { length: 8 }).map(() => ({\n icon: xfinity,\n announce: 'xfinity'\n }))\n ],\n visibleCount: 3\n }\n };\n }\n };\n\nWithCustomIconSize.args = sharedArgs;\nWithCustomIconSize.argTypes = sharedArgTypes;\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 ProviderComponent from '.';\\nimport { default as Icon } from '../Icon';\\nimport mdx from './Provider.mdx';\\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Provider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n counterText: null,\\n disableRadius: false,\\n visibleCount: 3\\n};\\nconst sharedArgTypes = {\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n counterText: {\\n control: 'select',\\n options: [null, '...'],\\n description: 'Text to display in counter (overrides default behavior)',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n disableRadius: {\\n control: 'boolean',\\n description: 'Disable applying radius to icons',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nexport const Provider = () =>\\n class Provider extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: Array(10).fill({\\n icon: xfinity,\\n announce: 'xfinity'\\n })\\n }\\n };\\n }\\n };\\n\\nProvider.args = sharedArgs;\\nProvider.argTypes = sharedArgTypes;\\n\\nexport const WithCustomIconSize = () =>\\n class WithCustomIconSize extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: [\\n {\\n icon: xfinity,\\n announce: 'xfinity'\\n },\\n {\\n type: Icon,\\n w: 85,\\n h: 48,\\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\\n icon: xfinityLogo,\\n announce: 'XFinity Logo Wide'\\n },\\n ...Array.apply(null, { length: 8 }).map(() => ({\\n icon: xfinity,\\n announce: 'xfinity'\\n }))\\n ],\\n visibleCount: 3\\n }\\n };\\n }\\n };\\n\\nWithCustomIconSize.args = sharedArgs;\\nWithCustomIconSize.argTypes = sharedArgTypes;\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Provider\":{\"startLoc\":{\"col\":24,\"line\":66},\"endLoc\":{\"col\":3,\"line\":79},\"startBody\":{\"col\":24,\"line\":66},\"endBody\":{\"col\":3,\"line\":79}},\"WithCustomIconSize\":{\"startLoc\":{\"col\":34,\"line\":84},\"endLoc\":{\"col\":3,\"line\":112},\"startBody\":{\"col\":34,\"line\":84},\"endBody\":{\"col\":3,\"line\":112}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport ProviderComponent from '.';\nimport { default as Icon } from '../Icon';\nimport mdx from './Provider.mdx';\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Provider`,\n 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 ProviderComponent from '.';\\nimport { default as Icon } from '../Icon';\\nimport mdx from './Provider.mdx';\\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Provider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n counterText: null,\\n disableRadius: false,\\n visibleCount: 3\\n};\\nconst sharedArgTypes = {\\n visibleCount: {\\n control: { type: 'range', min: 1, max: 10, step: 1 },\\n description: 'Number of visible providers',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n counterText: {\\n control: 'select',\\n options: [null, '...'],\\n description: 'Text to display in counter (overrides default behavior)',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n disableRadius: {\\n control: 'boolean',\\n description: 'Disable applying radius to icons',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\\nexport const Provider = () =>\\n class Provider extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: Array(10).fill({\\n icon: xfinity,\\n announce: 'xfinity'\\n })\\n }\\n };\\n }\\n };\\n\\nProvider.args = sharedArgs;\\nProvider.argTypes = sharedArgTypes;\\n\\nexport const WithCustomIconSize = () =>\\n class WithCustomIconSize extends lng.Component {\\n static _template() {\\n return {\\n Provider: {\\n type: ProviderComponent,\\n providers: [\\n {\\n icon: xfinity,\\n announce: 'xfinity'\\n },\\n {\\n type: Icon,\\n w: 85,\\n h: 48,\\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\\n icon: xfinityLogo,\\n announce: 'XFinity Logo Wide'\\n },\\n ...Array.apply(null, { length: 8 }).map(() => ({\\n icon: xfinity,\\n announce: 'xfinity'\\n }))\\n ],\\n visibleCount: 3\\n }\\n };\\n }\\n };\\n\\nWithCustomIconSize.args = sharedArgs;\\nWithCustomIconSize.argTypes = sharedArgTypes;\\n\",\"locationsMap\":{\"provider\":{\"startLoc\":{\"col\":24,\"line\":66},\"endLoc\":{\"col\":3,\"line\":79},\"startBody\":{\"col\":24,\"line\":66},\"endBody\":{\"col\":3,\"line\":79}},\"with-custom-icon-size\":{\"startLoc\":{\"col\":34,\"line\":84},\"endLoc\":{\"col\":3,\"line\":112},\"startBody\":{\"col\":34,\"line\":84},\"endBody\":{\"col\":3,\"line\":112}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst sharedArgs = {\n counterText: null,\n disableRadius: false,\n visibleCount: 3\n};\nconst sharedArgTypes = {\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n counterText: {\n control: 'select',\n options: [null, '...'],\n description: 'Text to display in counter (overrides default behavior)',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n disableRadius: {\n control: 'boolean',\n description: 'Disable applying radius to icons',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nexport const Provider = () =>\n class Provider extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: Array(10).fill({\n icon: xfinity,\n announce: 'xfinity'\n })\n }\n };\n }\n };;\n\nProvider.args = sharedArgs;\nProvider.argTypes = sharedArgTypes;\n\nexport const WithCustomIconSize = () =>\n class WithCustomIconSize extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: [\n {\n icon: xfinity,\n announce: 'xfinity'\n },\n {\n type: Icon,\n w: 85,\n h: 48,\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\n icon: xfinityLogo,\n announce: 'XFinity Logo Wide'\n },\n ...Array.apply(null, { length: 8 }).map(() => ({\n icon: xfinity,\n announce: 'xfinity'\n }))\n ],\n visibleCount: 3\n }\n };\n }\n };\n\nWithCustomIconSize.args = sharedArgs;\nWithCustomIconSize.argTypes = sharedArgTypes;\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Provider": { @@ -43855,7 +43783,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 ProviderComponent from '.';\nimport { default as Icon } from '../Icon';\nimport mdx from './Provider.mdx';\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Provider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n counterText: null,\n disableRadius: false,\n visibleCount: 3\n};\nconst sharedArgTypes = {\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n counterText: {\n control: 'select',\n options: [null, '...'],\n description: 'Text to display in counter (overrides default behavior)',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n disableRadius: {\n control: 'boolean',\n description: 'Disable applying radius to icons',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nexport const Provider = () =>\n class Provider extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: Array(10).fill({\n icon: xfinity,\n announce: 'xfinity'\n })\n }\n };\n }\n };\n\nProvider.args = sharedArgs;\nProvider.argTypes = sharedArgTypes;\n\nexport const WithCustomIconSize = () =>\n class WithCustomIconSize extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: [\n {\n icon: xfinity,\n announce: 'xfinity'\n },\n {\n type: Icon,\n w: 85,\n h: 48,\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\n icon: xfinityLogo,\n announce: 'XFinity Logo Wide'\n },\n ...Array.apply(null, { length: 8 }).map(() => ({\n icon: xfinity,\n announce: 'xfinity'\n }))\n ],\n visibleCount: 3\n }\n };\n }\n };\n\nWithCustomIconSize.args = sharedArgs;\nWithCustomIconSize.argTypes = sharedArgTypes;\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 ProviderComponent from '.';\nimport { default as Icon } from '../Icon';\nimport mdx from './Provider.mdx';\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Provider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n counterText: null,\n disableRadius: false,\n visibleCount: 3\n};\nconst sharedArgTypes = {\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n counterText: {\n control: 'select',\n options: [null, '...'],\n description: 'Text to display in counter (overrides default behavior)',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n disableRadius: {\n control: 'boolean',\n description: 'Disable applying radius to icons',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nexport const Provider = () =>\n class Provider extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: Array(10).fill({\n icon: xfinity,\n announce: 'xfinity'\n })\n }\n };\n }\n };\n\nProvider.args = sharedArgs;\nProvider.argTypes = sharedArgTypes;\n\nexport const WithCustomIconSize = () =>\n class WithCustomIconSize extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: [\n {\n icon: xfinity,\n announce: 'xfinity'\n },\n {\n type: Icon,\n w: 85,\n h: 48,\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\n icon: xfinityLogo,\n announce: 'XFinity Logo Wide'\n },\n ...Array.apply(null, { length: 8 }).map(() => ({\n icon: xfinity,\n announce: 'xfinity'\n }))\n ],\n visibleCount: 3\n }\n };\n }\n };\n\nWithCustomIconSize.args = sharedArgs;\nWithCustomIconSize.argTypes = sharedArgTypes;\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Provider": { @@ -43922,10 +43850,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Provider_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/Provider", + title: constants["a" /* CATEGORIES */][8] + "/Provider", 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 ProviderComponent from '.';\nimport { default as Icon } from '../Icon';\nimport mdx from './Provider.mdx';\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Provider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n counterText: null,\n disableRadius: false,\n visibleCount: 3\n};\nconst sharedArgTypes = {\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n counterText: {\n control: 'select',\n options: [null, '...'],\n description: 'Text to display in counter (overrides default behavior)',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n disableRadius: {\n control: 'boolean',\n description: 'Disable applying radius to icons',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nexport const Provider = () =>\n class Provider extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: Array(10).fill({\n icon: xfinity,\n announce: 'xfinity'\n })\n }\n };\n }\n };\n\nProvider.args = sharedArgs;\nProvider.argTypes = sharedArgTypes;\n\nexport const WithCustomIconSize = () =>\n class WithCustomIconSize extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: [\n {\n icon: xfinity,\n announce: 'xfinity'\n },\n {\n type: Icon,\n w: 85,\n h: 48,\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\n icon: xfinityLogo,\n announce: 'XFinity Logo Wide'\n },\n ...Array.apply(null, { length: 8 }).map(() => ({\n icon: xfinity,\n announce: 'xfinity'\n }))\n ],\n visibleCount: 3\n }\n };\n }\n };\n\nWithCustomIconSize.args = sharedArgs;\nWithCustomIconSize.argTypes = sharedArgTypes;\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 ProviderComponent from '.';\nimport { default as Icon } from '../Icon';\nimport mdx from './Provider.mdx';\nimport xfinityLogo from '../../assets/images/XfinityLogo16x9.png';\nimport xfinity from '../../assets/images/Xfinity-Provider-Logo-Square.png';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Provider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n counterText: null,\n disableRadius: false,\n visibleCount: 3\n};\nconst sharedArgTypes = {\n visibleCount: {\n control: { type: 'range', min: 1, max: 10, step: 1 },\n description: 'Number of visible providers',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n counterText: {\n control: 'select',\n options: [null, '...'],\n description: 'Text to display in counter (overrides default behavior)',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n disableRadius: {\n control: 'boolean',\n description: 'Disable applying radius to icons',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n\nexport const Provider = () =>\n class Provider extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: Array(10).fill({\n icon: xfinity,\n announce: 'xfinity'\n })\n }\n };\n }\n };\n\nProvider.args = sharedArgs;\nProvider.argTypes = sharedArgTypes;\n\nexport const WithCustomIconSize = () =>\n class WithCustomIconSize extends lng.Component {\n static _template() {\n return {\n Provider: {\n type: ProviderComponent,\n providers: [\n {\n icon: xfinity,\n announce: 'xfinity'\n },\n {\n type: Icon,\n w: 85,\n h: 48,\n // Xfinity icon is from the Xfinity Brand Press Materials from https://corporate.comcast.com/press/kit\n icon: xfinityLogo,\n announce: 'XFinity Logo Wide'\n },\n ...Array.apply(null, { length: 8 }).map(() => ({\n icon: xfinity,\n announce: 'xfinity'\n }))\n ],\n visibleCount: 3\n }\n };\n }\n };\n\nWithCustomIconSize.args = sharedArgs;\nWithCustomIconSize.argTypes = sharedArgTypes;\n", "locationsMap": { "provider": { "startLoc": { @@ -44521,7 +44449,7 @@ function MDXContent(_ref) { }, "import { Radio } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: Radio\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "utilities-radio--radio", + id: "components-radio--radio", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -44715,7 +44643,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as RadioComponent } from '.';\\nimport mdx from './Radio.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Radio`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Radio = () =>\\n class Radio extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: RadioComponent\\n }\\n };\\n }\\n };\\nRadio.args = { checked: false, mode: 'unfocused' };\\nRadio.argTypes = {\\n ...createModeControl({ summaryValue: 'unfocused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Radio\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as RadioComponent } from '.';\nimport mdx from './Radio.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Radio`,\n 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 { default as RadioComponent } from '.';\\nimport mdx from './Radio.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Radio`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Radio = () =>\\n class Radio extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: RadioComponent\\n }\\n };\\n }\\n };\\nRadio.args = { checked: false, mode: 'unfocused' };\\nRadio.argTypes = {\\n ...createModeControl({ summaryValue: 'unfocused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\",\"locationsMap\":{\"radio\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Radio = () =>\n class Radio extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: RadioComponent\n }\n };\n }\n };\nRadio.args = { checked: false, mode: 'unfocused' };\nRadio.argTypes = {\n ...createModeControl({ summaryValue: 'unfocused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as RadioComponent } from '.';\\nimport mdx from './Radio.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Radio`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Radio = () =>\\n class Radio extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: RadioComponent\\n }\\n };\\n }\\n };\\nRadio.args = { checked: false, mode: 'unfocused' };\\nRadio.argTypes = {\\n ...createModeControl({ summaryValue: 'unfocused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Radio\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as RadioComponent } from '.';\nimport mdx from './Radio.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Radio`,\n 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 { default as RadioComponent } from '.';\\nimport mdx from './Radio.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Radio`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Radio = () =>\\n class Radio extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: RadioComponent\\n }\\n };\\n }\\n };\\nRadio.args = { checked: false, mode: 'unfocused' };\\nRadio.argTypes = {\\n ...createModeControl({ summaryValue: 'unfocused' }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\",\"locationsMap\":{\"radio\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":3,\"line\":43},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":3,\"line\":43}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Radio = () =>\n class Radio extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: RadioComponent\n }\n };\n }\n };\nRadio.args = { checked: false, mode: 'unfocused' };\nRadio.argTypes = {\n ...createModeControl({ summaryValue: 'unfocused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Radio": { @@ -44741,7 +44669,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as RadioComponent } from '.';\nimport mdx from './Radio.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Radio`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Radio = () =>\n class Radio extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: RadioComponent\n }\n };\n }\n };\nRadio.args = { checked: false, mode: 'unfocused' };\nRadio.argTypes = {\n ...createModeControl({ summaryValue: 'unfocused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\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 { default as RadioComponent } from '.';\nimport mdx from './Radio.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Radio`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Radio = () =>\n class Radio extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: RadioComponent\n }\n };\n }\n };\nRadio.args = { checked: false, mode: 'unfocused' };\nRadio.argTypes = {\n ...createModeControl({ summaryValue: 'unfocused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Radio": { @@ -44788,10 +44716,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Radio_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/Radio", + title: constants["a" /* CATEGORIES */][8] + "/Radio", 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 { default as RadioComponent } from '.';\nimport mdx from './Radio.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Radio`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Radio = () =>\n class Radio extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: RadioComponent\n }\n };\n }\n };\nRadio.args = { checked: false, mode: 'unfocused' };\nRadio.argTypes = {\n ...createModeControl({ summaryValue: 'unfocused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\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 { default as RadioComponent } from '.';\nimport mdx from './Radio.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Radio`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Radio = () =>\n class Radio extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: RadioComponent\n }\n };\n }\n };\nRadio.args = { checked: false, mode: 'unfocused' };\nRadio.argTypes = {\n ...createModeControl({ summaryValue: 'unfocused' }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n", "locationsMap": { "radio": { "startLoc": { @@ -45054,7 +44982,7 @@ function RadioSmall_stories_getPrototypeOf(o) { RadioSmall_stories_getPrototypeO /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Radio from './RadioSmall.js';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/RadioSmall`\\n};\\n\\nexport const RadioSmall = () =>\\n class RadioSmall extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: Radio\\n }\\n };\\n }\\n };\\nRadioSmall.args = { checked: false, mode: 'unfocused' };\\nRadioSmall.argTypes = {\\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nRadioSmall.storyName = 'RadioSmall';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"RadioSmall\":{\"startLoc\":{\"col\":26,\"line\":28},\"endLoc\":{\"col\":3,\"line\":37},\"startBody\":{\"col\":26,\"line\":28},\"endBody\":{\"col\":3,\"line\":37}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Radio from './RadioSmall.js';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {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 Radio from './RadioSmall.js';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/RadioSmall`\\n};\\n\\nexport const RadioSmall = () =>\\n class RadioSmall extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: Radio\\n }\\n };\\n }\\n };\\nRadioSmall.args = { checked: false, mode: 'unfocused' };\\nRadioSmall.argTypes = {\\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nRadioSmall.storyName = 'RadioSmall';\\n\",\"locationsMap\":{\"radio-small\":{\"startLoc\":{\"col\":26,\"line\":28},\"endLoc\":{\"col\":3,\"line\":37},\"startBody\":{\"col\":26,\"line\":28},\"endBody\":{\"col\":3,\"line\":37}}}},},\n title: `${CATEGORIES[512]}/RadioSmall`\n};\n\nexport const RadioSmall = () =>\n class RadioSmall extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: Radio\n }\n };\n }\n };\nRadioSmall.args = { checked: false, mode: 'unfocused' };\nRadioSmall.argTypes = {\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n\nRadioSmall.storyName = 'RadioSmall';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Radio from './RadioSmall.js';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/RadioSmall`\\n};\\n\\nexport const RadioSmall = () =>\\n class RadioSmall extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: Radio\\n }\\n };\\n }\\n };\\nRadioSmall.args = { checked: false, mode: 'unfocused' };\\nRadioSmall.argTypes = {\\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nRadioSmall.storyName = 'RadioSmall';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"RadioSmall\":{\"startLoc\":{\"col\":26,\"line\":28},\"endLoc\":{\"col\":3,\"line\":37},\"startBody\":{\"col\":26,\"line\":28},\"endBody\":{\"col\":3,\"line\":37}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Radio from './RadioSmall.js';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {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 Radio from './RadioSmall.js';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/RadioSmall`\\n};\\n\\nexport const RadioSmall = () =>\\n class RadioSmall extends lng.Component {\\n static _template() {\\n return {\\n Radio: {\\n type: Radio\\n }\\n };\\n }\\n };\\nRadioSmall.args = { checked: false, mode: 'unfocused' };\\nRadioSmall.argTypes = {\\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\\n checked: {\\n control: 'boolean',\\n description: 'Toggles checked between on and off',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nRadioSmall.storyName = 'RadioSmall';\\n\",\"locationsMap\":{\"radio-small\":{\"startLoc\":{\"col\":26,\"line\":28},\"endLoc\":{\"col\":3,\"line\":37},\"startBody\":{\"col\":26,\"line\":28},\"endBody\":{\"col\":3,\"line\":37}}}},},\n title: `${CATEGORIES[8]}/RadioSmall`\n};\n\nexport const RadioSmall = () =>\n class RadioSmall extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: Radio\n }\n };\n }\n };\nRadioSmall.args = { checked: false, mode: 'unfocused' };\nRadioSmall.argTypes = {\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n\nRadioSmall.storyName = 'RadioSmall';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "RadioSmall": { @@ -45080,7 +45008,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 Radio from './RadioSmall.js';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/RadioSmall`\n};\n\nexport const RadioSmall = () =>\n class RadioSmall extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: Radio\n }\n };\n }\n };\nRadioSmall.args = { checked: false, mode: 'unfocused' };\nRadioSmall.argTypes = {\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n\nRadioSmall.storyName = 'RadioSmall';\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 Radio from './RadioSmall.js';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/RadioSmall`\n};\n\nexport const RadioSmall = () =>\n class RadioSmall extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: Radio\n }\n };\n }\n };\nRadioSmall.args = { checked: false, mode: 'unfocused' };\nRadioSmall.argTypes = {\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n\nRadioSmall.storyName = 'RadioSmall';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "RadioSmall": { @@ -45128,7 +45056,7 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var RadioSmall_stories = __webpack_exports__["default"] = ({ 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 Radio from './RadioSmall.js';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/RadioSmall`\n};\n\nexport const RadioSmall = () =>\n class RadioSmall extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: Radio\n }\n };\n }\n };\nRadioSmall.args = { checked: false, mode: 'unfocused' };\nRadioSmall.argTypes = {\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n\nRadioSmall.storyName = 'RadioSmall';\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 Radio from './RadioSmall.js';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/RadioSmall`\n};\n\nexport const RadioSmall = () =>\n class RadioSmall extends lng.Component {\n static _template() {\n return {\n Radio: {\n type: Radio\n }\n };\n }\n };\nRadioSmall.args = { checked: false, mode: 'unfocused' };\nRadioSmall.argTypes = {\n ...createModeControl({ summaryValue: RadioSmall.args.mode }),\n checked: {\n control: 'boolean',\n description: 'Toggles checked between on and off',\n table: { defaultValue: { summary: false } }\n }\n};\n\nRadioSmall.storyName = 'RadioSmall';\n", "locationsMap": { "radio-small": { "startLoc": { @@ -45151,7 +45079,7 @@ var __LOCATIONS_MAP__ = { } } }, - title: constants["a" /* CATEGORIES */][512] + "/RadioSmall" + title: constants["a" /* CATEGORIES */][8] + "/RadioSmall" }); var RadioSmall_stories_RadioSmall = function RadioSmall() { return /*#__PURE__*/function (_lng$Component) { @@ -45770,7 +45698,7 @@ function MDXContent(_ref) { }, "import { Row } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Row: {\n type: Row,\n items: [\n // list of items\n ]\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "navigation-row--row", + id: "components-row--row", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "scrolling" @@ -45941,7 +45869,7 @@ function MDXContent(_ref) { "id": "style-properties" }, "Style Properties"), Object(esm["b" /* mdx */])("p", null, "The Row component shares the same style properties as the ones listed in NavigationManager. For a detailed description, please refer to style properties section in the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/navigation-navigationmanager--row" + "href": "?path=/docs/components-navigationmanager--row" }, "NavigationManager component")), Object(esm["b" /* mdx */])("h3", { "id": "child-item-properties" }, "Child Item Properties"), Object(esm["b" /* mdx */])("p", null, "The ", Object(esm["b" /* mdx */])("inlineCode", { @@ -46007,10 +45935,10 @@ function MDXContent(_ref) { "id": "methods" }, "Methods"), Object(esm["b" /* mdx */])("p", null, "The Row component is a subclass of NavigationManager and FocusManager, so inherits all methods from those parent components. These shared methods are already documented in the NavigationManager and FocusManager documentation. For detailed descriptions of these methods, please refer to the methods section in the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/?path=/docs/navigation-navigationmanager--row" + "href": "/?path=/docs/components-navigationmanager--row" }, "NavigationManager"), " and ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/navigation-focusmanager--column-with-rows" + "href": "/docs/components-focusmanager--column-with-rows" }, "FocusManager"), " documentation."), Object(esm["b" /* mdx */])("h4", { "id": "onscreeneffectonscreenitems-lngcomponent-void" }, "onScreenEffect(onScreenItems: lng.Component[]): void"), Object(esm["b" /* mdx */])("p", null, "A callback that can be overridden to do something with the items that are currently on screen. This will be called on every new render.")); @@ -46079,7 +46007,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { getWidthByUpCount } from '../../utils';\\nimport { default as RowComponent } from '.';\\nimport Column from '../Column';\\nimport mdx from './Row.mdx';\\nimport { context } from '../../globals';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/Row`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\n/**\\n * Shared Args and Arg Types for Stories\\n */\\nconst sharedArgs = {\\n alwaysScroll: false,\\n lazyScroll: false,\\n neverScroll: false,\\n scrollIndex: 0,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\\n table: { defaultValue: { summary: false } }\\n },\\n neverScroll: {\\n control: 'boolean',\\n description:\\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\\n table: { defaultValue: { summary: false } }\\n },\\n lazyScroll: {\\n control: 'boolean',\\n description:\\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedWidth = false) => {\\n return Array.from({ length }).map((_, i) => ({\\n type: buttonType,\\n title: `Button ${i + 1}`,\\n ...(isVariedWidth\\n ? {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n }\\n : {})\\n }));\\n};\\n\\nclass ExpandingButton extends Button {\\n _construct() {\\n super._construct();\\n this.fixed = true;\\n this.w = 250;\\n }\\n _focus() {\\n super._focus();\\n this.smooth = { w: 350 };\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { w: 250 };\\n }\\n}\\n\\nclass ExpandingHeightButton extends Button {\\n _focus() {\\n super._focus();\\n this.smooth = { h: 150 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 75 };\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').on('txLoaded', () => {\\n this.w = this.tag('Label').renderWidth;\\n this.h = this.tag('Label').renderHeight;\\n this.fireAncestors('$itemChanged');\\n });\\n }\\n\\n set titleText(titleText) {\\n this.tag('Label').text = titleText;\\n }\\n}\\n\\n/**\\n * Stories for various versions of the component\\n */\\n\\nexport const Row = () =>\\n class Row extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\n\\nRow.args = sharedArgs;\\nRow.argTypes = sharedArgTypes;\\n\\nexport const FocusHeightChange = () =>\\n class FocusHeightChange extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 5 }).map(() => ({\\n type: ExpandingHeightButton,\\n title: 'Button',\\n w: 150,\\n h: 75\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemWidth = () =>\\n class VaryingItemWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 10, {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n })\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableWidth = () =>\\n class ExpandableWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 6)\\n }\\n };\\n }\\n };\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 1)\\n }\\n ]\\n }\\n };\\n }\\n };\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\\n};\\n\\nexport const Plinko = () => {\\n return class Plinko extends lng.Component {\\n static _template() {\\n const skipFocusButtons = createItems(Button, 3);\\n skipFocusButtons[1].skipFocus = true;\\n skipFocusButtons[1].title = 'Skip Focus';\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n autoResizeHeight: true,\\n plinko: true,\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: skipFocusButtons\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n};\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 13 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const LazyScrollIndexes = ({\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n}) =>\\n class LazyScrollIndexes extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1} ${\\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\\n })),\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n }\\n };\\n }\\n };\\nLazyScrollIndexes.args = {\\n ...sharedArgs,\\n lazyScroll: true,\\n startLazyScrollIndex: 1,\\n stopLazyScrollIndex: 10\\n};\\nLazyScrollIndexes.argTypes = {\\n ...sharedArgTypes,\\n startLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\\n table: { defaultValue: { summary: 0 } }\\n },\\n stopLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyScrollIndexes.parameters = {\\n storyDetails:\\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Row').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Row').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Row').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n ...sharedArgs,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\\n};\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n ...sharedArgs,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2\\n};\\nLazyUpCount.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\\n};\\n\\nexport const RemovingItems = () =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Row').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n ...sharedArgs\\n};\\nRemovingItems.argTypes = {\\n ...sharedArgTypes\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Row\":{\"startLoc\":{\"col\":19,\"line\":153},\"endLoc\":{\"col\":3,\"line\":164},\"startBody\":{\"col\":19,\"line\":153},\"endBody\":{\"col\":3,\"line\":164}},\"FocusHeightChange\":{\"startLoc\":{\"col\":33,\"line\":169},\"endLoc\":{\"col\":3,\"line\":185},\"startBody\":{\"col\":33,\"line\":169},\"endBody\":{\"col\":3,\"line\":185}},\"VaryingItemWidth\":{\"startLoc\":{\"col\":32,\"line\":187},\"endLoc\":{\"col\":3,\"line\":201},\"startBody\":{\"col\":32,\"line\":187},\"endBody\":{\"col\":3,\"line\":201}},\"ExpandableWidth\":{\"startLoc\":{\"col\":31,\"line\":203},\"endLoc\":{\"col\":3,\"line\":214},\"startBody\":{\"col\":31,\"line\":203},\"endBody\":{\"col\":3,\"line\":214}},\"CenteredInParent\":{\"startLoc\":{\"col\":32,\"line\":216},\"endLoc\":{\"col\":3,\"line\":242},\"startBody\":{\"col\":32,\"line\":216},\"endBody\":{\"col\":3,\"line\":242}},\"Plinko\":{\"startLoc\":{\"col\":22,\"line\":248},\"endLoc\":{\"col\":1,\"line\":286},\"startBody\":{\"col\":22,\"line\":248},\"endBody\":{\"col\":1,\"line\":286}},\"SkipFocus\":{\"startLoc\":{\"col\":25,\"line\":288},\"endLoc\":{\"col\":3,\"line\":315},\"startBody\":{\"col\":25,\"line\":288},\"endBody\":{\"col\":3,\"line\":315}},\"LazyScrollIndexes\":{\"startLoc\":{\"col\":33,\"line\":330},\"endLoc\":{\"col\":3,\"line\":351},\"startBody\":{\"col\":33,\"line\":330},\"endBody\":{\"col\":3,\"line\":351}},\"AddingItems\":{\"startLoc\":{\"col\":27,\"line\":378},\"endLoc\":{\"col\":3,\"line\":445},\"startBody\":{\"col\":27,\"line\":378},\"endBody\":{\"col\":3,\"line\":445}},\"LazyUpCount\":{\"startLoc\":{\"col\":27,\"line\":475},\"endLoc\":{\"col\":3,\"line\":488},\"startBody\":{\"col\":27,\"line\":475},\"endBody\":{\"col\":3,\"line\":488}},\"RemovingItems\":{\"startLoc\":{\"col\":29,\"line\":518},\"endLoc\":{\"col\":3,\"line\":544},\"startBody\":{\"col\":29,\"line\":518},\"endBody\":{\"col\":3,\"line\":544}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { getWidthByUpCount } from '../../utils';\nimport { default as RowComponent } from '.';\nimport Column from '../Column';\nimport mdx from './Row.mdx';\nimport { context } from '../../globals';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[64]}/Row`,\n 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 { getWidthByUpCount } from '../../utils';\\nimport { default as RowComponent } from '.';\\nimport Column from '../Column';\\nimport mdx from './Row.mdx';\\nimport { context } from '../../globals';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[64]}/Row`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\n/**\\n * Shared Args and Arg Types for Stories\\n */\\nconst sharedArgs = {\\n alwaysScroll: false,\\n lazyScroll: false,\\n neverScroll: false,\\n scrollIndex: 0,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\\n table: { defaultValue: { summary: false } }\\n },\\n neverScroll: {\\n control: 'boolean',\\n description:\\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\\n table: { defaultValue: { summary: false } }\\n },\\n lazyScroll: {\\n control: 'boolean',\\n description:\\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedWidth = false) => {\\n return Array.from({ length }).map((_, i) => ({\\n type: buttonType,\\n title: `Button ${i + 1}`,\\n ...(isVariedWidth\\n ? {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n }\\n : {})\\n }));\\n};\\n\\nclass ExpandingButton extends Button {\\n _construct() {\\n super._construct();\\n this.fixed = true;\\n this.w = 250;\\n }\\n _focus() {\\n super._focus();\\n this.smooth = { w: 350 };\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { w: 250 };\\n }\\n}\\n\\nclass ExpandingHeightButton extends Button {\\n _focus() {\\n super._focus();\\n this.smooth = { h: 150 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 75 };\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').on('txLoaded', () => {\\n this.w = this.tag('Label').renderWidth;\\n this.h = this.tag('Label').renderHeight;\\n this.fireAncestors('$itemChanged');\\n });\\n }\\n\\n set titleText(titleText) {\\n this.tag('Label').text = titleText;\\n }\\n}\\n\\n/**\\n * Stories for various versions of the component\\n */\\n\\nexport const Row = () =>\\n class Row extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\n\\nRow.args = sharedArgs;\\nRow.argTypes = sharedArgTypes;\\n\\nexport const FocusHeightChange = () =>\\n class FocusHeightChange extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 5 }).map(() => ({\\n type: ExpandingHeightButton,\\n title: 'Button',\\n w: 150,\\n h: 75\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemWidth = () =>\\n class VaryingItemWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 10, {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n })\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableWidth = () =>\\n class ExpandableWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 6)\\n }\\n };\\n }\\n };\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 1)\\n }\\n ]\\n }\\n };\\n }\\n };\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\\n};\\n\\nexport const Plinko = () => {\\n return class Plinko extends lng.Component {\\n static _template() {\\n const skipFocusButtons = createItems(Button, 3);\\n skipFocusButtons[1].skipFocus = true;\\n skipFocusButtons[1].title = 'Skip Focus';\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n autoResizeHeight: true,\\n plinko: true,\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: skipFocusButtons\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n};\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 13 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const LazyScrollIndexes = ({\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n}) =>\\n class LazyScrollIndexes extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1} ${\\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\\n })),\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n }\\n };\\n }\\n };\\nLazyScrollIndexes.args = {\\n ...sharedArgs,\\n lazyScroll: true,\\n startLazyScrollIndex: 1,\\n stopLazyScrollIndex: 10\\n};\\nLazyScrollIndexes.argTypes = {\\n ...sharedArgTypes,\\n startLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\\n table: { defaultValue: { summary: 0 } }\\n },\\n stopLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyScrollIndexes.parameters = {\\n storyDetails:\\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Row').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Row').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Row').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n ...sharedArgs,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\\n};\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n ...sharedArgs,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2\\n};\\nLazyUpCount.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\\n};\\n\\nexport const RemovingItems = () =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Row').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n ...sharedArgs\\n};\\nRemovingItems.argTypes = {\\n ...sharedArgTypes\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\\n};\\n\",\"locationsMap\":{\"row\":{\"startLoc\":{\"col\":19,\"line\":153},\"endLoc\":{\"col\":3,\"line\":164},\"startBody\":{\"col\":19,\"line\":153},\"endBody\":{\"col\":3,\"line\":164}},\"focus-height-change\":{\"startLoc\":{\"col\":33,\"line\":169},\"endLoc\":{\"col\":3,\"line\":185},\"startBody\":{\"col\":33,\"line\":169},\"endBody\":{\"col\":3,\"line\":185}},\"varying-item-width\":{\"startLoc\":{\"col\":32,\"line\":187},\"endLoc\":{\"col\":3,\"line\":201},\"startBody\":{\"col\":32,\"line\":187},\"endBody\":{\"col\":3,\"line\":201}},\"expandable-width\":{\"startLoc\":{\"col\":31,\"line\":203},\"endLoc\":{\"col\":3,\"line\":214},\"startBody\":{\"col\":31,\"line\":203},\"endBody\":{\"col\":3,\"line\":214}},\"centered-in-parent\":{\"startLoc\":{\"col\":32,\"line\":216},\"endLoc\":{\"col\":3,\"line\":242},\"startBody\":{\"col\":32,\"line\":216},\"endBody\":{\"col\":3,\"line\":242}},\"plinko\":{\"startLoc\":{\"col\":22,\"line\":248},\"endLoc\":{\"col\":1,\"line\":286},\"startBody\":{\"col\":22,\"line\":248},\"endBody\":{\"col\":1,\"line\":286}},\"skip-focus\":{\"startLoc\":{\"col\":25,\"line\":288},\"endLoc\":{\"col\":3,\"line\":315},\"startBody\":{\"col\":25,\"line\":288},\"endBody\":{\"col\":3,\"line\":315}},\"lazy-scroll-indexes\":{\"startLoc\":{\"col\":33,\"line\":330},\"endLoc\":{\"col\":3,\"line\":351},\"startBody\":{\"col\":33,\"line\":330},\"endBody\":{\"col\":3,\"line\":351}},\"adding-items\":{\"startLoc\":{\"col\":27,\"line\":378},\"endLoc\":{\"col\":3,\"line\":445},\"startBody\":{\"col\":27,\"line\":378},\"endBody\":{\"col\":3,\"line\":445}},\"lazy-up-count\":{\"startLoc\":{\"col\":27,\"line\":475},\"endLoc\":{\"col\":3,\"line\":488},\"startBody\":{\"col\":27,\"line\":475},\"endBody\":{\"col\":3,\"line\":488}},\"removing-items\":{\"startLoc\":{\"col\":29,\"line\":518},\"endLoc\":{\"col\":3,\"line\":544},\"startBody\":{\"col\":29,\"line\":518},\"endBody\":{\"col\":3,\"line\":544}}}},\n docs: {\n page: mdx\n },\n remountAll: true\n },};\n\n/**\n * Shared Args and Arg Types for Stories\n */\nconst sharedArgs = {\n alwaysScroll: false,\n lazyScroll: false,\n neverScroll: false,\n scrollIndex: 0,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\n table: { defaultValue: { summary: false } }\n },\n neverScroll: {\n control: 'boolean',\n description:\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\n table: { defaultValue: { summary: false } }\n },\n lazyScroll: {\n control: 'boolean',\n description:\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\n table: { defaultValue: { summary: false } }\n }\n};\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedWidth = false) => {\n return Array.from({ length }).map((_, i) => ({\n type: buttonType,\n title: `Button ${i + 1}`,\n ...(isVariedWidth\n ? {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n }\n : {})\n }));\n};\n\nclass ExpandingButton extends Button {\n _construct() {\n super._construct();\n this.fixed = true;\n this.w = 250;\n }\n _focus() {\n super._focus();\n this.smooth = { w: 350 };\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { w: 250 };\n }\n}\n\nclass ExpandingHeightButton extends Button {\n _focus() {\n super._focus();\n this.smooth = { h: 150 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 75 };\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').on('txLoaded', () => {\n this.w = this.tag('Label').renderWidth;\n this.h = this.tag('Label').renderHeight;\n this.fireAncestors('$itemChanged');\n });\n }\n\n set titleText(titleText) {\n this.tag('Label').text = titleText;\n }\n}\n\n/**\n * Stories for various versions of the component\n */\n\nexport const Row = () =>\n class Row extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 12)\n }\n };\n }\n };;\n\nRow.args = sharedArgs;\nRow.argTypes = sharedArgTypes;\n\nexport const FocusHeightChange = () =>\n class FocusHeightChange extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 5 }).map(() => ({\n type: ExpandingHeightButton,\n title: 'Button',\n w: 150,\n h: 75\n }))\n }\n };\n }\n };;\n\nexport const VaryingItemWidth = () =>\n class VaryingItemWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 10, {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n })\n }\n };\n }\n };;\n\nexport const ExpandableWidth = () =>\n class ExpandableWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 6)\n }\n };\n }\n };;\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 1)\n }\n ]\n }\n };\n }\n };;\nCenteredInParent.parameters = {\n storyDetails:\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\n};\n\nexport const Plinko = () => {\n return class Plinko extends lng.Component {\n static _template() {\n const skipFocusButtons = createItems(Button, 3);\n skipFocusButtons[1].skipFocus = true;\n skipFocusButtons[1].title = 'Skip Focus';\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n autoResizeHeight: true,\n plinko: true,\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: skipFocusButtons\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n};;\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 13 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n }\n ]\n }\n };\n }\n };;\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const LazyScrollIndexes = ({\n startLazyScrollIndex,\n stopLazyScrollIndex\n}) =>\n class LazyScrollIndexes extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1} ${\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\n })),\n startLazyScrollIndex,\n stopLazyScrollIndex\n }\n };\n }\n };;\nLazyScrollIndexes.args = {\n ...sharedArgs,\n lazyScroll: true,\n startLazyScrollIndex: 1,\n stopLazyScrollIndex: 10\n};\nLazyScrollIndexes.argTypes = {\n ...sharedArgTypes,\n startLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\n table: { defaultValue: { summary: 0 } }\n },\n stopLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyScrollIndexes.parameters = {\n storyDetails:\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Row').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Row').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Row').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };;\nAddingItems.args = {\n ...sharedArgs,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\n};\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 12)\n }\n };\n }\n };;\nLazyUpCount.args = {\n ...sharedArgs,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2\n};\nLazyUpCount.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\n};\n\nexport const RemovingItems = () =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Row').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n ...sharedArgs\n};\nRemovingItems.argTypes = {\n ...sharedArgTypes\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { getWidthByUpCount } from '../../utils';\\nimport { default as RowComponent } from '.';\\nimport Column from '../Column';\\nimport mdx from './Row.mdx';\\nimport { context } from '../../globals';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Row`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\n/**\\n * Shared Args and Arg Types for Stories\\n */\\nconst sharedArgs = {\\n alwaysScroll: false,\\n lazyScroll: false,\\n neverScroll: false,\\n scrollIndex: 0,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\\n table: { defaultValue: { summary: false } }\\n },\\n neverScroll: {\\n control: 'boolean',\\n description:\\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\\n table: { defaultValue: { summary: false } }\\n },\\n lazyScroll: {\\n control: 'boolean',\\n description:\\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedWidth = false) => {\\n return Array.from({ length }).map((_, i) => ({\\n type: buttonType,\\n title: `Button ${i + 1}`,\\n ...(isVariedWidth\\n ? {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n }\\n : {})\\n }));\\n};\\n\\nclass ExpandingButton extends Button {\\n _construct() {\\n super._construct();\\n this.fixed = true;\\n this.w = 250;\\n }\\n _focus() {\\n super._focus();\\n this.smooth = { w: 350 };\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { w: 250 };\\n }\\n}\\n\\nclass ExpandingHeightButton extends Button {\\n _focus() {\\n super._focus();\\n this.smooth = { h: 150 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 75 };\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').on('txLoaded', () => {\\n this.w = this.tag('Label').renderWidth;\\n this.h = this.tag('Label').renderHeight;\\n this.fireAncestors('$itemChanged');\\n });\\n }\\n\\n set titleText(titleText) {\\n this.tag('Label').text = titleText;\\n }\\n}\\n\\n/**\\n * Stories for various versions of the component\\n */\\n\\nexport const Row = () =>\\n class Row extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\n\\nRow.args = sharedArgs;\\nRow.argTypes = sharedArgTypes;\\n\\nexport const FocusHeightChange = () =>\\n class FocusHeightChange extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 5 }).map(() => ({\\n type: ExpandingHeightButton,\\n title: 'Button',\\n w: 150,\\n h: 75\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemWidth = () =>\\n class VaryingItemWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 10, {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n })\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableWidth = () =>\\n class ExpandableWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 6)\\n }\\n };\\n }\\n };\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 1)\\n }\\n ]\\n }\\n };\\n }\\n };\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\\n};\\n\\nexport const Plinko = () => {\\n return class Plinko extends lng.Component {\\n static _template() {\\n const skipFocusButtons = createItems(Button, 3);\\n skipFocusButtons[1].skipFocus = true;\\n skipFocusButtons[1].title = 'Skip Focus';\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n autoResizeHeight: true,\\n plinko: true,\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: skipFocusButtons\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n};\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 13 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const LazyScrollIndexes = ({\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n}) =>\\n class LazyScrollIndexes extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1} ${\\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\\n })),\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n }\\n };\\n }\\n };\\nLazyScrollIndexes.args = {\\n ...sharedArgs,\\n lazyScroll: true,\\n startLazyScrollIndex: 1,\\n stopLazyScrollIndex: 10\\n};\\nLazyScrollIndexes.argTypes = {\\n ...sharedArgTypes,\\n startLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\\n table: { defaultValue: { summary: 0 } }\\n },\\n stopLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyScrollIndexes.parameters = {\\n storyDetails:\\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Row').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Row').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Row').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n ...sharedArgs,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\\n};\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n ...sharedArgs,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2\\n};\\nLazyUpCount.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\\n};\\n\\nexport const RemovingItems = () =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Row').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n ...sharedArgs\\n};\\nRemovingItems.argTypes = {\\n ...sharedArgTypes\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Row\":{\"startLoc\":{\"col\":19,\"line\":153},\"endLoc\":{\"col\":3,\"line\":164},\"startBody\":{\"col\":19,\"line\":153},\"endBody\":{\"col\":3,\"line\":164}},\"FocusHeightChange\":{\"startLoc\":{\"col\":33,\"line\":169},\"endLoc\":{\"col\":3,\"line\":185},\"startBody\":{\"col\":33,\"line\":169},\"endBody\":{\"col\":3,\"line\":185}},\"VaryingItemWidth\":{\"startLoc\":{\"col\":32,\"line\":187},\"endLoc\":{\"col\":3,\"line\":201},\"startBody\":{\"col\":32,\"line\":187},\"endBody\":{\"col\":3,\"line\":201}},\"ExpandableWidth\":{\"startLoc\":{\"col\":31,\"line\":203},\"endLoc\":{\"col\":3,\"line\":214},\"startBody\":{\"col\":31,\"line\":203},\"endBody\":{\"col\":3,\"line\":214}},\"CenteredInParent\":{\"startLoc\":{\"col\":32,\"line\":216},\"endLoc\":{\"col\":3,\"line\":242},\"startBody\":{\"col\":32,\"line\":216},\"endBody\":{\"col\":3,\"line\":242}},\"Plinko\":{\"startLoc\":{\"col\":22,\"line\":248},\"endLoc\":{\"col\":1,\"line\":286},\"startBody\":{\"col\":22,\"line\":248},\"endBody\":{\"col\":1,\"line\":286}},\"SkipFocus\":{\"startLoc\":{\"col\":25,\"line\":288},\"endLoc\":{\"col\":3,\"line\":315},\"startBody\":{\"col\":25,\"line\":288},\"endBody\":{\"col\":3,\"line\":315}},\"LazyScrollIndexes\":{\"startLoc\":{\"col\":33,\"line\":330},\"endLoc\":{\"col\":3,\"line\":351},\"startBody\":{\"col\":33,\"line\":330},\"endBody\":{\"col\":3,\"line\":351}},\"AddingItems\":{\"startLoc\":{\"col\":27,\"line\":378},\"endLoc\":{\"col\":3,\"line\":445},\"startBody\":{\"col\":27,\"line\":378},\"endBody\":{\"col\":3,\"line\":445}},\"LazyUpCount\":{\"startLoc\":{\"col\":27,\"line\":475},\"endLoc\":{\"col\":3,\"line\":488},\"startBody\":{\"col\":27,\"line\":475},\"endBody\":{\"col\":3,\"line\":488}},\"RemovingItems\":{\"startLoc\":{\"col\":29,\"line\":518},\"endLoc\":{\"col\":3,\"line\":544},\"startBody\":{\"col\":29,\"line\":518},\"endBody\":{\"col\":3,\"line\":544}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { getWidthByUpCount } from '../../utils';\nimport { default as RowComponent } from '.';\nimport Column from '../Column';\nimport mdx from './Row.mdx';\nimport { context } from '../../globals';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[8]}/Row`,\n 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 { getWidthByUpCount } from '../../utils';\\nimport { default as RowComponent } from '.';\\nimport Column from '../Column';\\nimport mdx from './Row.mdx';\\nimport { context } from '../../globals';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { SignalButton } from '../../docs/story-components';\\nimport Button from '../Button';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Row`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\n/**\\n * Shared Args and Arg Types for Stories\\n */\\nconst sharedArgs = {\\n alwaysScroll: false,\\n lazyScroll: false,\\n neverScroll: false,\\n scrollIndex: 0,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n scrollIndex: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\\n table: { defaultValue: { summary: 0 } }\\n },\\n alwaysScroll: {\\n control: 'boolean',\\n description:\\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\\n table: { defaultValue: { summary: false } }\\n },\\n neverScroll: {\\n control: 'boolean',\\n description:\\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\\n table: { defaultValue: { summary: false } }\\n },\\n lazyScroll: {\\n control: 'boolean',\\n description:\\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\n// creates an array of buttons to be used in Stories\\nconst createItems = (buttonType, length, isVariedWidth = false) => {\\n return Array.from({ length }).map((_, i) => ({\\n type: buttonType,\\n title: `Button ${i + 1}`,\\n ...(isVariedWidth\\n ? {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n }\\n : {})\\n }));\\n};\\n\\nclass ExpandingButton extends Button {\\n _construct() {\\n super._construct();\\n this.fixed = true;\\n this.w = 250;\\n }\\n _focus() {\\n super._focus();\\n this.smooth = { w: 350 };\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { w: 250 };\\n }\\n}\\n\\nclass ExpandingHeightButton extends Button {\\n _focus() {\\n super._focus();\\n this.smooth = { h: 150 };\\n this.fireAncestors('$itemChanged');\\n }\\n\\n _unfocus() {\\n super._unfocus();\\n this.smooth = { h: 75 };\\n }\\n}\\n\\nclass Title extends lng.Component {\\n static _template() {\\n return {\\n Label: {\\n x: 75,\\n y: 22,\\n mount: 0.5,\\n color: 0xffffffff,\\n text: { fontSize: 20 }\\n }\\n };\\n }\\n\\n _init() {\\n this.tag('Label').on('txLoaded', () => {\\n this.w = this.tag('Label').renderWidth;\\n this.h = this.tag('Label').renderHeight;\\n this.fireAncestors('$itemChanged');\\n });\\n }\\n\\n set titleText(titleText) {\\n this.tag('Label').text = titleText;\\n }\\n}\\n\\n/**\\n * Stories for various versions of the component\\n */\\n\\nexport const Row = () =>\\n class Row extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\n\\nRow.args = sharedArgs;\\nRow.argTypes = sharedArgTypes;\\n\\nexport const FocusHeightChange = () =>\\n class FocusHeightChange extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 5 }).map(() => ({\\n type: ExpandingHeightButton,\\n title: 'Button',\\n w: 150,\\n h: 75\\n }))\\n }\\n };\\n }\\n };\\n\\nexport const VaryingItemWidth = () =>\\n class VaryingItemWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(Button, 10, {\\n fixed: true,\\n w: 200 + Math.floor(Math.random() * 100)\\n })\\n }\\n };\\n }\\n };\\n\\nexport const ExpandableWidth = () =>\\n class ExpandableWidth extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: createItems(ExpandingButton, 6)\\n }\\n };\\n }\\n };\\n\\nexport const CenteredInParent = () =>\\n class CenteredInParent extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n autoResizeHeight: true,\\n w: getWidthByUpCount(context.theme, 1),\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n autoResizeHeight: true,\\n centerInParent: true,\\n items: createItems(Button, 1)\\n }\\n ]\\n }\\n };\\n }\\n };\\nCenteredInParent.parameters = {\\n storyDetails:\\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\\n};\\n\\nexport const Plinko = () => {\\n return class Plinko extends lng.Component {\\n static _template() {\\n const skipFocusButtons = createItems(Button, 3);\\n skipFocusButtons[1].skipFocus = true;\\n skipFocusButtons[1].title = 'Skip Focus';\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n autoResizeHeight: true,\\n plinko: true,\\n items: [\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: skipFocusButtons\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n },\\n {\\n type: Column,\\n autoResizeWidth: true,\\n items: createItems(Button, 3)\\n }\\n ]\\n }\\n };\\n }\\n };\\n};\\n\\nexport const SkipFocus = args =>\\n class SkipFocus extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n wrapSelected: args.wrapSelected,\\n items: [\\n ...Array.apply(null, { length: 13 }).map((_, i) => {\\n if (i % 4 === 0)\\n return {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n };\\n return { type: Button, title: 'Button' };\\n }),\\n {\\n type: Title,\\n titleText: 'Skip Focus Text',\\n skipFocus: true\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nSkipFocus.args = {\\n wrapSelected: false\\n};\\n\\nSkipFocus.argTypes = {\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const LazyScrollIndexes = ({\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n}) =>\\n class LazyScrollIndexes extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1),\\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1} ${\\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\\n })),\\n startLazyScrollIndex,\\n stopLazyScrollIndex\\n }\\n };\\n }\\n };\\nLazyScrollIndexes.args = {\\n ...sharedArgs,\\n lazyScroll: true,\\n startLazyScrollIndex: 1,\\n stopLazyScrollIndex: 10\\n};\\nLazyScrollIndexes.argTypes = {\\n ...sharedArgTypes,\\n startLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\\n table: { defaultValue: { summary: 0 } }\\n },\\n stopLazyScrollIndex: {\\n control: 'number',\\n description:\\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\\n table: { defaultValue: { summary: 0 } }\\n }\\n};\\nLazyScrollIndexes.parameters = {\\n storyDetails:\\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\\n};\\n\\nexport const AddingItems = args =>\\n class AddingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n signals: {\\n append: 'appendButton',\\n appendAt: 'appendButtonAt',\\n prepend: 'prependButton'\\n },\\n items: [\\n {\\n type: SignalButton,\\n title: 'Prepend 1 Button (prependItems)',\\n signalName: 'prepend',\\n passSignals: { prepend: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button at index 1 (appendItemsAt)',\\n signalName: 'appendAt',\\n passSignals: { appendAt: true }\\n },\\n {\\n type: SignalButton,\\n title: 'Append 1 Button to the Row (appendItems)',\\n signalName: 'append',\\n passSignals: { append: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n prependButton() {\\n this.tag('Row').prependItems([\\n {\\n type: Button,\\n title: 'Prepended Button'\\n }\\n ]);\\n }\\n\\n appendButtonAt() {\\n this.tag('Row').appendItemsAt(\\n [\\n {\\n type: Button,\\n title: 'Appended Button at index 1'\\n }\\n ],\\n 1\\n );\\n }\\n\\n appendButton() {\\n this.tag('Row').appendItems([\\n {\\n type: Button,\\n title: 'Appended Button'\\n }\\n ]);\\n }\\n };\\nAddingItems.args = {\\n ...sharedArgs,\\n lazyUpCount: undefined,\\n lazyUpCountBuffer: 2\\n};\\nAddingItems.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nAddingItems.parameters = {\\n storyDetails:\\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\\n};\\n\\nexport const LazyUpCount = args =>\\n class LazyUpCount extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n lazyUpCount: args.lazyUpCount,\\n lazyUpCountBuffer: args.lazyUpCountBuffer,\\n items: createItems(Button, 12)\\n }\\n };\\n }\\n };\\nLazyUpCount.args = {\\n ...sharedArgs,\\n lazyUpCount: 5,\\n lazyUpCountBuffer: 2\\n};\\nLazyUpCount.argTypes = {\\n ...sharedArgTypes,\\n lazyUpCount: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n lazyUpCountBuffer: {\\n control: 'number',\\n description:\\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\\n table: {\\n defaultValue: { summary: 2 }\\n }\\n }\\n};\\nLazyUpCount.parameters = {\\n storyDetails:\\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\\n};\\n\\nexport const RemovingItems = () =>\\n class RemovingItems extends lng.Component {\\n static _template() {\\n return {\\n Row: {\\n type: RowComponent,\\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\\n signals: {\\n removeAt: 'removeButton'\\n },\\n items: [\\n ...createItems(Button, 2),\\n {\\n type: SignalButton,\\n title: 'Press Enter on this button to remove it (removeItemAt)',\\n signalName: 'removeAt',\\n passSignals: { removeAt: true }\\n }\\n ]\\n }\\n };\\n }\\n\\n removeButton() {\\n this.tag('Row').removeItemAt(2);\\n }\\n };\\nRemovingItems.args = {\\n ...sharedArgs\\n};\\nRemovingItems.argTypes = {\\n ...sharedArgTypes\\n};\\nRemovingItems.parameters = {\\n storyDetails:\\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\\n};\\n\",\"locationsMap\":{\"row\":{\"startLoc\":{\"col\":19,\"line\":153},\"endLoc\":{\"col\":3,\"line\":164},\"startBody\":{\"col\":19,\"line\":153},\"endBody\":{\"col\":3,\"line\":164}},\"focus-height-change\":{\"startLoc\":{\"col\":33,\"line\":169},\"endLoc\":{\"col\":3,\"line\":185},\"startBody\":{\"col\":33,\"line\":169},\"endBody\":{\"col\":3,\"line\":185}},\"varying-item-width\":{\"startLoc\":{\"col\":32,\"line\":187},\"endLoc\":{\"col\":3,\"line\":201},\"startBody\":{\"col\":32,\"line\":187},\"endBody\":{\"col\":3,\"line\":201}},\"expandable-width\":{\"startLoc\":{\"col\":31,\"line\":203},\"endLoc\":{\"col\":3,\"line\":214},\"startBody\":{\"col\":31,\"line\":203},\"endBody\":{\"col\":3,\"line\":214}},\"centered-in-parent\":{\"startLoc\":{\"col\":32,\"line\":216},\"endLoc\":{\"col\":3,\"line\":242},\"startBody\":{\"col\":32,\"line\":216},\"endBody\":{\"col\":3,\"line\":242}},\"plinko\":{\"startLoc\":{\"col\":22,\"line\":248},\"endLoc\":{\"col\":1,\"line\":286},\"startBody\":{\"col\":22,\"line\":248},\"endBody\":{\"col\":1,\"line\":286}},\"skip-focus\":{\"startLoc\":{\"col\":25,\"line\":288},\"endLoc\":{\"col\":3,\"line\":315},\"startBody\":{\"col\":25,\"line\":288},\"endBody\":{\"col\":3,\"line\":315}},\"lazy-scroll-indexes\":{\"startLoc\":{\"col\":33,\"line\":330},\"endLoc\":{\"col\":3,\"line\":351},\"startBody\":{\"col\":33,\"line\":330},\"endBody\":{\"col\":3,\"line\":351}},\"adding-items\":{\"startLoc\":{\"col\":27,\"line\":378},\"endLoc\":{\"col\":3,\"line\":445},\"startBody\":{\"col\":27,\"line\":378},\"endBody\":{\"col\":3,\"line\":445}},\"lazy-up-count\":{\"startLoc\":{\"col\":27,\"line\":475},\"endLoc\":{\"col\":3,\"line\":488},\"startBody\":{\"col\":27,\"line\":475},\"endBody\":{\"col\":3,\"line\":488}},\"removing-items\":{\"startLoc\":{\"col\":29,\"line\":518},\"endLoc\":{\"col\":3,\"line\":544},\"startBody\":{\"col\":29,\"line\":518},\"endBody\":{\"col\":3,\"line\":544}}}},\n docs: {\n page: mdx\n },\n remountAll: true\n },};\n\n/**\n * Shared Args and Arg Types for Stories\n */\nconst sharedArgs = {\n alwaysScroll: false,\n lazyScroll: false,\n neverScroll: false,\n scrollIndex: 0,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\n table: { defaultValue: { summary: false } }\n },\n neverScroll: {\n control: 'boolean',\n description:\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\n table: { defaultValue: { summary: false } }\n },\n lazyScroll: {\n control: 'boolean',\n description:\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\n table: { defaultValue: { summary: false } }\n }\n};\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedWidth = false) => {\n return Array.from({ length }).map((_, i) => ({\n type: buttonType,\n title: `Button ${i + 1}`,\n ...(isVariedWidth\n ? {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n }\n : {})\n }));\n};\n\nclass ExpandingButton extends Button {\n _construct() {\n super._construct();\n this.fixed = true;\n this.w = 250;\n }\n _focus() {\n super._focus();\n this.smooth = { w: 350 };\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { w: 250 };\n }\n}\n\nclass ExpandingHeightButton extends Button {\n _focus() {\n super._focus();\n this.smooth = { h: 150 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 75 };\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').on('txLoaded', () => {\n this.w = this.tag('Label').renderWidth;\n this.h = this.tag('Label').renderHeight;\n this.fireAncestors('$itemChanged');\n });\n }\n\n set titleText(titleText) {\n this.tag('Label').text = titleText;\n }\n}\n\n/**\n * Stories for various versions of the component\n */\n\nexport const Row = () =>\n class Row extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 12)\n }\n };\n }\n };;\n\nRow.args = sharedArgs;\nRow.argTypes = sharedArgTypes;\n\nexport const FocusHeightChange = () =>\n class FocusHeightChange extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 5 }).map(() => ({\n type: ExpandingHeightButton,\n title: 'Button',\n w: 150,\n h: 75\n }))\n }\n };\n }\n };;\n\nexport const VaryingItemWidth = () =>\n class VaryingItemWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 10, {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n })\n }\n };\n }\n };;\n\nexport const ExpandableWidth = () =>\n class ExpandableWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 6)\n }\n };\n }\n };;\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 1)\n }\n ]\n }\n };\n }\n };;\nCenteredInParent.parameters = {\n storyDetails:\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\n};\n\nexport const Plinko = () => {\n return class Plinko extends lng.Component {\n static _template() {\n const skipFocusButtons = createItems(Button, 3);\n skipFocusButtons[1].skipFocus = true;\n skipFocusButtons[1].title = 'Skip Focus';\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n autoResizeHeight: true,\n plinko: true,\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: skipFocusButtons\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n};;\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 13 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n }\n ]\n }\n };\n }\n };;\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const LazyScrollIndexes = ({\n startLazyScrollIndex,\n stopLazyScrollIndex\n}) =>\n class LazyScrollIndexes extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1} ${\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\n })),\n startLazyScrollIndex,\n stopLazyScrollIndex\n }\n };\n }\n };;\nLazyScrollIndexes.args = {\n ...sharedArgs,\n lazyScroll: true,\n startLazyScrollIndex: 1,\n stopLazyScrollIndex: 10\n};\nLazyScrollIndexes.argTypes = {\n ...sharedArgTypes,\n startLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\n table: { defaultValue: { summary: 0 } }\n },\n stopLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyScrollIndexes.parameters = {\n storyDetails:\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Row').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Row').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Row').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };;\nAddingItems.args = {\n ...sharedArgs,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\n};\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 12)\n }\n };\n }\n };;\nLazyUpCount.args = {\n ...sharedArgs,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2\n};\nLazyUpCount.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\n};\n\nexport const RemovingItems = () =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Row').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n ...sharedArgs\n};\nRemovingItems.argTypes = {\n ...sharedArgTypes\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Row": { @@ -46285,7 +46213,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { getWidthByUpCount } from '../../utils';\nimport { default as RowComponent } from '.';\nimport Column from '../Column';\nimport mdx from './Row.mdx';\nimport { context } from '../../globals';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[64]}/Row`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\n/**\n * Shared Args and Arg Types for Stories\n */\nconst sharedArgs = {\n alwaysScroll: false,\n lazyScroll: false,\n neverScroll: false,\n scrollIndex: 0,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\n table: { defaultValue: { summary: false } }\n },\n neverScroll: {\n control: 'boolean',\n description:\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\n table: { defaultValue: { summary: false } }\n },\n lazyScroll: {\n control: 'boolean',\n description:\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\n table: { defaultValue: { summary: false } }\n }\n};\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedWidth = false) => {\n return Array.from({ length }).map((_, i) => ({\n type: buttonType,\n title: `Button ${i + 1}`,\n ...(isVariedWidth\n ? {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n }\n : {})\n }));\n};\n\nclass ExpandingButton extends Button {\n _construct() {\n super._construct();\n this.fixed = true;\n this.w = 250;\n }\n _focus() {\n super._focus();\n this.smooth = { w: 350 };\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { w: 250 };\n }\n}\n\nclass ExpandingHeightButton extends Button {\n _focus() {\n super._focus();\n this.smooth = { h: 150 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 75 };\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').on('txLoaded', () => {\n this.w = this.tag('Label').renderWidth;\n this.h = this.tag('Label').renderHeight;\n this.fireAncestors('$itemChanged');\n });\n }\n\n set titleText(titleText) {\n this.tag('Label').text = titleText;\n }\n}\n\n/**\n * Stories for various versions of the component\n */\n\nexport const Row = () =>\n class Row extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 12)\n }\n };\n }\n };\n\nRow.args = sharedArgs;\nRow.argTypes = sharedArgTypes;\n\nexport const FocusHeightChange = () =>\n class FocusHeightChange extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 5 }).map(() => ({\n type: ExpandingHeightButton,\n title: 'Button',\n w: 150,\n h: 75\n }))\n }\n };\n }\n };\n\nexport const VaryingItemWidth = () =>\n class VaryingItemWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 10, {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n })\n }\n };\n }\n };\n\nexport const ExpandableWidth = () =>\n class ExpandableWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 6)\n }\n };\n }\n };\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 1)\n }\n ]\n }\n };\n }\n };\nCenteredInParent.parameters = {\n storyDetails:\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\n};\n\nexport const Plinko = () => {\n return class Plinko extends lng.Component {\n static _template() {\n const skipFocusButtons = createItems(Button, 3);\n skipFocusButtons[1].skipFocus = true;\n skipFocusButtons[1].title = 'Skip Focus';\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n autoResizeHeight: true,\n plinko: true,\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: skipFocusButtons\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n};\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 13 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const LazyScrollIndexes = ({\n startLazyScrollIndex,\n stopLazyScrollIndex\n}) =>\n class LazyScrollIndexes extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1} ${\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\n })),\n startLazyScrollIndex,\n stopLazyScrollIndex\n }\n };\n }\n };\nLazyScrollIndexes.args = {\n ...sharedArgs,\n lazyScroll: true,\n startLazyScrollIndex: 1,\n stopLazyScrollIndex: 10\n};\nLazyScrollIndexes.argTypes = {\n ...sharedArgTypes,\n startLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\n table: { defaultValue: { summary: 0 } }\n },\n stopLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyScrollIndexes.parameters = {\n storyDetails:\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Row').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Row').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Row').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n ...sharedArgs,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\n};\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 12)\n }\n };\n }\n };\nLazyUpCount.args = {\n ...sharedArgs,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2\n};\nLazyUpCount.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\n};\n\nexport const RemovingItems = () =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Row').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n ...sharedArgs\n};\nRemovingItems.argTypes = {\n ...sharedArgTypes\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\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 { getWidthByUpCount } from '../../utils';\nimport { default as RowComponent } from '.';\nimport Column from '../Column';\nimport mdx from './Row.mdx';\nimport { context } from '../../globals';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[8]}/Row`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\n/**\n * Shared Args and Arg Types for Stories\n */\nconst sharedArgs = {\n alwaysScroll: false,\n lazyScroll: false,\n neverScroll: false,\n scrollIndex: 0,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\n table: { defaultValue: { summary: false } }\n },\n neverScroll: {\n control: 'boolean',\n description:\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\n table: { defaultValue: { summary: false } }\n },\n lazyScroll: {\n control: 'boolean',\n description:\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\n table: { defaultValue: { summary: false } }\n }\n};\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedWidth = false) => {\n return Array.from({ length }).map((_, i) => ({\n type: buttonType,\n title: `Button ${i + 1}`,\n ...(isVariedWidth\n ? {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n }\n : {})\n }));\n};\n\nclass ExpandingButton extends Button {\n _construct() {\n super._construct();\n this.fixed = true;\n this.w = 250;\n }\n _focus() {\n super._focus();\n this.smooth = { w: 350 };\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { w: 250 };\n }\n}\n\nclass ExpandingHeightButton extends Button {\n _focus() {\n super._focus();\n this.smooth = { h: 150 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 75 };\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').on('txLoaded', () => {\n this.w = this.tag('Label').renderWidth;\n this.h = this.tag('Label').renderHeight;\n this.fireAncestors('$itemChanged');\n });\n }\n\n set titleText(titleText) {\n this.tag('Label').text = titleText;\n }\n}\n\n/**\n * Stories for various versions of the component\n */\n\nexport const Row = () =>\n class Row extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 12)\n }\n };\n }\n };\n\nRow.args = sharedArgs;\nRow.argTypes = sharedArgTypes;\n\nexport const FocusHeightChange = () =>\n class FocusHeightChange extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 5 }).map(() => ({\n type: ExpandingHeightButton,\n title: 'Button',\n w: 150,\n h: 75\n }))\n }\n };\n }\n };\n\nexport const VaryingItemWidth = () =>\n class VaryingItemWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 10, {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n })\n }\n };\n }\n };\n\nexport const ExpandableWidth = () =>\n class ExpandableWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 6)\n }\n };\n }\n };\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 1)\n }\n ]\n }\n };\n }\n };\nCenteredInParent.parameters = {\n storyDetails:\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\n};\n\nexport const Plinko = () => {\n return class Plinko extends lng.Component {\n static _template() {\n const skipFocusButtons = createItems(Button, 3);\n skipFocusButtons[1].skipFocus = true;\n skipFocusButtons[1].title = 'Skip Focus';\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n autoResizeHeight: true,\n plinko: true,\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: skipFocusButtons\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n};\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 13 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const LazyScrollIndexes = ({\n startLazyScrollIndex,\n stopLazyScrollIndex\n}) =>\n class LazyScrollIndexes extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1} ${\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\n })),\n startLazyScrollIndex,\n stopLazyScrollIndex\n }\n };\n }\n };\nLazyScrollIndexes.args = {\n ...sharedArgs,\n lazyScroll: true,\n startLazyScrollIndex: 1,\n stopLazyScrollIndex: 10\n};\nLazyScrollIndexes.argTypes = {\n ...sharedArgTypes,\n startLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\n table: { defaultValue: { summary: 0 } }\n },\n stopLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyScrollIndexes.parameters = {\n storyDetails:\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Row').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Row').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Row').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n ...sharedArgs,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\n};\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 12)\n }\n };\n }\n };\nLazyUpCount.args = {\n ...sharedArgs,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2\n};\nLazyUpCount.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\n};\n\nexport const RemovingItems = () =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Row').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n ...sharedArgs\n};\nRemovingItems.argTypes = {\n ...sharedArgTypes\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Row": { @@ -46517,10 +46445,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Row_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][64] + "/Row", + title: constants["a" /* CATEGORIES */][8] + "/Row", 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 { getWidthByUpCount } from '../../utils';\nimport { default as RowComponent } from '.';\nimport Column from '../Column';\nimport mdx from './Row.mdx';\nimport { context } from '../../globals';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[64]}/Row`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\n/**\n * Shared Args and Arg Types for Stories\n */\nconst sharedArgs = {\n alwaysScroll: false,\n lazyScroll: false,\n neverScroll: false,\n scrollIndex: 0,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\n table: { defaultValue: { summary: false } }\n },\n neverScroll: {\n control: 'boolean',\n description:\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\n table: { defaultValue: { summary: false } }\n },\n lazyScroll: {\n control: 'boolean',\n description:\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\n table: { defaultValue: { summary: false } }\n }\n};\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedWidth = false) => {\n return Array.from({ length }).map((_, i) => ({\n type: buttonType,\n title: `Button ${i + 1}`,\n ...(isVariedWidth\n ? {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n }\n : {})\n }));\n};\n\nclass ExpandingButton extends Button {\n _construct() {\n super._construct();\n this.fixed = true;\n this.w = 250;\n }\n _focus() {\n super._focus();\n this.smooth = { w: 350 };\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { w: 250 };\n }\n}\n\nclass ExpandingHeightButton extends Button {\n _focus() {\n super._focus();\n this.smooth = { h: 150 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 75 };\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').on('txLoaded', () => {\n this.w = this.tag('Label').renderWidth;\n this.h = this.tag('Label').renderHeight;\n this.fireAncestors('$itemChanged');\n });\n }\n\n set titleText(titleText) {\n this.tag('Label').text = titleText;\n }\n}\n\n/**\n * Stories for various versions of the component\n */\n\nexport const Row = () =>\n class Row extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 12)\n }\n };\n }\n };\n\nRow.args = sharedArgs;\nRow.argTypes = sharedArgTypes;\n\nexport const FocusHeightChange = () =>\n class FocusHeightChange extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 5 }).map(() => ({\n type: ExpandingHeightButton,\n title: 'Button',\n w: 150,\n h: 75\n }))\n }\n };\n }\n };\n\nexport const VaryingItemWidth = () =>\n class VaryingItemWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 10, {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n })\n }\n };\n }\n };\n\nexport const ExpandableWidth = () =>\n class ExpandableWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 6)\n }\n };\n }\n };\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 1)\n }\n ]\n }\n };\n }\n };\nCenteredInParent.parameters = {\n storyDetails:\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\n};\n\nexport const Plinko = () => {\n return class Plinko extends lng.Component {\n static _template() {\n const skipFocusButtons = createItems(Button, 3);\n skipFocusButtons[1].skipFocus = true;\n skipFocusButtons[1].title = 'Skip Focus';\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n autoResizeHeight: true,\n plinko: true,\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: skipFocusButtons\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n};\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 13 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const LazyScrollIndexes = ({\n startLazyScrollIndex,\n stopLazyScrollIndex\n}) =>\n class LazyScrollIndexes extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1} ${\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\n })),\n startLazyScrollIndex,\n stopLazyScrollIndex\n }\n };\n }\n };\nLazyScrollIndexes.args = {\n ...sharedArgs,\n lazyScroll: true,\n startLazyScrollIndex: 1,\n stopLazyScrollIndex: 10\n};\nLazyScrollIndexes.argTypes = {\n ...sharedArgTypes,\n startLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\n table: { defaultValue: { summary: 0 } }\n },\n stopLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyScrollIndexes.parameters = {\n storyDetails:\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Row').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Row').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Row').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n ...sharedArgs,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\n};\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 12)\n }\n };\n }\n };\nLazyUpCount.args = {\n ...sharedArgs,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2\n};\nLazyUpCount.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\n};\n\nexport const RemovingItems = () =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Row').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n ...sharedArgs\n};\nRemovingItems.argTypes = {\n ...sharedArgTypes\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\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 { getWidthByUpCount } from '../../utils';\nimport { default as RowComponent } from '.';\nimport Column from '../Column';\nimport mdx from './Row.mdx';\nimport { context } from '../../globals';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { SignalButton } from '../../docs/story-components';\nimport Button from '../Button';\n\nexport default {\n title: `${CATEGORIES[8]}/Row`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\n/**\n * Shared Args and Arg Types for Stories\n */\nconst sharedArgs = {\n alwaysScroll: false,\n lazyScroll: false,\n neverScroll: false,\n scrollIndex: 0,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n scrollIndex: {\n control: { type: 'number', min: 0 },\n description:\n 'Item index at which scrolling begins, provided the sum of item widths is greater than the width of the Row',\n table: { defaultValue: { summary: 0 } }\n },\n alwaysScroll: {\n control: 'boolean',\n description:\n 'Determines whether the row will stop scrolling as it nears the right to prevent white space',\n table: { defaultValue: { summary: false } }\n },\n neverScroll: {\n control: 'boolean',\n description:\n 'If true, the row will never scroll, unless alwaysScroll is set to true, and if false, the row will apply normal scrolling logic',\n table: { defaultValue: { summary: false } }\n },\n lazyScroll: {\n control: 'boolean',\n description:\n 'Will only scroll the row if the item is off screen and alwaysScroll and neverScroll are both false',\n table: { defaultValue: { summary: false } }\n }\n};\n\n// creates an array of buttons to be used in Stories\nconst createItems = (buttonType, length, isVariedWidth = false) => {\n return Array.from({ length }).map((_, i) => ({\n type: buttonType,\n title: `Button ${i + 1}`,\n ...(isVariedWidth\n ? {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n }\n : {})\n }));\n};\n\nclass ExpandingButton extends Button {\n _construct() {\n super._construct();\n this.fixed = true;\n this.w = 250;\n }\n _focus() {\n super._focus();\n this.smooth = { w: 350 };\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { w: 250 };\n }\n}\n\nclass ExpandingHeightButton extends Button {\n _focus() {\n super._focus();\n this.smooth = { h: 150 };\n this.fireAncestors('$itemChanged');\n }\n\n _unfocus() {\n super._unfocus();\n this.smooth = { h: 75 };\n }\n}\n\nclass Title extends lng.Component {\n static _template() {\n return {\n Label: {\n x: 75,\n y: 22,\n mount: 0.5,\n color: 0xffffffff,\n text: { fontSize: 20 }\n }\n };\n }\n\n _init() {\n this.tag('Label').on('txLoaded', () => {\n this.w = this.tag('Label').renderWidth;\n this.h = this.tag('Label').renderHeight;\n this.fireAncestors('$itemChanged');\n });\n }\n\n set titleText(titleText) {\n this.tag('Label').text = titleText;\n }\n}\n\n/**\n * Stories for various versions of the component\n */\n\nexport const Row = () =>\n class Row extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 12)\n }\n };\n }\n };\n\nRow.args = sharedArgs;\nRow.argTypes = sharedArgTypes;\n\nexport const FocusHeightChange = () =>\n class FocusHeightChange extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 5 }).map(() => ({\n type: ExpandingHeightButton,\n title: 'Button',\n w: 150,\n h: 75\n }))\n }\n };\n }\n };\n\nexport const VaryingItemWidth = () =>\n class VaryingItemWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(Button, 10, {\n fixed: true,\n w: 200 + Math.floor(Math.random() * 100)\n })\n }\n };\n }\n };\n\nexport const ExpandableWidth = () =>\n class ExpandableWidth extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: createItems(ExpandingButton, 6)\n }\n };\n }\n };\n\nexport const CenteredInParent = () =>\n class CenteredInParent extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n autoResizeHeight: true,\n w: getWidthByUpCount(context.theme, 1),\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n autoResizeHeight: true,\n centerInParent: true,\n items: createItems(Button, 1)\n }\n ]\n }\n };\n }\n };\nCenteredInParent.parameters = {\n storyDetails:\n 'This Row has 2 Columns as items. The second Column with 1 Button as an item has the centerInParent property enabled so it is vertically centered in the Row.'\n};\n\nexport const Plinko = () => {\n return class Plinko extends lng.Component {\n static _template() {\n const skipFocusButtons = createItems(Button, 3);\n skipFocusButtons[1].skipFocus = true;\n skipFocusButtons[1].title = 'Skip Focus';\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n autoResizeHeight: true,\n plinko: true,\n items: [\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: skipFocusButtons\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n },\n {\n type: Column,\n autoResizeWidth: true,\n items: createItems(Button, 3)\n }\n ]\n }\n };\n }\n };\n};\n\nexport const SkipFocus = args =>\n class SkipFocus extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n wrapSelected: args.wrapSelected,\n items: [\n ...Array.apply(null, { length: 13 }).map((_, i) => {\n if (i % 4 === 0)\n return {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n };\n return { type: Button, title: 'Button' };\n }),\n {\n type: Title,\n titleText: 'Skip Focus Text',\n skipFocus: true\n }\n ]\n }\n };\n }\n };\n\nSkipFocus.args = {\n wrapSelected: false\n};\n\nSkipFocus.argTypes = {\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext() selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const LazyScrollIndexes = ({\n startLazyScrollIndex,\n stopLazyScrollIndex\n}) =>\n class LazyScrollIndexes extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1),\n items: Array.apply(null, { length: 12 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1} ${\n i === startLazyScrollIndex ? '(start lazy scroll)' : ''\n } ${i === stopLazyScrollIndex ? '(stop lazy scroll)' : ''}`\n })),\n startLazyScrollIndex,\n stopLazyScrollIndex\n }\n };\n }\n };\nLazyScrollIndexes.args = {\n ...sharedArgs,\n lazyScroll: true,\n startLazyScrollIndex: 1,\n stopLazyScrollIndex: 10\n};\nLazyScrollIndexes.argTypes = {\n ...sharedArgTypes,\n startLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items thereafter, at which lazy scrolling should occur at',\n table: { defaultValue: { summary: 0 } }\n },\n stopLazyScrollIndex: {\n control: 'number',\n description:\n 'Index of item in items, and items preceding, at which lazy scrolling should occur',\n table: { defaultValue: { summary: 0 } }\n }\n};\nLazyScrollIndexes.parameters = {\n storyDetails:\n 'Items before the item at startLazyScrollIndex and after the item at stopLazyScrollIndex will use alwaysScroll. Items at and between startLazyScrollIndex and stopLazyScrollIndex will use lazyScroll.'\n};\n\nexport const AddingItems = args =>\n class AddingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n signals: {\n append: 'appendButton',\n appendAt: 'appendButtonAt',\n prepend: 'prependButton'\n },\n items: [\n {\n type: SignalButton,\n title: 'Prepend 1 Button (prependItems)',\n signalName: 'prepend',\n passSignals: { prepend: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button at index 1 (appendItemsAt)',\n signalName: 'appendAt',\n passSignals: { appendAt: true }\n },\n {\n type: SignalButton,\n title: 'Append 1 Button to the Row (appendItems)',\n signalName: 'append',\n passSignals: { append: true }\n }\n ]\n }\n };\n }\n\n prependButton() {\n this.tag('Row').prependItems([\n {\n type: Button,\n title: 'Prepended Button'\n }\n ]);\n }\n\n appendButtonAt() {\n this.tag('Row').appendItemsAt(\n [\n {\n type: Button,\n title: 'Appended Button at index 1'\n }\n ],\n 1\n );\n }\n\n appendButton() {\n this.tag('Row').appendItems([\n {\n type: Button,\n title: 'Appended Button'\n }\n ]);\n }\n };\nAddingItems.args = {\n ...sharedArgs,\n lazyUpCount: undefined,\n lazyUpCountBuffer: 2\n};\nAddingItems.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nAddingItems.parameters = {\n storyDetails:\n 'The 3 buttons initially rendered in this story are configured to invoke 1 of the 3 methods available to add items to a Row (the name of the method used is in parenthesis on the button). Press enter on any of those 3 buttons to invoke that method and add a button to the Row.'\n};\n\nexport const LazyUpCount = args =>\n class LazyUpCount extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n lazyUpCount: args.lazyUpCount,\n lazyUpCountBuffer: args.lazyUpCountBuffer,\n items: createItems(Button, 12)\n }\n };\n }\n };\nLazyUpCount.args = {\n ...sharedArgs,\n lazyUpCount: 5,\n lazyUpCountBuffer: 2\n};\nLazyUpCount.argTypes = {\n ...sharedArgTypes,\n lazyUpCount: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n lazyUpCountBuffer: {\n control: 'number',\n description:\n 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**',\n table: {\n defaultValue: { summary: 2 }\n }\n }\n};\nLazyUpCount.parameters = {\n storyDetails:\n 'There are 12 items passed to this Row. The number of items that are initially rendered equals the sum of the lazyUpCount and the lazyUpCountBuffer properties. Each time the next item is selected, an additional item is added to the end of the Row until all 12 items have been rendered.'\n};\n\nexport const RemovingItems = () =>\n class RemovingItems extends lng.Component {\n static _template() {\n return {\n Row: {\n type: RowComponent,\n w: getWidthByUpCount(context.theme, 1), // x offset from preview.js * 2\n signals: {\n removeAt: 'removeButton'\n },\n items: [\n ...createItems(Button, 2),\n {\n type: SignalButton,\n title: 'Press Enter on this button to remove it (removeItemAt)',\n signalName: 'removeAt',\n passSignals: { removeAt: true }\n }\n ]\n }\n };\n }\n\n removeButton() {\n this.tag('Row').removeItemAt(2);\n }\n };\nRemovingItems.args = {\n ...sharedArgs\n};\nRemovingItems.argTypes = {\n ...sharedArgTypes\n};\nRemovingItems.parameters = {\n storyDetails:\n 'The third button in this row is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the row.'\n};\n", "locationsMap": { "row": { "startLoc": { @@ -48231,7 +48159,7 @@ function MDXContent(_ref) { }, "import { ScrollWrapper } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapper,\n h: 450,\n w: 600,\n content: 'Text content long enough to scroll vertically'\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "layout-scrollwrapper--basic", + id: "components-scrollwrapper--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "Alternatively, an array of components and ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" @@ -48243,7 +48171,7 @@ function MDXContent(_ref) { }, "import { ScrollWrapper } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapper,\n h: 450,\n w: 600,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontStyle: 'italic',\n alignContent: 'center'\n }\n },\n {\n text: 'Text content long enough to scroll vertically'\n }\n ]\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "layout-scrollwrapper--object-array", + id: "components-scrollwrapper--object-array", mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "The ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" @@ -48611,7 +48539,7 @@ function ScrollWrapper_stories_getPrototypeOf(o) { ScrollWrapper_stories_getProt /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ScrollWrapperComponent } from '.';\\nimport Tile from '../Tile';\\nimport mdx from './ScrollWrapper.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport TextBox from '../TextBox/TextBox.js';\\n\\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\\n\\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\\n\\nexport default {\\n title: `${CATEGORIES[16]}/ScrollWrapper`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n autoScroll: false,\\n autoScrollDelay: 2000,\\n autoScrollSpeed: 200,\\n fadeContent: true,\\n scrollDuration: 0.2,\\n scrollStep: 10,\\n showScrollBar: true,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({\\n options: ['unfocused', 'focused'],\\n summaryValue: false\\n }),\\n autoScroll: {\\n control: 'boolean',\\n description: 'Whether or not to auto scroll the content',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n autoScrollDelay: {\\n control: 'number',\\n description: 'Delay, in ms, before auto scroll starts',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n autoScrollSpeed: {\\n control: 'number',\\n description: 'Time delay, in ms, before each scroll step',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n fadeContent: {\\n control: 'boolean',\\n description: 'Fade out content at the bottom of the ScrollWrapper',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n scrollDuration: {\\n control: 'number',\\n description: 'Animation duration for the scroll',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 0.2 }\\n }\\n },\\n scrollStep: {\\n control: 'number',\\n description: 'How many pixels to scroll by on every up/down keypress',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 10 }\\n }\\n },\\n showScrollBar: {\\n control: 'boolean',\\n description: 'Show the scroll bar when focused ',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 448,\\n w: 796,\\n content: terms,\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nBasic.args = sharedArgs;\\nBasic.argTypes = sharedArgTypes;\\nBasic.parameters = {\\n storyDetails: 'The ScrollWrapper content property is set as a string.'\\n};\\n\\nexport const TextArray = args =>\\n class TextArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 450,\\n w: 600,\\n wordWrap: true,\\n content: [\\n {\\n text: 'Text Heading',\\n style: {\\n fontFace: 'XfinityBrownBold',\\n alignContent: 'center'\\n }\\n },\\n {\\n text: terms,\\n style: {\\n alignContent: 'left',\\n fontSize: '30'\\n }\\n }\\n ],\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nTextArray.args = sharedArgs;\\nTextArray.argTypes = sharedArgTypes;\\nTextArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\\n};\\n\\nexport const ObjectArray = args =>\\n class ObjectArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 764,\\n w: 1200,\\n shouldWrap: true, // determines if items should wrap around ScrollContainer\\n flexDirection: 'row', //determines the direction items are placed in flexContainer\\n content: Array.from(Array(6)).map(() => ({\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 16\\n },\\n type: Tile,\\n rect: true,\\n w: 308,\\n h: 400,\\n color: 0xf53e3e45,\\n flexItem: {\\n margin: 24\\n },\\n Text: {\\n type: TextBox,\\n x: 20,\\n y: 10,\\n content:\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\\n style: {\\n textStyle: {\\n fontSize: 27,\\n lineHeight: null,\\n maxLines: 0,\\n textAlign: 'left',\\n verticalAlign: 'middle',\\n wordWrapWidth: 270\\n }\\n },\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 0\\n }\\n }\\n })),\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nObjectArray.args = sharedArgs;\\nObjectArray.argTypes = sharedArgTypes;\\nObjectArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":114},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":21,\"line\":114},\"endBody\":{\"col\":3,\"line\":133}},\"TextArray\":{\"startLoc\":{\"col\":25,\"line\":141},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":25,\"line\":141},\"endBody\":{\"col\":3,\"line\":176}},\"ObjectArray\":{\"startLoc\":{\"col\":27,\"line\":185},\"endLoc\":{\"col\":3,\"line\":240},\"startBody\":{\"col\":27,\"line\":185},\"endBody\":{\"col\":3,\"line\":240}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport mdx from './ScrollWrapper.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport TextBox from '../TextBox/TextBox.js';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: `${CATEGORIES[16]}/ScrollWrapper`,\n 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 { default as ScrollWrapperComponent } from '.';\\nimport Tile from '../Tile';\\nimport mdx from './ScrollWrapper.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport TextBox from '../TextBox/TextBox.js';\\n\\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\\n\\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\\n\\nexport default {\\n title: `${CATEGORIES[16]}/ScrollWrapper`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n autoScroll: false,\\n autoScrollDelay: 2000,\\n autoScrollSpeed: 200,\\n fadeContent: true,\\n scrollDuration: 0.2,\\n scrollStep: 10,\\n showScrollBar: true,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({\\n options: ['unfocused', 'focused'],\\n summaryValue: false\\n }),\\n autoScroll: {\\n control: 'boolean',\\n description: 'Whether or not to auto scroll the content',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n autoScrollDelay: {\\n control: 'number',\\n description: 'Delay, in ms, before auto scroll starts',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n autoScrollSpeed: {\\n control: 'number',\\n description: 'Time delay, in ms, before each scroll step',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n fadeContent: {\\n control: 'boolean',\\n description: 'Fade out content at the bottom of the ScrollWrapper',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n scrollDuration: {\\n control: 'number',\\n description: 'Animation duration for the scroll',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 0.2 }\\n }\\n },\\n scrollStep: {\\n control: 'number',\\n description: 'How many pixels to scroll by on every up/down keypress',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 10 }\\n }\\n },\\n showScrollBar: {\\n control: 'boolean',\\n description: 'Show the scroll bar when focused ',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 448,\\n w: 796,\\n content: terms,\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nBasic.args = sharedArgs;\\nBasic.argTypes = sharedArgTypes;\\nBasic.parameters = {\\n storyDetails: 'The ScrollWrapper content property is set as a string.'\\n};\\n\\nexport const TextArray = args =>\\n class TextArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 450,\\n w: 600,\\n wordWrap: true,\\n content: [\\n {\\n text: 'Text Heading',\\n style: {\\n fontFace: 'XfinityBrownBold',\\n alignContent: 'center'\\n }\\n },\\n {\\n text: terms,\\n style: {\\n alignContent: 'left',\\n fontSize: '30'\\n }\\n }\\n ],\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nTextArray.args = sharedArgs;\\nTextArray.argTypes = sharedArgTypes;\\nTextArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\\n};\\n\\nexport const ObjectArray = args =>\\n class ObjectArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 764,\\n w: 1200,\\n shouldWrap: true, // determines if items should wrap around ScrollContainer\\n flexDirection: 'row', //determines the direction items are placed in flexContainer\\n content: Array.from(Array(6)).map(() => ({\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 16\\n },\\n type: Tile,\\n rect: true,\\n w: 308,\\n h: 400,\\n color: 0xf53e3e45,\\n flexItem: {\\n margin: 24\\n },\\n Text: {\\n type: TextBox,\\n x: 20,\\n y: 10,\\n content:\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\\n style: {\\n textStyle: {\\n fontSize: 27,\\n lineHeight: null,\\n maxLines: 0,\\n textAlign: 'left',\\n verticalAlign: 'middle',\\n wordWrapWidth: 270\\n }\\n },\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 0\\n }\\n }\\n })),\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nObjectArray.args = sharedArgs;\\nObjectArray.argTypes = sharedArgTypes;\\nObjectArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":114},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":21,\"line\":114},\"endBody\":{\"col\":3,\"line\":133}},\"text-array\":{\"startLoc\":{\"col\":25,\"line\":141},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":25,\"line\":141},\"endBody\":{\"col\":3,\"line\":176}},\"object-array\":{\"startLoc\":{\"col\":27,\"line\":185},\"endLoc\":{\"col\":3,\"line\":240},\"startBody\":{\"col\":27,\"line\":185},\"endBody\":{\"col\":3,\"line\":240}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };;\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };;\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ScrollWrapperComponent } from '.';\\nimport Tile from '../Tile';\\nimport mdx from './ScrollWrapper.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport TextBox from '../TextBox/TextBox.js';\\n\\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\\n\\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ScrollWrapper`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n autoScroll: false,\\n autoScrollDelay: 2000,\\n autoScrollSpeed: 200,\\n fadeContent: true,\\n scrollDuration: 0.2,\\n scrollStep: 10,\\n showScrollBar: true,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({\\n options: ['unfocused', 'focused'],\\n summaryValue: false\\n }),\\n autoScroll: {\\n control: 'boolean',\\n description: 'Whether or not to auto scroll the content',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n autoScrollDelay: {\\n control: 'number',\\n description: 'Delay, in ms, before auto scroll starts',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n autoScrollSpeed: {\\n control: 'number',\\n description: 'Time delay, in ms, before each scroll step',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n fadeContent: {\\n control: 'boolean',\\n description: 'Fade out content at the bottom of the ScrollWrapper',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n scrollDuration: {\\n control: 'number',\\n description: 'Animation duration for the scroll',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 0.2 }\\n }\\n },\\n scrollStep: {\\n control: 'number',\\n description: 'How many pixels to scroll by on every up/down keypress',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 10 }\\n }\\n },\\n showScrollBar: {\\n control: 'boolean',\\n description: 'Show the scroll bar when focused ',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 448,\\n w: 796,\\n content: terms,\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nBasic.args = sharedArgs;\\nBasic.argTypes = sharedArgTypes;\\nBasic.parameters = {\\n storyDetails: 'The ScrollWrapper content property is set as a string.'\\n};\\n\\nexport const TextArray = args =>\\n class TextArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 450,\\n w: 600,\\n wordWrap: true,\\n content: [\\n {\\n text: 'Text Heading',\\n style: {\\n fontFace: 'XfinityBrownBold',\\n alignContent: 'center'\\n }\\n },\\n {\\n text: terms,\\n style: {\\n alignContent: 'left',\\n fontSize: '30'\\n }\\n }\\n ],\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nTextArray.args = sharedArgs;\\nTextArray.argTypes = sharedArgTypes;\\nTextArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\\n};\\n\\nexport const ObjectArray = args =>\\n class ObjectArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 764,\\n w: 1200,\\n shouldWrap: true, // determines if items should wrap around ScrollContainer\\n flexDirection: 'row', //determines the direction items are placed in flexContainer\\n content: Array.from(Array(6)).map(() => ({\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 16\\n },\\n type: Tile,\\n rect: true,\\n w: 308,\\n h: 400,\\n color: 0xf53e3e45,\\n flexItem: {\\n margin: 24\\n },\\n Text: {\\n type: TextBox,\\n x: 20,\\n y: 10,\\n content:\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\\n style: {\\n textStyle: {\\n fontSize: 27,\\n lineHeight: null,\\n maxLines: 0,\\n textAlign: 'left',\\n verticalAlign: 'middle',\\n wordWrapWidth: 270\\n }\\n },\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 0\\n }\\n }\\n })),\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nObjectArray.args = sharedArgs;\\nObjectArray.argTypes = sharedArgTypes;\\nObjectArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":114},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":21,\"line\":114},\"endBody\":{\"col\":3,\"line\":133}},\"TextArray\":{\"startLoc\":{\"col\":25,\"line\":141},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":25,\"line\":141},\"endBody\":{\"col\":3,\"line\":176}},\"ObjectArray\":{\"startLoc\":{\"col\":27,\"line\":185},\"endLoc\":{\"col\":3,\"line\":240},\"startBody\":{\"col\":27,\"line\":185},\"endBody\":{\"col\":3,\"line\":240}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport mdx from './ScrollWrapper.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport TextBox from '../TextBox/TextBox.js';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: `${CATEGORIES[8]}/ScrollWrapper`,\n 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 { default as ScrollWrapperComponent } from '.';\\nimport Tile from '../Tile';\\nimport mdx from './ScrollWrapper.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport TextBox from '../TextBox/TextBox.js';\\n\\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\\n\\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ScrollWrapper`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgs = {\\n autoScroll: false,\\n autoScrollDelay: 2000,\\n autoScrollSpeed: 200,\\n fadeContent: true,\\n scrollDuration: 0.2,\\n scrollStep: 10,\\n showScrollBar: true,\\n mode: 'focused'\\n};\\n\\nconst sharedArgTypes = {\\n ...createModeControl({\\n options: ['unfocused', 'focused'],\\n summaryValue: false\\n }),\\n autoScroll: {\\n control: 'boolean',\\n description: 'Whether or not to auto scroll the content',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n autoScrollDelay: {\\n control: 'number',\\n description: 'Delay, in ms, before auto scroll starts',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n autoScrollSpeed: {\\n control: 'number',\\n description: 'Time delay, in ms, before each scroll step',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 2000 }\\n }\\n },\\n fadeContent: {\\n control: 'boolean',\\n description: 'Fade out content at the bottom of the ScrollWrapper',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n },\\n scrollDuration: {\\n control: 'number',\\n description: 'Animation duration for the scroll',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 0.2 }\\n }\\n },\\n scrollStep: {\\n control: 'number',\\n description: 'How many pixels to scroll by on every up/down keypress',\\n type: 'number',\\n table: {\\n defaultValue: { summary: 10 }\\n }\\n },\\n showScrollBar: {\\n control: 'boolean',\\n description: 'Show the scroll bar when focused ',\\n type: 'boolean',\\n table: {\\n defaultValue: { summary: true }\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 448,\\n w: 796,\\n content: terms,\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nBasic.args = sharedArgs;\\nBasic.argTypes = sharedArgTypes;\\nBasic.parameters = {\\n storyDetails: 'The ScrollWrapper content property is set as a string.'\\n};\\n\\nexport const TextArray = args =>\\n class TextArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 450,\\n w: 600,\\n wordWrap: true,\\n content: [\\n {\\n text: 'Text Heading',\\n style: {\\n fontFace: 'XfinityBrownBold',\\n alignContent: 'center'\\n }\\n },\\n {\\n text: terms,\\n style: {\\n alignContent: 'left',\\n fontSize: '30'\\n }\\n }\\n ],\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nTextArray.args = sharedArgs;\\nTextArray.argTypes = sharedArgTypes;\\nTextArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\\n};\\n\\nexport const ObjectArray = args =>\\n class ObjectArray extends lng.Component {\\n static _template() {\\n return {\\n ScrollWrapper: {\\n type: ScrollWrapperComponent,\\n h: 764,\\n w: 1200,\\n shouldWrap: true, // determines if items should wrap around ScrollContainer\\n flexDirection: 'row', //determines the direction items are placed in flexContainer\\n content: Array.from(Array(6)).map(() => ({\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 16\\n },\\n type: Tile,\\n rect: true,\\n w: 308,\\n h: 400,\\n color: 0xf53e3e45,\\n flexItem: {\\n margin: 24\\n },\\n Text: {\\n type: TextBox,\\n x: 20,\\n y: 10,\\n content:\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\\n style: {\\n textStyle: {\\n fontSize: 27,\\n lineHeight: null,\\n maxLines: 0,\\n textAlign: 'left',\\n verticalAlign: 'middle',\\n wordWrapWidth: 270\\n }\\n },\\n shader: {\\n type: lng.shaders.RoundedRectangle,\\n radius: 0\\n }\\n }\\n })),\\n signals: {\\n scrollChanged: true\\n }\\n }\\n };\\n }\\n\\n $scrollChanged(type) {\\n args.scrollChanged(type);\\n }\\n };\\n\\nObjectArray.args = sharedArgs;\\nObjectArray.argTypes = sharedArgTypes;\\nObjectArray.parameters = {\\n storyDetails:\\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":114},\"endLoc\":{\"col\":3,\"line\":133},\"startBody\":{\"col\":21,\"line\":114},\"endBody\":{\"col\":3,\"line\":133}},\"text-array\":{\"startLoc\":{\"col\":25,\"line\":141},\"endLoc\":{\"col\":3,\"line\":176},\"startBody\":{\"col\":25,\"line\":141},\"endBody\":{\"col\":3,\"line\":176}},\"object-array\":{\"startLoc\":{\"col\":27,\"line\":185},\"endLoc\":{\"col\":3,\"line\":240},\"startBody\":{\"col\":27,\"line\":185},\"endBody\":{\"col\":3,\"line\":240}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };;\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };;\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -48673,7 +48601,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport mdx from './ScrollWrapper.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport TextBox from '../TextBox/TextBox.js';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: `${CATEGORIES[16]}/ScrollWrapper`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n"; +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 { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport mdx from './ScrollWrapper.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport TextBox from '../TextBox/TextBox.js';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: `${CATEGORIES[8]}/ScrollWrapper`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -48759,10 +48687,10 @@ var __LOCATIONS_MAP__ = { var terms = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut."; /* harmony default export */ var ScrollWrapper_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][16] + "/ScrollWrapper", + title: constants["a" /* CATEGORIES */][8] + "/ScrollWrapper", 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 { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport mdx from './ScrollWrapper.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport TextBox from '../TextBox/TextBox.js';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: `${CATEGORIES[16]}/ScrollWrapper`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n", + "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 { default as ScrollWrapperComponent } from '.';\nimport Tile from '../Tile';\nimport mdx from './ScrollWrapper.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport TextBox from '../TextBox/TextBox.js';\n\nconst terms = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna. Nunc sed velit dignissim sodales. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Facilisis gravida neque convallis a cras semper auctor. Pellentesque pulvinar pellentesque habitant morbi tristique. Non tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Amet risus nullam eget felis eget nunc. Auctor urna nunc id cursus metus aliquam eleifend mi in. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Ac felis donec et odio pellentesque. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Sit amet risus nullam eget felis eget.\n\nMi proin sed libero enim sed faucibus. Arcu vitae elementum curabitur vitae nunc sed velit. Volutpat blandit aliquam etiam erat velit. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Tristique risus nec feugiat in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget est lorem ipsum dolor sit amet consectetur. At tellus at urna condimentum mattis pellentesque id. Maecenas accumsan lacus vel facilisis. Metus dictum at tempor commodo ullamcorper a lacus. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Tempor nec feugiat nisl pretium fusce id velit ut.`;\n\nexport default {\n title: `${CATEGORIES[8]}/ScrollWrapper`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgs = {\n autoScroll: false,\n autoScrollDelay: 2000,\n autoScrollSpeed: 200,\n fadeContent: true,\n scrollDuration: 0.2,\n scrollStep: 10,\n showScrollBar: true,\n mode: 'focused'\n};\n\nconst sharedArgTypes = {\n ...createModeControl({\n options: ['unfocused', 'focused'],\n summaryValue: false\n }),\n autoScroll: {\n control: 'boolean',\n description: 'Whether or not to auto scroll the content',\n type: 'boolean',\n table: {\n defaultValue: { summary: false }\n }\n },\n autoScrollDelay: {\n control: 'number',\n description: 'Delay, in ms, before auto scroll starts',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n autoScrollSpeed: {\n control: 'number',\n description: 'Time delay, in ms, before each scroll step',\n type: 'number',\n table: {\n defaultValue: { summary: 2000 }\n }\n },\n fadeContent: {\n control: 'boolean',\n description: 'Fade out content at the bottom of the ScrollWrapper',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n },\n scrollDuration: {\n control: 'number',\n description: 'Animation duration for the scroll',\n type: 'number',\n table: {\n defaultValue: { summary: 0.2 }\n }\n },\n scrollStep: {\n control: 'number',\n description: 'How many pixels to scroll by on every up/down keypress',\n type: 'number',\n table: {\n defaultValue: { summary: 10 }\n }\n },\n showScrollBar: {\n control: 'boolean',\n description: 'Show the scroll bar when focused ',\n type: 'boolean',\n table: {\n defaultValue: { summary: true }\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 448,\n w: 796,\n content: terms,\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nBasic.args = sharedArgs;\nBasic.argTypes = sharedArgTypes;\nBasic.parameters = {\n storyDetails: 'The ScrollWrapper content property is set as a string.'\n};\n\nexport const TextArray = args =>\n class TextArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 450,\n w: 600,\n wordWrap: true,\n content: [\n {\n text: 'Text Heading',\n style: {\n fontFace: 'XfinityBrownBold',\n alignContent: 'center'\n }\n },\n {\n text: terms,\n style: {\n alignContent: 'left',\n fontSize: '30'\n }\n }\n ],\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nTextArray.args = sharedArgs;\nTextArray.argTypes = sharedArgTypes;\nTextArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of text objects. See the InlineContent documentation for more details on these types of objects.'\n};\n\nexport const ObjectArray = args =>\n class ObjectArray extends lng.Component {\n static _template() {\n return {\n ScrollWrapper: {\n type: ScrollWrapperComponent,\n h: 764,\n w: 1200,\n shouldWrap: true, // determines if items should wrap around ScrollContainer\n flexDirection: 'row', //determines the direction items are placed in flexContainer\n content: Array.from(Array(6)).map(() => ({\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 16\n },\n type: Tile,\n rect: true,\n w: 308,\n h: 400,\n color: 0xf53e3e45,\n flexItem: {\n margin: 24\n },\n Text: {\n type: TextBox,\n x: 20,\n y: 10,\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id aliquet risus feugiat in ante metus dictum. Pretium fusce id velit ut tortor pretium viverra suspendisse. Pharetra convallis posuere morbi leo urna.',\n style: {\n textStyle: {\n fontSize: 27,\n lineHeight: null,\n maxLines: 0,\n textAlign: 'left',\n verticalAlign: 'middle',\n wordWrapWidth: 270\n }\n },\n shader: {\n type: lng.shaders.RoundedRectangle,\n radius: 0\n }\n }\n })),\n signals: {\n scrollChanged: true\n }\n }\n };\n }\n\n $scrollChanged(type) {\n args.scrollChanged(type);\n }\n };\n\nObjectArray.args = sharedArgs;\nObjectArray.argTypes = sharedArgTypes;\nObjectArray.parameters = {\n storyDetails:\n 'The ScrollWrapper content property is set as an array of Lightning elements.'\n};\n", "locationsMap": { "basic": { "startLoc": { @@ -49441,7 +49369,7 @@ function MDXContent(_ref) { }, "import { Shadow } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Shadow: {\n type: Shadow,\n w: this.w,\n h: this.h\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "foundations-shadow--shadow", + id: "components-shadow--shadow", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -49618,7 +49546,7 @@ function Shadow_stories_getPrototypeOf(o) { Shadow_stories_getPrototypeOf = Obje /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ShadowComponent } from '.';\\nimport mdx from './Shadow.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Shadow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Shadow = () =>\\n class Shadow extends lng.Component {\\n static _template() {\\n return {\\n Shadow: {\\n type: ShadowComponent,\\n w: 200,\\n h: 200\\n }\\n };\\n }\\n };\\nShadow.args = {\\n maskShadow: false,\\n mode: 'focused'\\n};\\nShadow.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n maskShadow: {\\n control: 'boolean',\\n description:\\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Shadow\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":45}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ShadowComponent } from '.';\nimport mdx from './Shadow.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Shadow`,\n 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 { default as ShadowComponent } from '.';\\nimport mdx from './Shadow.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Shadow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Shadow = () =>\\n class Shadow extends lng.Component {\\n static _template() {\\n return {\\n Shadow: {\\n type: ShadowComponent,\\n w: 200,\\n h: 200\\n }\\n };\\n }\\n };\\nShadow.args = {\\n maskShadow: false,\\n mode: 'focused'\\n};\\nShadow.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n maskShadow: {\\n control: 'boolean',\\n description:\\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"shadow\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":45}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Shadow = () =>\n class Shadow extends lng.Component {\n static _template() {\n return {\n Shadow: {\n type: ShadowComponent,\n w: 200,\n h: 200\n }\n };\n }\n };\nShadow.args = {\n maskShadow: false,\n mode: 'focused'\n};\nShadow.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n maskShadow: {\n control: 'boolean',\n description:\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ShadowComponent } from '.';\\nimport mdx from './Shadow.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Shadow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Shadow = () =>\\n class Shadow extends lng.Component {\\n static _template() {\\n return {\\n Shadow: {\\n type: ShadowComponent,\\n w: 200,\\n h: 200\\n }\\n };\\n }\\n };\\nShadow.args = {\\n maskShadow: false,\\n mode: 'focused'\\n};\\nShadow.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n maskShadow: {\\n control: 'boolean',\\n description:\\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Shadow\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":45}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ShadowComponent } from '.';\nimport mdx from './Shadow.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Shadow`,\n 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 { default as ShadowComponent } from '.';\\nimport mdx from './Shadow.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Shadow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Shadow = () =>\\n class Shadow extends lng.Component {\\n static _template() {\\n return {\\n Shadow: {\\n type: ShadowComponent,\\n w: 200,\\n h: 200\\n }\\n };\\n }\\n };\\nShadow.args = {\\n maskShadow: false,\\n mode: 'focused'\\n};\\nShadow.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n maskShadow: {\\n control: 'boolean',\\n description:\\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"shadow\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":45},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":45}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Shadow = () =>\n class Shadow extends lng.Component {\n static _template() {\n return {\n Shadow: {\n type: ShadowComponent,\n w: 200,\n h: 200\n }\n };\n }\n };\nShadow.args = {\n maskShadow: false,\n mode: 'focused'\n};\nShadow.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n maskShadow: {\n control: 'boolean',\n description:\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Shadow": { @@ -49644,7 +49572,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ShadowComponent } from '.';\nimport mdx from './Shadow.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Shadow`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Shadow = () =>\n class Shadow extends lng.Component {\n static _template() {\n return {\n Shadow: {\n type: ShadowComponent,\n w: 200,\n h: 200\n }\n };\n }\n };\nShadow.args = {\n maskShadow: false,\n mode: 'focused'\n};\nShadow.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n maskShadow: {\n control: 'boolean',\n description:\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\n table: {\n defaultValue: { summary: false }\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 { default as ShadowComponent } from '.';\nimport mdx from './Shadow.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Shadow`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Shadow = () =>\n class Shadow extends lng.Component {\n static _template() {\n return {\n Shadow: {\n type: ShadowComponent,\n w: 200,\n h: 200\n }\n };\n }\n };\nShadow.args = {\n maskShadow: false,\n mode: 'focused'\n};\nShadow.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n maskShadow: {\n control: 'boolean',\n description:\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Shadow": { @@ -49691,10 +49619,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Shadow_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][4] + "/Shadow", + title: constants["a" /* CATEGORIES */][8] + "/Shadow", 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 { default as ShadowComponent } from '.';\nimport mdx from './Shadow.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Shadow`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Shadow = () =>\n class Shadow extends lng.Component {\n static _template() {\n return {\n Shadow: {\n type: ShadowComponent,\n w: 200,\n h: 200\n }\n };\n }\n };\nShadow.args = {\n maskShadow: false,\n mode: 'focused'\n};\nShadow.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n maskShadow: {\n control: 'boolean',\n description:\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\n table: {\n defaultValue: { summary: false }\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 { default as ShadowComponent } from '.';\nimport mdx from './Shadow.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Shadow`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Shadow = () =>\n class Shadow extends lng.Component {\n static _template() {\n return {\n Shadow: {\n type: ShadowComponent,\n w: 200,\n h: 200\n }\n };\n }\n };\nShadow.args = {\n maskShadow: false,\n mode: 'focused'\n};\nShadow.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n maskShadow: {\n control: 'boolean',\n description:\n 'Enables a holepunch shader to mask out the component shape. Useful for transparent button states that should not show the shadow behind the element. However, requires an additional draw call for rtt.',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", "locationsMap": { "shadow": { "startLoc": { @@ -49884,7 +49812,6 @@ var Slider_styles_base = function base(theme) { w: size, h: size, radius: size / 2, - sliderHeight: theme.spacer.md, showArrows: true, showKnob: true, circleAnimation: {} @@ -50427,7 +50354,7 @@ function MDXContent(_ref) { }, "import { Slider, SliderLarge } from '@lightningjs/lightning-ui';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider\n }\n };\n }\n}\n")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Canvas */ "b"], { mdxType: "Canvas" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Story */ "f"], { - id: "utilities-slider--basic", + id: "components-slider--basic", mdxType: "Story" })), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("p", null, "The ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("inlineCode", { parentName: "p" @@ -50547,7 +50474,7 @@ function MDXContent(_ref) { }, "1"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { parentName: "tr", "align": null - }, "+/- value on change")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("tr", { + }, "increment or decrement step for changing the value of the slider")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("tr", { parentName: "tbody" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { parentName: "tr", @@ -50566,7 +50493,26 @@ function MDXContent(_ref) { }, "min")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { parentName: "tr", "align": null - }, "current value")))), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h3", { + }, "current value of slider")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("tr", { + parentName: "tbody" + }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { + parentName: "tr", + "align": null + }, "vertical"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { + parentName: "tr", + "align": null + }, "boolean"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { + parentName: "tr", + "align": null + }, "false"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { + parentName: "tr", + "align": null + }, "0 or ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("inlineCode", { + parentName: "td" + }, "min")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { + parentName: "tr", + "align": null + }, "If set to true, the slider will be displayed vertically otherwise, it will be displayed horizontally.")))), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h3", { "id": "style-properties" }, "Style Properties"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("table", null, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("thead", { parentName: "table" @@ -50718,18 +50664,7 @@ function MDXContent(_ref) { }, "boolean"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { parentName: "tr", "align": null - }, "if true, will display the focused circle on the current value of the slider")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("tr", { - parentName: "tbody" - }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { - parentName: "tr", - "align": null - }, "sliderHeight"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { - parentName: "tr", - "align": null - }, "number"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("td", { - parentName: "tr", - "align": null - }, "height of the slider")))), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h3", { + }, "if true, will display the focused circle on the current value of the slider")))), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h3", { "id": "signals" }, "Signals"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h4", { "id": "onchangevaluenumber-signalsignal" @@ -50840,7 +50775,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport mdx from './Slider.mdx';\\nimport Slider from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Slider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n vertical: false,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n },\\n vertical: {\\n control: 'boolean',\\n description: 'If true, the slider is displayed vertically',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const SignalHandling = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n step: 10,\\n y: 15,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\nSignalHandling.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandling.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"SignalHandling\":{\"startLoc\":{\"col\":30,\"line\":95},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":30,\"line\":95},\"endBody\":{\"col\":3,\"line\":119}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport mdx from './Slider.mdx';\nimport Slider from '.';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[512]}/Slider`,\n 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 { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport mdx from './Slider.mdx';\\nimport Slider from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Slider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n vertical: false,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n },\\n vertical: {\\n control: 'boolean',\\n description: 'If true, the slider is displayed vertically',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const SignalHandling = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n step: 10,\\n y: 15,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\nSignalHandling.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandling.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"signal-handling\":{\"startLoc\":{\"col\":30,\"line\":95},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":30,\"line\":95},\"endBody\":{\"col\":3,\"line\":119}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};;\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandling = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n step: 10,\n y: 15,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\nSignalHandling.args = {\n mode: 'focused'\n};\n\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandling.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport mdx from './Slider.mdx';\\nimport Slider from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Slider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n vertical: false,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n },\\n vertical: {\\n control: 'boolean',\\n description: 'If true, the slider is displayed vertically',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const SignalHandling = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n step: 10,\\n y: 15,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\nSignalHandling.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandling.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"SignalHandling\":{\"startLoc\":{\"col\":30,\"line\":95},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":30,\"line\":95},\"endBody\":{\"col\":3,\"line\":119}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport mdx from './Slider.mdx';\nimport Slider from '.';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[8]}/Slider`,\n 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 { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport mdx from './Slider.mdx';\\nimport Slider from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Slider`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n vertical: false,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n },\\n vertical: {\\n control: 'boolean',\\n description: 'If true, the slider is displayed vertically',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const SignalHandling = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n step: 10,\\n y: 15,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\nSignalHandling.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandling.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"signal-handling\":{\"startLoc\":{\"col\":30,\"line\":95},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":30,\"line\":95},\"endBody\":{\"col\":3,\"line\":119}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};;\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandling = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n step: 10,\n y: 15,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\nSignalHandling.args = {\n mode: 'focused'\n};\n\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandling.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -50884,7 +50819,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport mdx from './Slider.mdx';\nimport Slider from '.';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[512]}/Slider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandling = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n step: 10,\n y: 15,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\nSignalHandling.args = {\n mode: 'focused'\n};\n\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandling.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\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 { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport mdx from './Slider.mdx';\nimport Slider from '.';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[8]}/Slider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandling = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n step: 10,\n y: 15,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\nSignalHandling.args = {\n mode: 'focused'\n};\n\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandling.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -50951,10 +50886,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_26__[/* CATEGORIES */ "a"][512] + "/Slider", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_26__[/* CATEGORIES */ "a"][8] + "/Slider", 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 { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport mdx from './Slider.mdx';\nimport Slider from '.';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[512]}/Slider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandling = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n step: 10,\n y: 15,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\nSignalHandling.args = {\n mode: 'focused'\n};\n\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandling.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\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 { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport mdx from './Slider.mdx';\nimport Slider from '.';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[8]}/Slider`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandling = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n step: 10,\n y: 15,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\nSignalHandling.args = {\n mode: 'focused'\n};\n\nSignalHandling.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandling.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n", "locationsMap": { "basic": { "startLoc": { @@ -51393,7 +51328,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Slider from './SliderLarge.js';\\nimport mdx from './Slider.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/SliderLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n }\\n};\\n\\nexport const SignalHandlingLarge = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n y: 20,\\n step: 10,\\n value: 30,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\n\\nSignalHandlingLarge.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandlingLarge.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"SignalHandlingLarge\":{\"startLoc\":{\"col\":35,\"line\":89},\"endLoc\":{\"col\":3,\"line\":114},\"startBody\":{\"col\":35,\"line\":89},\"endBody\":{\"col\":3,\"line\":114}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Slider from './SliderLarge.js';\nimport mdx from './Slider.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[512]}/SliderLarge`,\n 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 Slider from './SliderLarge.js';\\nimport mdx from './Slider.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/SliderLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n }\\n};\\n\\nexport const SignalHandlingLarge = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n y: 20,\\n step: 10,\\n value: 30,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\n\\nSignalHandlingLarge.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandlingLarge.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"signal-handling-large\":{\"startLoc\":{\"col\":35,\"line\":89},\"endLoc\":{\"col\":3,\"line\":114},\"startBody\":{\"col\":35,\"line\":89},\"endBody\":{\"col\":3,\"line\":114}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};;\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n }\n};\n\nexport const SignalHandlingLarge = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n y: 20,\n step: 10,\n value: 30,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\n\nSignalHandlingLarge.args = {\n mode: 'focused'\n};\n\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandlingLarge.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Slider from './SliderLarge.js';\\nimport mdx from './Slider.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/SliderLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n vertical: false,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n },\\n vertical: {\\n control: 'boolean',\\n description: 'If true, the slider is displayed vertically',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const SignalHandlingLarge = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n y: 20,\\n step: 10,\\n value: 30,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\n\\nSignalHandlingLarge.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandlingLarge.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"SignalHandlingLarge\":{\"startLoc\":{\"col\":35,\"line\":95},\"endLoc\":{\"col\":3,\"line\":120},\"startBody\":{\"col\":35,\"line\":95},\"endBody\":{\"col\":3,\"line\":120}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Slider from './SliderLarge.js';\nimport mdx from './Slider.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[8]}/SliderLarge`,\n 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 Slider from './SliderLarge.js';\\nimport mdx from './Slider.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport TextBox from '../TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { useArgs } from '@storybook/client-api';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/SliderLarge`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n const [{ value }, updateArgs] = useArgs();\\n return class Basic extends lng.Component {\\n static _template() {\\n return {\\n Slider: {\\n type: Slider,\\n value: value,\\n signals: {\\n onChange: true\\n }\\n }\\n };\\n }\\n // update arg control when value changes\\n onChange(value) {\\n updateArgs({ value });\\n }\\n };\\n};\\n\\nBasic.args = {\\n min: 0,\\n max: 100,\\n value: 50,\\n step: 1,\\n vertical: false,\\n mode: 'focused'\\n};\\n\\nBasic.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n min: {\\n control: 'number',\\n description: 'Lower bound of value',\\n table: { defaultValue: { summary: 0 } }\\n },\\n max: {\\n control: 'number',\\n description: 'Upper bound of value',\\n table: { defaultValue: { summary: 100 } }\\n },\\n value: {\\n control: 'number',\\n description: 'Current value',\\n table: { defaultValue: { summary: '0 or min' } }\\n },\\n step: {\\n control: 'number',\\n description: '+/- value on change',\\n table: { defaultValue: { summary: 1 } }\\n },\\n vertical: {\\n control: 'boolean',\\n description: 'If true, the slider is displayed vertically',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nexport const SignalHandlingLarge = () =>\\n class SignalHandling extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Slider: {\\n type: Slider,\\n y: 20,\\n step: 10,\\n value: 30,\\n w: 328,\\n signals: {\\n onChange: true\\n }\\n },\\n Text: {\\n y: 60,\\n type: TextBox\\n }\\n };\\n }\\n\\n onChange(value) {\\n this.tag('Text').content = `Value: ${value}`;\\n }\\n };\\n\\nSignalHandlingLarge.args = {\\n mode: 'focused'\\n};\\n\\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\\n\\nSignalHandlingLarge.parameters = {\\n storyDetails:\\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":36},\"endLoc\":{\"col\":1,\"line\":55},\"startBody\":{\"col\":21,\"line\":36},\"endBody\":{\"col\":1,\"line\":55}},\"signal-handling-large\":{\"startLoc\":{\"col\":35,\"line\":95},\"endLoc\":{\"col\":3,\"line\":120},\"startBody\":{\"col\":35,\"line\":95},\"endBody\":{\"col\":3,\"line\":120}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};;\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandlingLarge = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n y: 20,\n step: 10,\n value: 30,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\n\nSignalHandlingLarge.args = {\n mode: 'focused'\n};\n\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandlingLarge.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -51417,19 +51352,19 @@ var __LOCATIONS_MAP__ = { "SignalHandlingLarge": { "startLoc": { "col": 35, - "line": 96 + "line": 102 }, "endLoc": { "col": 3, - "line": 121 + "line": 127 }, "startBody": { "col": 35, - "line": 96 + "line": 102 }, "endBody": { "col": 3, - "line": 121 + "line": 127 } } }; @@ -51437,7 +51372,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 Slider from './SliderLarge.js';\nimport mdx from './Slider.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[512]}/SliderLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n }\n};\n\nexport const SignalHandlingLarge = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n y: 20,\n step: 10,\n value: 30,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\n\nSignalHandlingLarge.args = {\n mode: 'focused'\n};\n\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandlingLarge.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\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 Slider from './SliderLarge.js';\nimport mdx from './Slider.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[8]}/SliderLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandlingLarge = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n y: 20,\n step: 10,\n value: 30,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\n\nSignalHandlingLarge.args = {\n mode: 'focused'\n};\n\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandlingLarge.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -51461,19 +51396,19 @@ var __LOCATIONS_MAP__ = { "SignalHandlingLarge": { "startLoc": { "col": 35, - "line": 89 + "line": 95 }, "endLoc": { "col": 3, - "line": 114 + "line": 120 }, "startBody": { "col": 35, - "line": 89 + "line": 95 }, "endBody": { "col": 3, - "line": 114 + "line": 120 } } }; @@ -51504,10 +51439,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var SliderLarge_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/SliderLarge", + title: constants["a" /* CATEGORIES */][8] + "/SliderLarge", 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 Slider from './SliderLarge.js';\nimport mdx from './Slider.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[512]}/SliderLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n }\n};\n\nexport const SignalHandlingLarge = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n y: 20,\n step: 10,\n value: 30,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\n\nSignalHandlingLarge.args = {\n mode: 'focused'\n};\n\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandlingLarge.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\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 Slider from './SliderLarge.js';\nimport mdx from './Slider.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport TextBox from '../TextBox';\nimport { CATEGORIES } from '../../docs/constants';\nimport { useArgs } from '@storybook/client-api';\n\nexport default {\n title: `${CATEGORIES[8]}/SliderLarge`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n const [{ value }, updateArgs] = useArgs();\n return class Basic extends lng.Component {\n static _template() {\n return {\n Slider: {\n type: Slider,\n value: value,\n signals: {\n onChange: true\n }\n }\n };\n }\n // update arg control when value changes\n onChange(value) {\n updateArgs({ value });\n }\n };\n};\n\nBasic.args = {\n min: 0,\n max: 100,\n value: 50,\n step: 1,\n vertical: false,\n mode: 'focused'\n};\n\nBasic.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n min: {\n control: 'number',\n description: 'Lower bound of value',\n table: { defaultValue: { summary: 0 } }\n },\n max: {\n control: 'number',\n description: 'Upper bound of value',\n table: { defaultValue: { summary: 100 } }\n },\n value: {\n control: 'number',\n description: 'Current value',\n table: { defaultValue: { summary: '0 or min' } }\n },\n step: {\n control: 'number',\n description: '+/- value on change',\n table: { defaultValue: { summary: 1 } }\n },\n vertical: {\n control: 'boolean',\n description: 'If true, the slider is displayed vertically',\n table: { defaultValue: { summary: false } }\n }\n};\n\nexport const SignalHandlingLarge = () =>\n class SignalHandling extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Slider: {\n type: Slider,\n y: 20,\n step: 10,\n value: 30,\n w: 328,\n signals: {\n onChange: true\n }\n },\n Text: {\n y: 60,\n type: TextBox\n }\n };\n }\n\n onChange(value) {\n this.tag('Text').content = `Value: ${value}`;\n }\n };\n\nSignalHandlingLarge.args = {\n mode: 'focused'\n};\n\nSignalHandlingLarge.argTypes = createModeControl({ summaryValue: 'focused' });\n\nSignalHandlingLarge.parameters = {\n storyDetails:\n 'When the onChange signal is emitted from the Slider the number in the TextBox is updated with the Slider value.'\n};\n", "locationsMap": { "basic": { "startLoc": { @@ -51530,19 +51465,19 @@ var __LOCATIONS_MAP__ = { "signal-handling-large": { "startLoc": { "col": 35, - "line": 89 + "line": 95 }, "endLoc": { "col": 3, - "line": 114 + "line": 120 }, "startBody": { "col": 35, - "line": 89 + "line": 95 }, "endBody": { "col": 3, - "line": 114 + "line": 120 } } } @@ -51597,6 +51532,7 @@ SliderLarge_stories_Basic.args = { max: 100, value: 50, step: 1, + vertical: false, mode: 'focused' }; SliderLarge_stories_Basic.argTypes = Object.assign({}, Object(utils["b" /* createModeControl */])({ @@ -51637,6 +51573,15 @@ SliderLarge_stories_Basic.argTypes = Object.assign({}, Object(utils["b" /* creat summary: 1 } } + }, + vertical: { + control: 'boolean', + description: 'If true, the slider is displayed vertically', + table: { + defaultValue: { + summary: false + } + } } }); var SliderLarge_stories_SignalHandlingLarge = function SignalHandlingLarge() { @@ -52039,7 +51984,7 @@ function MDXContent(_ref) { }, "import { Surface } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: Surface\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "foundations-surface--surface", + id: "components-surface--surface", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -52143,7 +52088,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as SurfaceComponent } from '.';\\nimport mdx from './Surface.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Surface`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Surface = () =>\\n class Surface extends lng.Component {\\n static _template() {\\n return {\\n Surface: {\\n type: SurfaceComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nSurface.args = { mode: 'focused' };\\n\\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Surface\":{\"startLoc\":{\"col\":23,\"line\":34},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":23,\"line\":34},\"endBody\":{\"col\":3,\"line\":48}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as SurfaceComponent } from '.';\nimport mdx from './Surface.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Surface`,\n 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 { default as SurfaceComponent } from '.';\\nimport mdx from './Surface.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/Surface`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Surface = () =>\\n class Surface extends lng.Component {\\n static _template() {\\n return {\\n Surface: {\\n type: SurfaceComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nSurface.args = { mode: 'focused' };\\n\\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\\n\",\"locationsMap\":{\"surface\":{\"startLoc\":{\"col\":23,\"line\":34},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":23,\"line\":34},\"endBody\":{\"col\":3,\"line\":48}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as SurfaceComponent } from '.';\\nimport mdx from './Surface.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Surface`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Surface = () =>\\n class Surface extends lng.Component {\\n static _template() {\\n return {\\n Surface: {\\n type: SurfaceComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nSurface.args = { mode: 'focused' };\\n\\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Surface\":{\"startLoc\":{\"col\":23,\"line\":34},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":23,\"line\":34},\"endBody\":{\"col\":3,\"line\":48}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as SurfaceComponent } from '.';\nimport mdx from './Surface.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Surface`,\n 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 { default as SurfaceComponent } from '.';\\nimport mdx from './Surface.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Surface`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Surface = () =>\\n class Surface extends lng.Component {\\n static _template() {\\n return {\\n Surface: {\\n type: SurfaceComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n }\\n }\\n };\\n }\\n };\\n\\nSurface.args = { mode: 'focused' };\\n\\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\\n\",\"locationsMap\":{\"surface\":{\"startLoc\":{\"col\":23,\"line\":34},\"endLoc\":{\"col\":3,\"line\":48},\"startBody\":{\"col\":23,\"line\":34},\"endBody\":{\"col\":3,\"line\":48}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Surface": { @@ -52169,7 +52114,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as SurfaceComponent } from '.';\nimport mdx from './Surface.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Surface`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n"; +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 { default as SurfaceComponent } from '.';\nimport mdx from './Surface.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Surface`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Surface": { @@ -52216,10 +52161,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Surface_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][4] + "/Surface", + title: constants["a" /* CATEGORIES */][8] + "/Surface", 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 { default as SurfaceComponent } from '.';\nimport mdx from './Surface.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/Surface`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n", + "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 { default as SurfaceComponent } from '.';\nimport mdx from './Surface.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Surface`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Surface = () =>\n class Surface extends lng.Component {\n static _template() {\n return {\n Surface: {\n type: SurfaceComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n }\n }\n };\n }\n };\n\nSurface.args = { mode: 'focused' };\n\nSurface.argTypes = createModeControl({ summaryValue: 'focused' });\n", "locationsMap": { "surface": { "startLoc": { @@ -52837,7 +52782,7 @@ function MDXContent(_ref) { "id": "tab" }, "Tab"), Object(esm["b" /* mdx */])("p", null, "Tab component to be rendered in a ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/elements-tabbar--basic" + "href": "/docs/components-tabbar--basic" }, "TabBar"), "."), Object(esm["b" /* mdx */])("h2", { "id": "source" }, "Source"), Object(esm["b" /* mdx */])("p", null, Object(esm["b" /* mdx */])("a", { @@ -52853,14 +52798,14 @@ function MDXContent(_ref) { parentName: "p" }, "tabs"), " in a ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/elements-tabbar--basic" + "href": "/docs/components-tabbar--basic" }, "TabBar"), " component."), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" }, "import { TabBar, Tab, Row } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Tab: {\n Tab: {\n type: Tab,\n icon: iconPath,\n title: 'Tab'\n }\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "layout-tab--tab", + id: "components-tab--tab", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "properties" @@ -53098,7 +53043,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { createModeControl } from '../../docs/utils';\\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport { default as TabComponent } from './Tab';\\nimport mdx from './Tab.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[16]}/Tab`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tab = () =>\\n class Tab extends lng.Component {\\n static _template() {\\n return {\\n Tab: {\\n type: TabComponent\\n }\\n };\\n }\\n };\\n\\nTab.args = {\\n icon: null,\\n title: 'Tab',\\n mode: 'focused'\\n};\\n\\nTab.argTypes = {\\n ...createModeControl({\\n options: ['focused', 'selected', 'disabled'],\\n summaryValue: Tab.args.mode\\n }),\\n icon: {\\n control: 'radio',\\n options: [null, 'icon'],\\n description: 'Lightning components to be placed to the left of the text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Text content of tab',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nTab.parameters = {\\n argActions: {\\n icon: (icon, component) => {\\n component.tag('Tab').icon = icon ? lngIcon : undefined;\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Tab\":{\"startLoc\":{\"col\":19,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":19,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\nimport mdx from './Tab.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[16]}/Tab`,\n 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 { createModeControl } from '../../docs/utils';\\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport { default as TabComponent } from './Tab';\\nimport mdx from './Tab.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[16]}/Tab`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tab = () =>\\n class Tab extends lng.Component {\\n static _template() {\\n return {\\n Tab: {\\n type: TabComponent\\n }\\n };\\n }\\n };\\n\\nTab.args = {\\n icon: null,\\n title: 'Tab',\\n mode: 'focused'\\n};\\n\\nTab.argTypes = {\\n ...createModeControl({\\n options: ['focused', 'selected', 'disabled'],\\n summaryValue: Tab.args.mode\\n }),\\n icon: {\\n control: 'radio',\\n options: [null, 'icon'],\\n description: 'Lightning components to be placed to the left of the text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Text content of tab',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nTab.parameters = {\\n argActions: {\\n icon: (icon, component) => {\\n component.tag('Tab').icon = icon ? lngIcon : undefined;\\n }\\n }\\n};\\n\",\"locationsMap\":{\"tab\":{\"startLoc\":{\"col\":19,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":19,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { createModeControl } from '../../docs/utils';\\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport { default as TabComponent } from './Tab';\\nimport mdx from './Tab.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Tab`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tab = () =>\\n class Tab extends lng.Component {\\n static _template() {\\n return {\\n Tab: {\\n type: TabComponent\\n }\\n };\\n }\\n };\\n\\nTab.args = {\\n icon: null,\\n title: 'Tab',\\n mode: 'focused'\\n};\\n\\nTab.argTypes = {\\n ...createModeControl({\\n options: ['focused', 'selected', 'disabled'],\\n summaryValue: Tab.args.mode\\n }),\\n icon: {\\n control: 'radio',\\n options: [null, 'icon'],\\n description: 'Lightning components to be placed to the left of the text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Text content of tab',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nTab.parameters = {\\n argActions: {\\n icon: (icon, component) => {\\n component.tag('Tab').icon = icon ? lngIcon : undefined;\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Tab\":{\"startLoc\":{\"col\":19,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":19,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\nimport mdx from './Tab.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Tab`,\n 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 { createModeControl } from '../../docs/utils';\\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport { default as TabComponent } from './Tab';\\nimport mdx from './Tab.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Tab`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tab = () =>\\n class Tab extends lng.Component {\\n static _template() {\\n return {\\n Tab: {\\n type: TabComponent\\n }\\n };\\n }\\n };\\n\\nTab.args = {\\n icon: null,\\n title: 'Tab',\\n mode: 'focused'\\n};\\n\\nTab.argTypes = {\\n ...createModeControl({\\n options: ['focused', 'selected', 'disabled'],\\n summaryValue: Tab.args.mode\\n }),\\n icon: {\\n control: 'radio',\\n options: [null, 'icon'],\\n description: 'Lightning components to be placed to the left of the text',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n title: {\\n control: 'text',\\n description: 'Text content of tab',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n }\\n};\\nTab.parameters = {\\n argActions: {\\n icon: (icon, component) => {\\n component.tag('Tab').icon = icon ? lngIcon : undefined;\\n }\\n }\\n};\\n\",\"locationsMap\":{\"tab\":{\"startLoc\":{\"col\":19,\"line\":35},\"endLoc\":{\"col\":3,\"line\":44},\"startBody\":{\"col\":19,\"line\":35},\"endBody\":{\"col\":3,\"line\":44}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Tab": { @@ -53124,7 +53069,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\nimport mdx from './Tab.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[16]}/Tab`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n"; +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 { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\nimport mdx from './Tab.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Tab`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Tab": { @@ -53172,10 +53117,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Tab_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][16] + "/Tab", + title: constants["a" /* CATEGORIES */][8] + "/Tab", 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 { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\nimport mdx from './Tab.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[16]}/Tab`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n", + "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 { createModeControl } from '../../docs/utils';\nimport lngIcon from '../../assets/images/ic_lightning_white_32.png';\nimport { default as TabComponent } from './Tab';\nimport mdx from './Tab.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Tab`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tab = () =>\n class Tab extends lng.Component {\n static _template() {\n return {\n Tab: {\n type: TabComponent\n }\n };\n }\n };\n\nTab.args = {\n icon: null,\n title: 'Tab',\n mode: 'focused'\n};\n\nTab.argTypes = {\n ...createModeControl({\n options: ['focused', 'selected', 'disabled'],\n summaryValue: Tab.args.mode\n }),\n icon: {\n control: 'radio',\n options: [null, 'icon'],\n description: 'Lightning components to be placed to the left of the text',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n title: {\n control: 'text',\n description: 'Text content of tab',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n }\n};\nTab.parameters = {\n argActions: {\n icon: (icon, component) => {\n component.tag('Tab').icon = icon ? lngIcon : undefined;\n }\n }\n};\n", "locationsMap": { "tab": { "startLoc": { @@ -53989,7 +53934,7 @@ function MDXContent(_ref) { parentName: "p" }, "TabBar"), " renders a row of tabs and displays the contents for each tab when it is selected. The recommended component\nto render for each tab is the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/elements-tab--basic" + "href": "/docs/components-tab--basic" }, "Tab"), " component, however custom implementations of tab components is also supported.\nThe component rendered as content for each tab is set via a ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "tabContent"), " property on each tab."), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { @@ -53998,7 +53943,7 @@ function MDXContent(_ref) { }, "import { TabBar, Tab, Row } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBar,\n tabs: [\n // tab with no tabContent\n {\n type: Tab,\n title: 'Tab Item 1'\n },\n // set tabContent via a component\n {\n type: Tab,\n title: 'Tab Item 2',\n tabContent: {\n type: Row,\n items: rowItemsForTab2\n }\n },\n // set tabContent via a function which returns a component\n {\n type: Tab,\n title: 'Tab Item 3',\n tabContent: () => {\n return {\n type: Row,\n items: rowItemsForTab3\n };\n }\n },\n // set tabContent via an asynchronous function which returns a component\n {\n type: Tab,\n title: 'Tab Item 4',\n tabContent: () => {\n return new Promise(resolve => {\n resolve({\n type: Row,\n items: rowItemsForTab2\n });\n });\n }\n }\n ]\n }\n };\n }\n\n $tabChanged(selectedTab) {\n console.log(selectedTab.title);\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "layout-tabbar--basic", + id: "components-tabbar--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "properties" @@ -54129,7 +54074,7 @@ function MDXContent(_ref) { parentName: "p" }, "TabBar"), " also accepts all properties supported by the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/layout-row--basic" + "href": "/docs/components-row--basic" }, "Row"), " component. These properties will be applied to the Row which renders the Tabs"), Object(esm["b" /* mdx */])("h3", { "id": "style-properties" }, "Style Properties"), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { @@ -54214,7 +54159,7 @@ function TabBar_stories_getPrototypeOf(o) { TabBar_stories_getPrototypeOf = Obje /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Base from '../Base';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport ButtonSmall from '../Button/ButtonSmall.js';\\nimport Icon from '../Icon';\\nimport viewAllIcon from '../../assets/images/view_all.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport Row from '../Row';\\nimport Column from '../Column';\\nimport { context } from '../../globals';\\nimport Tab from './Tab.js';\\nimport TabBarComponent from '.';\\nimport mdx from './TabBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[16]}/TabBar`,\\n args: {\\n collapse: false,\\n alphaSelectedTab: false,\\n wrapSelected: false,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ summaryValue: 'focused' }),\\n alphaSelectedTab: {\\n control: 'boolean',\\n description:\\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\\n table: { defaultValue: { summary: false } }\\n },\\n collapse: {\\n control: 'boolean',\\n description:\\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\\n table: { defaultValue: { summary: false } }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nclass CustomButton extends ButtonSmall {\\n _focus() {\\n super._focus();\\n this.patch({\\n w: 175,\\n title: 'View All'\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n _unfocus() {\\n super._unfocus();\\n this.patch({\\n w: 72,\\n title: ''\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nconst createTiles = imgSrcs => {\\n return imgSrcs.map(src => ({\\n type: Tile,\\n w: 410,\\n h: 230,\\n artwork: { src }\\n }));\\n};\\nconst tilesA = createTiles([\\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n]);\\nconst tilesB = tilesA.slice().reverse();\\n\\nconst createColumn = titles => {\\n return {\\n type: Column,\\n h: 300,\\n w: 410,\\n style: { itemSpacing: 16 },\\n neverScroll: true,\\n items: titles.map(title => ({\\n w: 410,\\n type: Button,\\n title\\n }))\\n };\\n};\\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\\n\\nconst rowFunction = () => ({\\n type: Row,\\n items: tilesB,\\n autoResizeHeight: true,\\n alwaysScroll: true\\n});\\n\\nconst colPromise = () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(col2);\\n }, 2000);\\n });\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Tab 1',\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n },\\n {\\n type: Tab,\\n title: 'Tab 3',\\n tabContent: rowFunction\\n },\\n {\\n type: Tab,\\n title: 'Tab 4',\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nclass CustomTile extends Tile {\\n static _template() {\\n return {\\n ...super._template(),\\n SoftFocus: {}\\n };\\n }\\n _update() {\\n super._update();\\n this._updateSoftFocus();\\n }\\n\\n _updateSoftFocus() {\\n const { color, spacer } = context.theme;\\n if (this.mode === 'selected') {\\n this.tag('SoftFocus').patch({\\n rect: true,\\n color: color.interactiveNeutralFocus,\\n h: spacer.xs,\\n w: spacer.xxxl + spacer.xxl + spacer.xs,\\n mountX: 0.5,\\n mountY: 1,\\n y: this.h + spacer.lg + spacer.xs,\\n x: this.w / 2\\n });\\n } else {\\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\\n }\\n }\\n}\\n\\nconst tileProps = {\\n w: 100,\\n h: 100,\\n radius: 50,\\n imgRadius: 50,\\n artwork: { icon: lightningIcon }\\n};\\n\\nexport const CustomTabs = () =>\\n class CustomTabs extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: CustomButton,\\n fixed: true,\\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\\n centerInParent: true,\\n backgroundType: 'fill'\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: col1\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: rowFunction\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\nCustomTabs.args = {\\n alphaSelectedTab: false\\n};\\nCustomTabs.argTypes = {};\\n\\nclass ColumnContainer extends Base {\\n static get __componentName() {\\n return 'ColumnContainer';\\n }\\n static get tags() {\\n return [\\n 'ClippingOffsetContainer',\\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\\n ];\\n }\\n static _template() {\\n return {\\n ClippingOffsetContainer: {\\n w: 1920 - 160,\\n h: 600,\\n clipping: true,\\n y: context.theme.layout.gutterY.xs * -1,\\n x: 40 * -1,\\n Column: {\\n type: Column,\\n y: context.theme.layout.gutterY.xs,\\n x: 40,\\n items: [\\n {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n }\\n ]\\n }\\n }\\n };\\n }\\n _getFocused() {\\n return this._Column;\\n }\\n}\\n\\nexport const MultipleRows = () =>\\n class MultipleRows extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n autoResizeWidth: true,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Multiple Rows',\\n tabContent: {\\n type: ColumnContainer\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nMultipleRows.args = {};\\nMultipleRows.parameters = {\\n storyDetails:\\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\\n};\\nMultipleRows.argTypes = {};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":140},\"endLoc\":{\"col\":3,\"line\":181},\"startBody\":{\"col\":21,\"line\":140},\"endBody\":{\"col\":3,\"line\":181}},\"CustomTabs\":{\"startLoc\":{\"col\":26,\"line\":222},\"endLoc\":{\"col\":3,\"line\":266},\"startBody\":{\"col\":26,\"line\":222},\"endBody\":{\"col\":3,\"line\":266}},\"MultipleRows\":{\"startLoc\":{\"col\":28,\"line\":328},\"endLoc\":{\"col\":3,\"line\":356},\"startBody\":{\"col\":28,\"line\":328},\"endBody\":{\"col\":3,\"line\":356}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Base from '../Base';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport ButtonSmall from '../Button/ButtonSmall.js';\nimport Icon from '../Icon';\nimport viewAllIcon from '../../assets/images/view_all.png';\nimport { createModeControl } from '../../docs/utils';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport Row from '../Row';\nimport Column from '../Column';\nimport { context } from '../../globals';\nimport Tab from './Tab.js';\nimport TabBarComponent from '.';\nimport mdx from './TabBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[16]}/TabBar`,\n args: {\n collapse: false,\n alphaSelectedTab: false,\n wrapSelected: false,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ summaryValue: 'focused' }),\n alphaSelectedTab: {\n control: 'boolean',\n description:\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\n table: { defaultValue: { summary: false } }\n },\n collapse: {\n control: 'boolean',\n description:\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\n table: { defaultValue: { summary: false } }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n },\n 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 Base from '../Base';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport ButtonSmall from '../Button/ButtonSmall.js';\\nimport Icon from '../Icon';\\nimport viewAllIcon from '../../assets/images/view_all.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport Row from '../Row';\\nimport Column from '../Column';\\nimport { context } from '../../globals';\\nimport Tab from './Tab.js';\\nimport TabBarComponent from '.';\\nimport mdx from './TabBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[16]}/TabBar`,\\n args: {\\n collapse: false,\\n alphaSelectedTab: false,\\n wrapSelected: false,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ summaryValue: 'focused' }),\\n alphaSelectedTab: {\\n control: 'boolean',\\n description:\\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\\n table: { defaultValue: { summary: false } }\\n },\\n collapse: {\\n control: 'boolean',\\n description:\\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\\n table: { defaultValue: { summary: false } }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nclass CustomButton extends ButtonSmall {\\n _focus() {\\n super._focus();\\n this.patch({\\n w: 175,\\n title: 'View All'\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n _unfocus() {\\n super._unfocus();\\n this.patch({\\n w: 72,\\n title: ''\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nconst createTiles = imgSrcs => {\\n return imgSrcs.map(src => ({\\n type: Tile,\\n w: 410,\\n h: 230,\\n artwork: { src }\\n }));\\n};\\nconst tilesA = createTiles([\\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n]);\\nconst tilesB = tilesA.slice().reverse();\\n\\nconst createColumn = titles => {\\n return {\\n type: Column,\\n h: 300,\\n w: 410,\\n style: { itemSpacing: 16 },\\n neverScroll: true,\\n items: titles.map(title => ({\\n w: 410,\\n type: Button,\\n title\\n }))\\n };\\n};\\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\\n\\nconst rowFunction = () => ({\\n type: Row,\\n items: tilesB,\\n autoResizeHeight: true,\\n alwaysScroll: true\\n});\\n\\nconst colPromise = () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(col2);\\n }, 2000);\\n });\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Tab 1',\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n },\\n {\\n type: Tab,\\n title: 'Tab 3',\\n tabContent: rowFunction\\n },\\n {\\n type: Tab,\\n title: 'Tab 4',\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nclass CustomTile extends Tile {\\n static _template() {\\n return {\\n ...super._template(),\\n SoftFocus: {}\\n };\\n }\\n _update() {\\n super._update();\\n this._updateSoftFocus();\\n }\\n\\n _updateSoftFocus() {\\n const { color, spacer } = context.theme;\\n if (this.mode === 'selected') {\\n this.tag('SoftFocus').patch({\\n rect: true,\\n color: color.interactiveNeutralFocus,\\n h: spacer.xs,\\n w: spacer.xxxl + spacer.xxl + spacer.xs,\\n mountX: 0.5,\\n mountY: 1,\\n y: this.h + spacer.lg + spacer.xs,\\n x: this.w / 2\\n });\\n } else {\\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\\n }\\n }\\n}\\n\\nconst tileProps = {\\n w: 100,\\n h: 100,\\n radius: 50,\\n imgRadius: 50,\\n artwork: { icon: lightningIcon }\\n};\\n\\nexport const CustomTabs = () =>\\n class CustomTabs extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: CustomButton,\\n fixed: true,\\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\\n centerInParent: true,\\n backgroundType: 'fill'\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: col1\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: rowFunction\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\nCustomTabs.args = {\\n alphaSelectedTab: false\\n};\\nCustomTabs.argTypes = {};\\n\\nclass ColumnContainer extends Base {\\n static get __componentName() {\\n return 'ColumnContainer';\\n }\\n static get tags() {\\n return [\\n 'ClippingOffsetContainer',\\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\\n ];\\n }\\n static _template() {\\n return {\\n ClippingOffsetContainer: {\\n w: 1920 - 160,\\n h: 600,\\n clipping: true,\\n y: context.theme.layout.gutterY.xs * -1,\\n x: 40 * -1,\\n Column: {\\n type: Column,\\n y: context.theme.layout.gutterY.xs,\\n x: 40,\\n items: [\\n {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n }\\n ]\\n }\\n }\\n };\\n }\\n _getFocused() {\\n return this._Column;\\n }\\n}\\n\\nexport const MultipleRows = () =>\\n class MultipleRows extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n autoResizeWidth: true,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Multiple Rows',\\n tabContent: {\\n type: ColumnContainer\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nMultipleRows.args = {};\\nMultipleRows.parameters = {\\n storyDetails:\\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\\n};\\nMultipleRows.argTypes = {};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":140},\"endLoc\":{\"col\":3,\"line\":181},\"startBody\":{\"col\":21,\"line\":140},\"endBody\":{\"col\":3,\"line\":181}},\"custom-tabs\":{\"startLoc\":{\"col\":26,\"line\":222},\"endLoc\":{\"col\":3,\"line\":266},\"startBody\":{\"col\":26,\"line\":222},\"endBody\":{\"col\":3,\"line\":266}},\"multiple-rows\":{\"startLoc\":{\"col\":28,\"line\":328},\"endLoc\":{\"col\":3,\"line\":356},\"startBody\":{\"col\":28,\"line\":328},\"endBody\":{\"col\":3,\"line\":356}}}},\n docs: {\n page: mdx\n }\n },};\n\nclass CustomButton extends ButtonSmall {\n _focus() {\n super._focus();\n this.patch({\n w: 175,\n title: 'View All'\n });\n this.fireAncestors('$itemChanged');\n }\n _unfocus() {\n super._unfocus();\n this.patch({\n w: 72,\n title: ''\n });\n this.fireAncestors('$itemChanged');\n }\n}\n\nconst createTiles = imgSrcs => {\n return imgSrcs.map(src => ({\n type: Tile,\n w: 410,\n h: 230,\n artwork: { src }\n }));\n};\nconst tilesA = createTiles([\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n]);\nconst tilesB = tilesA.slice().reverse();\n\nconst createColumn = titles => {\n return {\n type: Column,\n h: 300,\n w: 410,\n style: { itemSpacing: 16 },\n neverScroll: true,\n items: titles.map(title => ({\n w: 410,\n type: Button,\n title\n }))\n };\n};\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\n\nconst rowFunction = () => ({\n type: Row,\n items: tilesB,\n autoResizeHeight: true,\n alwaysScroll: true\n});\n\nconst colPromise = () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(col2);\n }, 2000);\n });\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Tab 1',\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n },\n {\n type: Tab,\n title: 'Tab 3',\n tabContent: rowFunction\n },\n {\n type: Tab,\n title: 'Tab 4',\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };;\n\nclass CustomTile extends Tile {\n static _template() {\n return {\n ...super._template(),\n SoftFocus: {}\n };\n }\n _update() {\n super._update();\n this._updateSoftFocus();\n }\n\n _updateSoftFocus() {\n const { color, spacer } = context.theme;\n if (this.mode === 'selected') {\n this.tag('SoftFocus').patch({\n rect: true,\n color: color.interactiveNeutralFocus,\n h: spacer.xs,\n w: spacer.xxxl + spacer.xxl + spacer.xs,\n mountX: 0.5,\n mountY: 1,\n y: this.h + spacer.lg + spacer.xs,\n x: this.w / 2\n });\n } else {\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\n }\n }\n}\n\nconst tileProps = {\n w: 100,\n h: 100,\n radius: 50,\n imgRadius: 50,\n artwork: { icon: lightningIcon }\n};\n\nexport const CustomTabs = () =>\n class CustomTabs extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: CustomButton,\n fixed: true,\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\n centerInParent: true,\n backgroundType: 'fill'\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: col1\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: rowFunction\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };;\nCustomTabs.args = {\n alphaSelectedTab: false\n};\nCustomTabs.argTypes = {};\n\nclass ColumnContainer extends Base {\n static get __componentName() {\n return 'ColumnContainer';\n }\n static get tags() {\n return [\n 'ClippingOffsetContainer',\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\n ];\n }\n static _template() {\n return {\n ClippingOffsetContainer: {\n w: 1920 - 160,\n h: 600,\n clipping: true,\n y: context.theme.layout.gutterY.xs * -1,\n x: 40 * -1,\n Column: {\n type: Column,\n y: context.theme.layout.gutterY.xs,\n x: 40,\n items: [\n {\n type: Row,\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n }\n ]\n }\n }\n };\n }\n _getFocused() {\n return this._Column;\n }\n}\n\nexport const MultipleRows = () =>\n class MultipleRows extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n autoResizeWidth: true,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Multiple Rows',\n tabContent: {\n type: ColumnContainer\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n }\n ]\n }\n };\n }\n };\n\nMultipleRows.args = {};\nMultipleRows.parameters = {\n storyDetails:\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\n};\nMultipleRows.argTypes = {};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Base from '../Base';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport ButtonSmall from '../Button/ButtonSmall.js';\\nimport Icon from '../Icon';\\nimport viewAllIcon from '../../assets/images/view_all.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport Row from '../Row';\\nimport Column from '../Column';\\nimport { context } from '../../globals';\\nimport Tab from './Tab.js';\\nimport TabBarComponent from '.';\\nimport mdx from './TabBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/TabBar`,\\n args: {\\n collapse: false,\\n alphaSelectedTab: false,\\n wrapSelected: false,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ summaryValue: 'focused' }),\\n alphaSelectedTab: {\\n control: 'boolean',\\n description:\\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\\n table: { defaultValue: { summary: false } }\\n },\\n collapse: {\\n control: 'boolean',\\n description:\\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\\n table: { defaultValue: { summary: false } }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nclass CustomButton extends ButtonSmall {\\n _focus() {\\n super._focus();\\n this.patch({\\n w: 175,\\n title: 'View All'\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n _unfocus() {\\n super._unfocus();\\n this.patch({\\n w: 72,\\n title: ''\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nconst createTiles = imgSrcs => {\\n return imgSrcs.map(src => ({\\n type: Tile,\\n w: 410,\\n h: 230,\\n artwork: { src }\\n }));\\n};\\nconst tilesA = createTiles([\\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n]);\\nconst tilesB = tilesA.slice().reverse();\\n\\nconst createColumn = titles => {\\n return {\\n type: Column,\\n h: 300,\\n w: 410,\\n style: { itemSpacing: 16 },\\n neverScroll: true,\\n items: titles.map(title => ({\\n w: 410,\\n type: Button,\\n title\\n }))\\n };\\n};\\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\\n\\nconst rowFunction = () => ({\\n type: Row,\\n items: tilesB,\\n autoResizeHeight: true,\\n alwaysScroll: true\\n});\\n\\nconst colPromise = () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(col2);\\n }, 2000);\\n });\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Tab 1',\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n },\\n {\\n type: Tab,\\n title: 'Tab 3',\\n tabContent: rowFunction\\n },\\n {\\n type: Tab,\\n title: 'Tab 4',\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nclass CustomTile extends Tile {\\n static _template() {\\n return {\\n ...super._template(),\\n SoftFocus: {}\\n };\\n }\\n _update() {\\n super._update();\\n this._updateSoftFocus();\\n }\\n\\n _updateSoftFocus() {\\n const { color, spacer } = context.theme;\\n if (this.mode === 'selected') {\\n this.tag('SoftFocus').patch({\\n rect: true,\\n color: color.interactiveNeutralFocus,\\n h: spacer.xs,\\n w: spacer.xxxl + spacer.xxl + spacer.xs,\\n mountX: 0.5,\\n mountY: 1,\\n y: this.h + spacer.lg + spacer.xs,\\n x: this.w / 2\\n });\\n } else {\\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\\n }\\n }\\n}\\n\\nconst tileProps = {\\n w: 100,\\n h: 100,\\n radius: 50,\\n imgRadius: 50,\\n artwork: { icon: lightningIcon }\\n};\\n\\nexport const CustomTabs = () =>\\n class CustomTabs extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: CustomButton,\\n fixed: true,\\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\\n centerInParent: true,\\n backgroundType: 'fill'\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: col1\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: rowFunction\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\nCustomTabs.args = {\\n alphaSelectedTab: false\\n};\\nCustomTabs.argTypes = {};\\n\\nclass ColumnContainer extends Base {\\n static get __componentName() {\\n return 'ColumnContainer';\\n }\\n static get tags() {\\n return [\\n 'ClippingOffsetContainer',\\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\\n ];\\n }\\n static _template() {\\n return {\\n ClippingOffsetContainer: {\\n w: 1920 - 160,\\n h: 600,\\n clipping: true,\\n y: context.theme.layout.gutterY.xs * -1,\\n x: 40 * -1,\\n Column: {\\n type: Column,\\n y: context.theme.layout.gutterY.xs,\\n x: 40,\\n items: [\\n {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n }\\n ]\\n }\\n }\\n };\\n }\\n _getFocused() {\\n return this._Column;\\n }\\n}\\n\\nexport const MultipleRows = () =>\\n class MultipleRows extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n autoResizeWidth: true,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Multiple Rows',\\n tabContent: {\\n type: ColumnContainer\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nMultipleRows.args = {};\\nMultipleRows.parameters = {\\n storyDetails:\\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\\n};\\nMultipleRows.argTypes = {};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":140},\"endLoc\":{\"col\":3,\"line\":181},\"startBody\":{\"col\":21,\"line\":140},\"endBody\":{\"col\":3,\"line\":181}},\"CustomTabs\":{\"startLoc\":{\"col\":26,\"line\":222},\"endLoc\":{\"col\":3,\"line\":266},\"startBody\":{\"col\":26,\"line\":222},\"endBody\":{\"col\":3,\"line\":266}},\"MultipleRows\":{\"startLoc\":{\"col\":28,\"line\":328},\"endLoc\":{\"col\":3,\"line\":356},\"startBody\":{\"col\":28,\"line\":328},\"endBody\":{\"col\":3,\"line\":356}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Base from '../Base';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport ButtonSmall from '../Button/ButtonSmall.js';\nimport Icon from '../Icon';\nimport viewAllIcon from '../../assets/images/view_all.png';\nimport { createModeControl } from '../../docs/utils';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport Row from '../Row';\nimport Column from '../Column';\nimport { context } from '../../globals';\nimport Tab from './Tab.js';\nimport TabBarComponent from '.';\nimport mdx from './TabBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/TabBar`,\n args: {\n collapse: false,\n alphaSelectedTab: false,\n wrapSelected: false,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ summaryValue: 'focused' }),\n alphaSelectedTab: {\n control: 'boolean',\n description:\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\n table: { defaultValue: { summary: false } }\n },\n collapse: {\n control: 'boolean',\n description:\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\n table: { defaultValue: { summary: false } }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n },\n 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 Base from '../Base';\\nimport Tile from '../Tile';\\nimport Button from '../Button';\\nimport ButtonSmall from '../Button/ButtonSmall.js';\\nimport Icon from '../Icon';\\nimport viewAllIcon from '../../assets/images/view_all.png';\\nimport { createModeControl } from '../../docs/utils';\\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\\nimport Row from '../Row';\\nimport Column from '../Column';\\nimport { context } from '../../globals';\\nimport Tab from './Tab.js';\\nimport TabBarComponent from '.';\\nimport mdx from './TabBar.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/TabBar`,\\n args: {\\n collapse: false,\\n alphaSelectedTab: false,\\n wrapSelected: false,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ summaryValue: 'focused' }),\\n alphaSelectedTab: {\\n control: 'boolean',\\n description:\\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\\n table: { defaultValue: { summary: false } }\\n },\\n collapse: {\\n control: 'boolean',\\n description:\\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\\n table: { defaultValue: { summary: false } }\\n },\\n wrapSelected: {\\n control: 'boolean',\\n description:\\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\\n table: { defaultValue: { summary: false } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nclass CustomButton extends ButtonSmall {\\n _focus() {\\n super._focus();\\n this.patch({\\n w: 175,\\n title: 'View All'\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n _unfocus() {\\n super._unfocus();\\n this.patch({\\n w: 72,\\n title: ''\\n });\\n this.fireAncestors('$itemChanged');\\n }\\n}\\n\\nconst createTiles = imgSrcs => {\\n return imgSrcs.map(src => ({\\n type: Tile,\\n w: 410,\\n h: 230,\\n artwork: { src }\\n }));\\n};\\nconst tilesA = createTiles([\\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\\n]);\\nconst tilesB = tilesA.slice().reverse();\\n\\nconst createColumn = titles => {\\n return {\\n type: Column,\\n h: 300,\\n w: 410,\\n style: { itemSpacing: 16 },\\n neverScroll: true,\\n items: titles.map(title => ({\\n w: 410,\\n type: Button,\\n title\\n }))\\n };\\n};\\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\\n\\nconst rowFunction = () => ({\\n type: Row,\\n items: tilesB,\\n autoResizeHeight: true,\\n alwaysScroll: true\\n});\\n\\nconst colPromise = () => {\\n return new Promise(resolve => {\\n setTimeout(() => {\\n resolve(col2);\\n }, 2000);\\n });\\n};\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Tab 1',\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n },\\n {\\n type: Tab,\\n title: 'Tab 3',\\n tabContent: rowFunction\\n },\\n {\\n type: Tab,\\n title: 'Tab 4',\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nclass CustomTile extends Tile {\\n static _template() {\\n return {\\n ...super._template(),\\n SoftFocus: {}\\n };\\n }\\n _update() {\\n super._update();\\n this._updateSoftFocus();\\n }\\n\\n _updateSoftFocus() {\\n const { color, spacer } = context.theme;\\n if (this.mode === 'selected') {\\n this.tag('SoftFocus').patch({\\n rect: true,\\n color: color.interactiveNeutralFocus,\\n h: spacer.xs,\\n w: spacer.xxxl + spacer.xxl + spacer.xs,\\n mountX: 0.5,\\n mountY: 1,\\n y: this.h + spacer.lg + spacer.xs,\\n x: this.w / 2\\n });\\n } else {\\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\\n }\\n }\\n}\\n\\nconst tileProps = {\\n w: 100,\\n h: 100,\\n radius: 50,\\n imgRadius: 50,\\n artwork: { icon: lightningIcon }\\n};\\n\\nexport const CustomTabs = () =>\\n class CustomTabs extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n w: 1920 - 160,\\n tabs: [\\n {\\n type: CustomButton,\\n fixed: true,\\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\\n centerInParent: true,\\n backgroundType: 'fill'\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true,\\n lazyScroll: true\\n }\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: col1\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: rowFunction\\n },\\n {\\n type: CustomTile,\\n ...tileProps,\\n tabContent: colPromise\\n }\\n ]\\n }\\n };\\n }\\n };\\nCustomTabs.args = {\\n alphaSelectedTab: false\\n};\\nCustomTabs.argTypes = {};\\n\\nclass ColumnContainer extends Base {\\n static get __componentName() {\\n return 'ColumnContainer';\\n }\\n static get tags() {\\n return [\\n 'ClippingOffsetContainer',\\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\\n ];\\n }\\n static _template() {\\n return {\\n ClippingOffsetContainer: {\\n w: 1920 - 160,\\n h: 600,\\n clipping: true,\\n y: context.theme.layout.gutterY.xs * -1,\\n x: 40 * -1,\\n Column: {\\n type: Column,\\n y: context.theme.layout.gutterY.xs,\\n x: 40,\\n items: [\\n {\\n type: Row,\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n },\\n {\\n type: Row,\\n\\n items: tilesA,\\n autoResizeHeight: true\\n }\\n ]\\n }\\n }\\n };\\n }\\n _getFocused() {\\n return this._Column;\\n }\\n}\\n\\nexport const MultipleRows = () =>\\n class MultipleRows extends lng.Component {\\n static _template() {\\n return {\\n TabBar: {\\n type: TabBarComponent,\\n autoResizeWidth: true,\\n tabs: [\\n {\\n type: Tab,\\n title: 'No Content Tab'\\n },\\n {\\n type: Tab,\\n title: 'Multiple Rows',\\n tabContent: {\\n type: ColumnContainer\\n }\\n },\\n {\\n type: Tab,\\n title: 'Tab 2',\\n tabContent: col1\\n }\\n ]\\n }\\n };\\n }\\n };\\n\\nMultipleRows.args = {};\\nMultipleRows.parameters = {\\n storyDetails:\\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\\n};\\nMultipleRows.argTypes = {};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":140},\"endLoc\":{\"col\":3,\"line\":181},\"startBody\":{\"col\":21,\"line\":140},\"endBody\":{\"col\":3,\"line\":181}},\"custom-tabs\":{\"startLoc\":{\"col\":26,\"line\":222},\"endLoc\":{\"col\":3,\"line\":266},\"startBody\":{\"col\":26,\"line\":222},\"endBody\":{\"col\":3,\"line\":266}},\"multiple-rows\":{\"startLoc\":{\"col\":28,\"line\":328},\"endLoc\":{\"col\":3,\"line\":356},\"startBody\":{\"col\":28,\"line\":328},\"endBody\":{\"col\":3,\"line\":356}}}},\n docs: {\n page: mdx\n }\n },};\n\nclass CustomButton extends ButtonSmall {\n _focus() {\n super._focus();\n this.patch({\n w: 175,\n title: 'View All'\n });\n this.fireAncestors('$itemChanged');\n }\n _unfocus() {\n super._unfocus();\n this.patch({\n w: 72,\n title: ''\n });\n this.fireAncestors('$itemChanged');\n }\n}\n\nconst createTiles = imgSrcs => {\n return imgSrcs.map(src => ({\n type: Tile,\n w: 410,\n h: 230,\n artwork: { src }\n }));\n};\nconst tilesA = createTiles([\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n]);\nconst tilesB = tilesA.slice().reverse();\n\nconst createColumn = titles => {\n return {\n type: Column,\n h: 300,\n w: 410,\n style: { itemSpacing: 16 },\n neverScroll: true,\n items: titles.map(title => ({\n w: 410,\n type: Button,\n title\n }))\n };\n};\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\n\nconst rowFunction = () => ({\n type: Row,\n items: tilesB,\n autoResizeHeight: true,\n alwaysScroll: true\n});\n\nconst colPromise = () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(col2);\n }, 2000);\n });\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Tab 1',\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n },\n {\n type: Tab,\n title: 'Tab 3',\n tabContent: rowFunction\n },\n {\n type: Tab,\n title: 'Tab 4',\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };;\n\nclass CustomTile extends Tile {\n static _template() {\n return {\n ...super._template(),\n SoftFocus: {}\n };\n }\n _update() {\n super._update();\n this._updateSoftFocus();\n }\n\n _updateSoftFocus() {\n const { color, spacer } = context.theme;\n if (this.mode === 'selected') {\n this.tag('SoftFocus').patch({\n rect: true,\n color: color.interactiveNeutralFocus,\n h: spacer.xs,\n w: spacer.xxxl + spacer.xxl + spacer.xs,\n mountX: 0.5,\n mountY: 1,\n y: this.h + spacer.lg + spacer.xs,\n x: this.w / 2\n });\n } else {\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\n }\n }\n}\n\nconst tileProps = {\n w: 100,\n h: 100,\n radius: 50,\n imgRadius: 50,\n artwork: { icon: lightningIcon }\n};\n\nexport const CustomTabs = () =>\n class CustomTabs extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: CustomButton,\n fixed: true,\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\n centerInParent: true,\n backgroundType: 'fill'\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: col1\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: rowFunction\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };;\nCustomTabs.args = {\n alphaSelectedTab: false\n};\nCustomTabs.argTypes = {};\n\nclass ColumnContainer extends Base {\n static get __componentName() {\n return 'ColumnContainer';\n }\n static get tags() {\n return [\n 'ClippingOffsetContainer',\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\n ];\n }\n static _template() {\n return {\n ClippingOffsetContainer: {\n w: 1920 - 160,\n h: 600,\n clipping: true,\n y: context.theme.layout.gutterY.xs * -1,\n x: 40 * -1,\n Column: {\n type: Column,\n y: context.theme.layout.gutterY.xs,\n x: 40,\n items: [\n {\n type: Row,\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n }\n ]\n }\n }\n };\n }\n _getFocused() {\n return this._Column;\n }\n}\n\nexport const MultipleRows = () =>\n class MultipleRows extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n autoResizeWidth: true,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Multiple Rows',\n tabContent: {\n type: ColumnContainer\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n }\n ]\n }\n };\n }\n };\n\nMultipleRows.args = {};\nMultipleRows.parameters = {\n storyDetails:\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\n};\nMultipleRows.argTypes = {};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -54276,7 +54221,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 Base from '../Base';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport ButtonSmall from '../Button/ButtonSmall.js';\nimport Icon from '../Icon';\nimport viewAllIcon from '../../assets/images/view_all.png';\nimport { createModeControl } from '../../docs/utils';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport Row from '../Row';\nimport Column from '../Column';\nimport { context } from '../../globals';\nimport Tab from './Tab.js';\nimport TabBarComponent from '.';\nimport mdx from './TabBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[16]}/TabBar`,\n args: {\n collapse: false,\n alphaSelectedTab: false,\n wrapSelected: false,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ summaryValue: 'focused' }),\n alphaSelectedTab: {\n control: 'boolean',\n description:\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\n table: { defaultValue: { summary: false } }\n },\n collapse: {\n control: 'boolean',\n description:\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\n table: { defaultValue: { summary: false } }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nclass CustomButton extends ButtonSmall {\n _focus() {\n super._focus();\n this.patch({\n w: 175,\n title: 'View All'\n });\n this.fireAncestors('$itemChanged');\n }\n _unfocus() {\n super._unfocus();\n this.patch({\n w: 72,\n title: ''\n });\n this.fireAncestors('$itemChanged');\n }\n}\n\nconst createTiles = imgSrcs => {\n return imgSrcs.map(src => ({\n type: Tile,\n w: 410,\n h: 230,\n artwork: { src }\n }));\n};\nconst tilesA = createTiles([\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n]);\nconst tilesB = tilesA.slice().reverse();\n\nconst createColumn = titles => {\n return {\n type: Column,\n h: 300,\n w: 410,\n style: { itemSpacing: 16 },\n neverScroll: true,\n items: titles.map(title => ({\n w: 410,\n type: Button,\n title\n }))\n };\n};\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\n\nconst rowFunction = () => ({\n type: Row,\n items: tilesB,\n autoResizeHeight: true,\n alwaysScroll: true\n});\n\nconst colPromise = () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(col2);\n }, 2000);\n });\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Tab 1',\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n },\n {\n type: Tab,\n title: 'Tab 3',\n tabContent: rowFunction\n },\n {\n type: Tab,\n title: 'Tab 4',\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\n\nclass CustomTile extends Tile {\n static _template() {\n return {\n ...super._template(),\n SoftFocus: {}\n };\n }\n _update() {\n super._update();\n this._updateSoftFocus();\n }\n\n _updateSoftFocus() {\n const { color, spacer } = context.theme;\n if (this.mode === 'selected') {\n this.tag('SoftFocus').patch({\n rect: true,\n color: color.interactiveNeutralFocus,\n h: spacer.xs,\n w: spacer.xxxl + spacer.xxl + spacer.xs,\n mountX: 0.5,\n mountY: 1,\n y: this.h + spacer.lg + spacer.xs,\n x: this.w / 2\n });\n } else {\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\n }\n }\n}\n\nconst tileProps = {\n w: 100,\n h: 100,\n radius: 50,\n imgRadius: 50,\n artwork: { icon: lightningIcon }\n};\n\nexport const CustomTabs = () =>\n class CustomTabs extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: CustomButton,\n fixed: true,\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\n centerInParent: true,\n backgroundType: 'fill'\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: col1\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: rowFunction\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\nCustomTabs.args = {\n alphaSelectedTab: false\n};\nCustomTabs.argTypes = {};\n\nclass ColumnContainer extends Base {\n static get __componentName() {\n return 'ColumnContainer';\n }\n static get tags() {\n return [\n 'ClippingOffsetContainer',\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\n ];\n }\n static _template() {\n return {\n ClippingOffsetContainer: {\n w: 1920 - 160,\n h: 600,\n clipping: true,\n y: context.theme.layout.gutterY.xs * -1,\n x: 40 * -1,\n Column: {\n type: Column,\n y: context.theme.layout.gutterY.xs,\n x: 40,\n items: [\n {\n type: Row,\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n }\n ]\n }\n }\n };\n }\n _getFocused() {\n return this._Column;\n }\n}\n\nexport const MultipleRows = () =>\n class MultipleRows extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n autoResizeWidth: true,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Multiple Rows',\n tabContent: {\n type: ColumnContainer\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n }\n ]\n }\n };\n }\n };\n\nMultipleRows.args = {};\nMultipleRows.parameters = {\n storyDetails:\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\n};\nMultipleRows.argTypes = {};\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 Base from '../Base';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport ButtonSmall from '../Button/ButtonSmall.js';\nimport Icon from '../Icon';\nimport viewAllIcon from '../../assets/images/view_all.png';\nimport { createModeControl } from '../../docs/utils';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport Row from '../Row';\nimport Column from '../Column';\nimport { context } from '../../globals';\nimport Tab from './Tab.js';\nimport TabBarComponent from '.';\nimport mdx from './TabBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/TabBar`,\n args: {\n collapse: false,\n alphaSelectedTab: false,\n wrapSelected: false,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ summaryValue: 'focused' }),\n alphaSelectedTab: {\n control: 'boolean',\n description:\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\n table: { defaultValue: { summary: false } }\n },\n collapse: {\n control: 'boolean',\n description:\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\n table: { defaultValue: { summary: false } }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nclass CustomButton extends ButtonSmall {\n _focus() {\n super._focus();\n this.patch({\n w: 175,\n title: 'View All'\n });\n this.fireAncestors('$itemChanged');\n }\n _unfocus() {\n super._unfocus();\n this.patch({\n w: 72,\n title: ''\n });\n this.fireAncestors('$itemChanged');\n }\n}\n\nconst createTiles = imgSrcs => {\n return imgSrcs.map(src => ({\n type: Tile,\n w: 410,\n h: 230,\n artwork: { src }\n }));\n};\nconst tilesA = createTiles([\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n]);\nconst tilesB = tilesA.slice().reverse();\n\nconst createColumn = titles => {\n return {\n type: Column,\n h: 300,\n w: 410,\n style: { itemSpacing: 16 },\n neverScroll: true,\n items: titles.map(title => ({\n w: 410,\n type: Button,\n title\n }))\n };\n};\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\n\nconst rowFunction = () => ({\n type: Row,\n items: tilesB,\n autoResizeHeight: true,\n alwaysScroll: true\n});\n\nconst colPromise = () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(col2);\n }, 2000);\n });\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Tab 1',\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n },\n {\n type: Tab,\n title: 'Tab 3',\n tabContent: rowFunction\n },\n {\n type: Tab,\n title: 'Tab 4',\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\n\nclass CustomTile extends Tile {\n static _template() {\n return {\n ...super._template(),\n SoftFocus: {}\n };\n }\n _update() {\n super._update();\n this._updateSoftFocus();\n }\n\n _updateSoftFocus() {\n const { color, spacer } = context.theme;\n if (this.mode === 'selected') {\n this.tag('SoftFocus').patch({\n rect: true,\n color: color.interactiveNeutralFocus,\n h: spacer.xs,\n w: spacer.xxxl + spacer.xxl + spacer.xs,\n mountX: 0.5,\n mountY: 1,\n y: this.h + spacer.lg + spacer.xs,\n x: this.w / 2\n });\n } else {\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\n }\n }\n}\n\nconst tileProps = {\n w: 100,\n h: 100,\n radius: 50,\n imgRadius: 50,\n artwork: { icon: lightningIcon }\n};\n\nexport const CustomTabs = () =>\n class CustomTabs extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: CustomButton,\n fixed: true,\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\n centerInParent: true,\n backgroundType: 'fill'\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: col1\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: rowFunction\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\nCustomTabs.args = {\n alphaSelectedTab: false\n};\nCustomTabs.argTypes = {};\n\nclass ColumnContainer extends Base {\n static get __componentName() {\n return 'ColumnContainer';\n }\n static get tags() {\n return [\n 'ClippingOffsetContainer',\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\n ];\n }\n static _template() {\n return {\n ClippingOffsetContainer: {\n w: 1920 - 160,\n h: 600,\n clipping: true,\n y: context.theme.layout.gutterY.xs * -1,\n x: 40 * -1,\n Column: {\n type: Column,\n y: context.theme.layout.gutterY.xs,\n x: 40,\n items: [\n {\n type: Row,\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n }\n ]\n }\n }\n };\n }\n _getFocused() {\n return this._Column;\n }\n}\n\nexport const MultipleRows = () =>\n class MultipleRows extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n autoResizeWidth: true,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Multiple Rows',\n tabContent: {\n type: ColumnContainer\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n }\n ]\n }\n };\n }\n };\n\nMultipleRows.args = {};\nMultipleRows.parameters = {\n storyDetails:\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\n};\nMultipleRows.argTypes = {};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -54370,7 +54315,7 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var TabBar_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][16] + "/TabBar", + title: constants["a" /* CATEGORIES */][8] + "/TabBar", args: { collapse: false, alphaSelectedTab: false, @@ -54410,7 +54355,7 @@ var __LOCATIONS_MAP__ = { }), 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 Base from '../Base';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport ButtonSmall from '../Button/ButtonSmall.js';\nimport Icon from '../Icon';\nimport viewAllIcon from '../../assets/images/view_all.png';\nimport { createModeControl } from '../../docs/utils';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport Row from '../Row';\nimport Column from '../Column';\nimport { context } from '../../globals';\nimport Tab from './Tab.js';\nimport TabBarComponent from '.';\nimport mdx from './TabBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[16]}/TabBar`,\n args: {\n collapse: false,\n alphaSelectedTab: false,\n wrapSelected: false,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ summaryValue: 'focused' }),\n alphaSelectedTab: {\n control: 'boolean',\n description:\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\n table: { defaultValue: { summary: false } }\n },\n collapse: {\n control: 'boolean',\n description:\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\n table: { defaultValue: { summary: false } }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nclass CustomButton extends ButtonSmall {\n _focus() {\n super._focus();\n this.patch({\n w: 175,\n title: 'View All'\n });\n this.fireAncestors('$itemChanged');\n }\n _unfocus() {\n super._unfocus();\n this.patch({\n w: 72,\n title: ''\n });\n this.fireAncestors('$itemChanged');\n }\n}\n\nconst createTiles = imgSrcs => {\n return imgSrcs.map(src => ({\n type: Tile,\n w: 410,\n h: 230,\n artwork: { src }\n }));\n};\nconst tilesA = createTiles([\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n]);\nconst tilesB = tilesA.slice().reverse();\n\nconst createColumn = titles => {\n return {\n type: Column,\n h: 300,\n w: 410,\n style: { itemSpacing: 16 },\n neverScroll: true,\n items: titles.map(title => ({\n w: 410,\n type: Button,\n title\n }))\n };\n};\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\n\nconst rowFunction = () => ({\n type: Row,\n items: tilesB,\n autoResizeHeight: true,\n alwaysScroll: true\n});\n\nconst colPromise = () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(col2);\n }, 2000);\n });\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Tab 1',\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n },\n {\n type: Tab,\n title: 'Tab 3',\n tabContent: rowFunction\n },\n {\n type: Tab,\n title: 'Tab 4',\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\n\nclass CustomTile extends Tile {\n static _template() {\n return {\n ...super._template(),\n SoftFocus: {}\n };\n }\n _update() {\n super._update();\n this._updateSoftFocus();\n }\n\n _updateSoftFocus() {\n const { color, spacer } = context.theme;\n if (this.mode === 'selected') {\n this.tag('SoftFocus').patch({\n rect: true,\n color: color.interactiveNeutralFocus,\n h: spacer.xs,\n w: spacer.xxxl + spacer.xxl + spacer.xs,\n mountX: 0.5,\n mountY: 1,\n y: this.h + spacer.lg + spacer.xs,\n x: this.w / 2\n });\n } else {\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\n }\n }\n}\n\nconst tileProps = {\n w: 100,\n h: 100,\n radius: 50,\n imgRadius: 50,\n artwork: { icon: lightningIcon }\n};\n\nexport const CustomTabs = () =>\n class CustomTabs extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: CustomButton,\n fixed: true,\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\n centerInParent: true,\n backgroundType: 'fill'\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: col1\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: rowFunction\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\nCustomTabs.args = {\n alphaSelectedTab: false\n};\nCustomTabs.argTypes = {};\n\nclass ColumnContainer extends Base {\n static get __componentName() {\n return 'ColumnContainer';\n }\n static get tags() {\n return [\n 'ClippingOffsetContainer',\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\n ];\n }\n static _template() {\n return {\n ClippingOffsetContainer: {\n w: 1920 - 160,\n h: 600,\n clipping: true,\n y: context.theme.layout.gutterY.xs * -1,\n x: 40 * -1,\n Column: {\n type: Column,\n y: context.theme.layout.gutterY.xs,\n x: 40,\n items: [\n {\n type: Row,\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n }\n ]\n }\n }\n };\n }\n _getFocused() {\n return this._Column;\n }\n}\n\nexport const MultipleRows = () =>\n class MultipleRows extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n autoResizeWidth: true,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Multiple Rows',\n tabContent: {\n type: ColumnContainer\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n }\n ]\n }\n };\n }\n };\n\nMultipleRows.args = {};\nMultipleRows.parameters = {\n storyDetails:\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\n};\nMultipleRows.argTypes = {};\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 Base from '../Base';\nimport Tile from '../Tile';\nimport Button from '../Button';\nimport ButtonSmall from '../Button/ButtonSmall.js';\nimport Icon from '../Icon';\nimport viewAllIcon from '../../assets/images/view_all.png';\nimport { createModeControl } from '../../docs/utils';\nimport lightningIcon from '../../assets/images/ic_lightning_white_32.png';\nimport Row from '../Row';\nimport Column from '../Column';\nimport { context } from '../../globals';\nimport Tab from './Tab.js';\nimport TabBarComponent from '.';\nimport mdx from './TabBar.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/TabBar`,\n args: {\n collapse: false,\n alphaSelectedTab: false,\n wrapSelected: false,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ summaryValue: 'focused' }),\n alphaSelectedTab: {\n control: 'boolean',\n description:\n 'When true, a lower alpha will be applied to unselected tabs when focus is delegated to the tab content',\n table: { defaultValue: { summary: false } }\n },\n collapse: {\n control: 'boolean',\n description:\n 'When true, the height of the TabBar will only reflect the height of the Tabs when unfocused or no tab content is available',\n table: { defaultValue: { summary: false } }\n },\n wrapSelected: {\n control: 'boolean',\n description:\n 'Enables wrapping behavior, so selectNext selects the first item if the current item is the last on the list and vice versa',\n table: { defaultValue: { summary: false } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nclass CustomButton extends ButtonSmall {\n _focus() {\n super._focus();\n this.patch({\n w: 175,\n title: 'View All'\n });\n this.fireAncestors('$itemChanged');\n }\n _unfocus() {\n super._unfocus();\n this.patch({\n w: 72,\n title: ''\n });\n this.fireAncestors('$itemChanged');\n }\n}\n\nconst createTiles = imgSrcs => {\n return imgSrcs.map(src => ({\n type: Tile,\n w: 410,\n h: 230,\n artwork: { src }\n }));\n};\nconst tilesA = createTiles([\n 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n 'https://image.tmdb.org/t/p/w500/jauI01vUIkPA0xVsamGj0Gs1nNL.jpg',\n 'https://image.tmdb.org/t/p/w500/sQBS8MYXN9CZWV3gEDcL95G1KpA.jpg',\n 'https://image.tmdb.org/t/p/w500/m0iEEib19yHzyD8hLh09qkIWbwz.jpg'\n]);\nconst tilesB = tilesA.slice().reverse();\n\nconst createColumn = titles => {\n return {\n type: Column,\n h: 300,\n w: 410,\n style: { itemSpacing: 16 },\n neverScroll: true,\n items: titles.map(title => ({\n w: 410,\n type: Button,\n title\n }))\n };\n};\nconst col1 = createColumn(['Item 1', 'Item 2', 'Item 3']);\nconst col2 = createColumn(['Async Item 1', 'Async Item 2', 'Async Item 3']);\n\nconst rowFunction = () => ({\n type: Row,\n items: tilesB,\n autoResizeHeight: true,\n alwaysScroll: true\n});\n\nconst colPromise = () => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(col2);\n }, 2000);\n });\n};\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Tab 1',\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n },\n {\n type: Tab,\n title: 'Tab 3',\n tabContent: rowFunction\n },\n {\n type: Tab,\n title: 'Tab 4',\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\n\nclass CustomTile extends Tile {\n static _template() {\n return {\n ...super._template(),\n SoftFocus: {}\n };\n }\n _update() {\n super._update();\n this._updateSoftFocus();\n }\n\n _updateSoftFocus() {\n const { color, spacer } = context.theme;\n if (this.mode === 'selected') {\n this.tag('SoftFocus').patch({\n rect: true,\n color: color.interactiveNeutralFocus,\n h: spacer.xs,\n w: spacer.xxxl + spacer.xxl + spacer.xs,\n mountX: 0.5,\n mountY: 1,\n y: this.h + spacer.lg + spacer.xs,\n x: this.w / 2\n });\n } else {\n this.tag('SoftFocus').patch({ h: 0, w: 0 });\n }\n }\n}\n\nconst tileProps = {\n w: 100,\n h: 100,\n radius: 50,\n imgRadius: 50,\n artwork: { icon: lightningIcon }\n};\n\nexport const CustomTabs = () =>\n class CustomTabs extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n w: 1920 - 160,\n tabs: [\n {\n type: CustomButton,\n fixed: true,\n prefix: [{ type: Icon, icon: viewAllIcon, w: 20, h: 20 }],\n centerInParent: true,\n backgroundType: 'fill'\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: {\n type: Row,\n items: tilesA,\n autoResizeHeight: true,\n lazyScroll: true\n }\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: col1\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: rowFunction\n },\n {\n type: CustomTile,\n ...tileProps,\n tabContent: colPromise\n }\n ]\n }\n };\n }\n };\nCustomTabs.args = {\n alphaSelectedTab: false\n};\nCustomTabs.argTypes = {};\n\nclass ColumnContainer extends Base {\n static get __componentName() {\n return 'ColumnContainer';\n }\n static get tags() {\n return [\n 'ClippingOffsetContainer',\n { name: 'Column', path: 'ClippingOffsetContainer.Column' }\n ];\n }\n static _template() {\n return {\n ClippingOffsetContainer: {\n w: 1920 - 160,\n h: 600,\n clipping: true,\n y: context.theme.layout.gutterY.xs * -1,\n x: 40 * -1,\n Column: {\n type: Column,\n y: context.theme.layout.gutterY.xs,\n x: 40,\n items: [\n {\n type: Row,\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n },\n {\n type: Row,\n\n items: tilesA,\n autoResizeHeight: true\n }\n ]\n }\n }\n };\n }\n _getFocused() {\n return this._Column;\n }\n}\n\nexport const MultipleRows = () =>\n class MultipleRows extends lng.Component {\n static _template() {\n return {\n TabBar: {\n type: TabBarComponent,\n autoResizeWidth: true,\n tabs: [\n {\n type: Tab,\n title: 'No Content Tab'\n },\n {\n type: Tab,\n title: 'Multiple Rows',\n tabContent: {\n type: ColumnContainer\n }\n },\n {\n type: Tab,\n title: 'Tab 2',\n tabContent: col1\n }\n ]\n }\n };\n }\n };\n\nMultipleRows.args = {};\nMultipleRows.parameters = {\n storyDetails:\n 'This is an example of adding multiple rows in the tab content column. A ColumnContainer was created to allow for clipping needed for scrolling'\n};\nMultipleRows.argTypes = {};\n", "locationsMap": { "basic": { "startLoc": { @@ -55216,6 +55161,9 @@ var TextBox_TextBox = /*#__PURE__*/function (_Base) { if (this._textStyleSet.maxLinesSuffix) { inlineContentPatch.maxLinesSuffix = this._textStyleSet.maxLinesSuffix; } + if (this._textStyleSet.textAlign) { + inlineContentPatch.justify = utils["d" /* default */].convertTextAlignToFlexJustify(this._textStyleSet.textAlign); + } this.patch({ alpha: 1, InlineContent: Object.assign({ @@ -55518,14 +55466,14 @@ function MDXContent(_ref) { "id": "usage" }, "Usage"), Object(esm["b" /* mdx */])("p", null, "Set a content property with your text and specify a property style as a string.\nTextBox also accepts inline content arrays and strings which are rendered using the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/text-inlinecontent--test" + "href": "/docs/components-inlinecontent--test" }, "InlineContent"), " component."), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { parentName: "pre", "className": "language-js" }, "import { TextBox } from '@lightningjs/ui-components';\n\nTextBox: {\n type: TextBox,\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n fixed: true,\n w: 600,\n style: {\n textStyle: 'headline1'\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "text-textbox--basic", + id: "components-textbox--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("blockquote", null, Object(esm["b" /* mdx */])("p", { parentName: "blockquote" @@ -55653,7 +55601,7 @@ function MDXContent(_ref) { "align": null }, "Allows text to be scrollable")))), Object(esm["b" /* mdx */])("p", null, "TextBox also supports rendering as an InlineContent component. See ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/text-inlinecontent--basic" + "href": "/docs/components-inlinecontent--basic" }, "InlineContent documentation"), " for table of supported properties."), Object(esm["b" /* mdx */])("h3", { "id": "style-properties" }, "Style Properties"), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { @@ -55755,7 +55703,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 TextBox from '.';\\nimport mdx from './TextBox.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[256]}/TextBox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\\n inlineContentStory;\\n\\nconst lorum =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n fixed: true,\\n w: 600,\\n style: { textStyle: { maxLines: 3 } }\\n }\\n };\\n }\\n };\\n\\nBasic.args = {\\n content: lorum,\\n marquee: false,\\n fixed: true,\\n w: 600\\n};\\n\\nBasic.argTypes = {\\n content: {\\n control: 'text',\\n description: 'Text to be displayed in element',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n marquee: {\\n control: 'boolean',\\n description:\\n \\\"Scrolls text when a single line of text is longer than the textbox's width\\\",\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description:\\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const WithInlineContentArray = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 200,\\n w: 400,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nWithInlineContentArray.args = inlineContentArgs;\\nWithInlineContentArray.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentString = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 400,\\n w: 400,\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n }\\n }\\n };\\n }\\n };\\n\\nWithInlineContentString.args = inlineContentArgs;\\nWithInlineContentString.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n w: 500,\\n style: {\\n textStyle: {\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":42},\"endLoc\":{\"col\":3,\"line\":54},\"startBody\":{\"col\":21,\"line\":42},\"endBody\":{\"col\":3,\"line\":54}},\"WithInlineContentArray\":{\"startLoc\":{\"col\":38,\"line\":97},\"endLoc\":{\"col\":3,\"line\":129},\"startBody\":{\"col\":38,\"line\":97},\"endBody\":{\"col\":3,\"line\":129}},\"WithInlineContentString\":{\"startLoc\":{\"col\":39,\"line\":134},\"endLoc\":{\"col\":3,\"line\":153},\"startBody\":{\"col\":39,\"line\":134},\"endBody\":{\"col\":3,\"line\":153}},\"WithInlineContentTruncation\":{\"startLoc\":{\"col\":43,\"line\":158},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":43,\"line\":158},\"endBody\":{\"col\":3,\"line\":197}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport TextBox from '.';\nimport mdx from './TextBox.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/TextBox`,\n 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 TextBox from '.';\\nimport mdx from './TextBox.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[256]}/TextBox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\\n inlineContentStory;\\n\\nconst lorum =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n fixed: true,\\n w: 600,\\n style: { textStyle: { maxLines: 3 } }\\n }\\n };\\n }\\n };\\n\\nBasic.args = {\\n content: lorum,\\n marquee: false,\\n fixed: true,\\n w: 600\\n};\\n\\nBasic.argTypes = {\\n content: {\\n control: 'text',\\n description: 'Text to be displayed in element',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n marquee: {\\n control: 'boolean',\\n description:\\n \\\"Scrolls text when a single line of text is longer than the textbox's width\\\",\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description:\\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const WithInlineContentArray = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 200,\\n w: 400,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nWithInlineContentArray.args = inlineContentArgs;\\nWithInlineContentArray.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentString = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 400,\\n w: 400,\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n }\\n }\\n };\\n }\\n };\\n\\nWithInlineContentString.args = inlineContentArgs;\\nWithInlineContentString.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n w: 500,\\n style: {\\n textStyle: {\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":42},\"endLoc\":{\"col\":3,\"line\":54},\"startBody\":{\"col\":21,\"line\":42},\"endBody\":{\"col\":3,\"line\":54}},\"with-inline-content-array\":{\"startLoc\":{\"col\":38,\"line\":97},\"endLoc\":{\"col\":3,\"line\":129},\"startBody\":{\"col\":38,\"line\":97},\"endBody\":{\"col\":3,\"line\":129}},\"with-inline-content-string\":{\"startLoc\":{\"col\":39,\"line\":134},\"endLoc\":{\"col\":3,\"line\":153},\"startBody\":{\"col\":39,\"line\":134},\"endBody\":{\"col\":3,\"line\":153}},\"with-inline-content-truncation\":{\"startLoc\":{\"col\":43,\"line\":158},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":43,\"line\":158},\"endBody\":{\"col\":3,\"line\":197}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\n inlineContentStory;\n\nconst lorum =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n fixed: true,\n w: 600,\n style: { textStyle: { maxLines: 3 } }\n }\n };\n }\n };;\n\nBasic.args = {\n content: lorum,\n marquee: false,\n fixed: true,\n w: 600\n};\n\nBasic.argTypes = {\n content: {\n control: 'text',\n description: 'Text to be displayed in element',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n marquee: {\n control: 'boolean',\n description:\n \"Scrolls text when a single line of text is longer than the textbox's width\",\n table: {\n defaultValue: { summary: false }\n }\n },\n fixed: {\n control: 'boolean',\n description:\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const WithInlineContentArray = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 200,\n w: 400,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };;\n\nWithInlineContentArray.args = inlineContentArgs;\nWithInlineContentArray.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentString = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 400,\n w: 400,\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n }\n }\n };\n }\n };;\n\nWithInlineContentString.args = inlineContentArgs;\nWithInlineContentString.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n w: 500,\n style: {\n textStyle: {\n maxLines: 2,\n maxLinesSuffix: '...'\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 TextBox from '.';\\nimport mdx from './TextBox.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/TextBox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\\n inlineContentStory;\\n\\nconst lorum =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n fixed: true,\\n w: 600,\\n style: { textStyle: { maxLines: 3 } }\\n }\\n };\\n }\\n };\\n\\nBasic.args = {\\n content: lorum,\\n marquee: false,\\n fixed: true,\\n w: 600\\n};\\n\\nBasic.argTypes = {\\n content: {\\n control: 'text',\\n description: 'Text to be displayed in element',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n marquee: {\\n control: 'boolean',\\n description:\\n \\\"Scrolls text when a single line of text is longer than the textbox's width\\\",\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description:\\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const WithInlineContentArray = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 200,\\n w: 400,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nWithInlineContentArray.args = inlineContentArgs;\\nWithInlineContentArray.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentString = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 400,\\n w: 400,\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n }\\n }\\n };\\n }\\n };\\n\\nWithInlineContentString.args = inlineContentArgs;\\nWithInlineContentString.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n w: 500,\\n style: {\\n textStyle: {\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":42},\"endLoc\":{\"col\":3,\"line\":54},\"startBody\":{\"col\":21,\"line\":42},\"endBody\":{\"col\":3,\"line\":54}},\"WithInlineContentArray\":{\"startLoc\":{\"col\":38,\"line\":97},\"endLoc\":{\"col\":3,\"line\":129},\"startBody\":{\"col\":38,\"line\":97},\"endBody\":{\"col\":3,\"line\":129}},\"WithInlineContentString\":{\"startLoc\":{\"col\":39,\"line\":134},\"endLoc\":{\"col\":3,\"line\":153},\"startBody\":{\"col\":39,\"line\":134},\"endBody\":{\"col\":3,\"line\":153}},\"WithInlineContentTruncation\":{\"startLoc\":{\"col\":43,\"line\":158},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":43,\"line\":158},\"endBody\":{\"col\":3,\"line\":197}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport TextBox from '.';\nimport mdx from './TextBox.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/TextBox`,\n 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 TextBox from '.';\\nimport mdx from './TextBox.mdx';\\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\\nimport { getHexColor } from '../../utils';\\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/TextBox`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\\n inlineContentStory;\\n\\nconst lorum =\\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n fixed: true,\\n w: 600,\\n style: { textStyle: { maxLines: 3 } }\\n }\\n };\\n }\\n };\\n\\nBasic.args = {\\n content: lorum,\\n marquee: false,\\n fixed: true,\\n w: 600\\n};\\n\\nBasic.argTypes = {\\n content: {\\n control: 'text',\\n description: 'Text to be displayed in element',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n marquee: {\\n control: 'boolean',\\n description:\\n \\\"Scrolls text when a single line of text is longer than the textbox's width\\\",\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n fixed: {\\n control: 'boolean',\\n description:\\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n w: {\\n control: 'number',\\n description:\\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\\n table: {\\n defaultValue: { summary: 0 }\\n }\\n }\\n};\\n\\nexport const WithInlineContentArray = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 200,\\n w: 400,\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n style: { color: getHexColor('00ff00') },\\n title: 'Green Lightning Bolt'\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' }\\n ]\\n }\\n };\\n }\\n };\\n\\nWithInlineContentArray.args = inlineContentArgs;\\nWithInlineContentArray.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentString = () =>\\n class WithInlineContentArray extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n x: 400,\\n w: 400,\\n content:\\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\\n customStyleMappings: {\\n italic: {\\n fontStyle: 'italic',\\n textColor: getHexColor('FF6194')\\n }\\n }\\n }\\n };\\n }\\n };\\n\\nWithInlineContentString.args = inlineContentArgs;\\nWithInlineContentString.argTypes = inlineContentArgTypes;\\n\\nexport const WithInlineContentTruncation = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n TextBox: {\\n type: TextBox,\\n w: 500,\\n style: {\\n textStyle: {\\n maxLines: 2,\\n maxLinesSuffix: '...'\\n }\\n },\\n content: [\\n 'Text',\\n {\\n icon: lightningbolt,\\n title: 'Green Lightning Bolt',\\n style: { color: getHexColor('00ff00') }\\n },\\n 'Wrapping Text',\\n {\\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\\n title: 'Rotten Tomatoes rating'\\n },\\n 'and more text',\\n {\\n text: 'with some red ',\\n style: { textColor: getHexColor('FF6194') }\\n },\\n 'for fun',\\n { badge: 'HD', title: 'HD' },\\n { badge: 'SD', title: 'SD' },\\n ', and this should truncate before going on to a third line.'\\n ],\\n contentWrap: true\\n }\\n };\\n }\\n };\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":42},\"endLoc\":{\"col\":3,\"line\":54},\"startBody\":{\"col\":21,\"line\":42},\"endBody\":{\"col\":3,\"line\":54}},\"with-inline-content-array\":{\"startLoc\":{\"col\":38,\"line\":97},\"endLoc\":{\"col\":3,\"line\":129},\"startBody\":{\"col\":38,\"line\":97},\"endBody\":{\"col\":3,\"line\":129}},\"with-inline-content-string\":{\"startLoc\":{\"col\":39,\"line\":134},\"endLoc\":{\"col\":3,\"line\":153},\"startBody\":{\"col\":39,\"line\":134},\"endBody\":{\"col\":3,\"line\":153}},\"with-inline-content-truncation\":{\"startLoc\":{\"col\":43,\"line\":158},\"endLoc\":{\"col\":3,\"line\":197},\"startBody\":{\"col\":43,\"line\":158},\"endBody\":{\"col\":3,\"line\":197}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\n inlineContentStory;\n\nconst lorum =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n fixed: true,\n w: 600,\n style: { textStyle: { maxLines: 3 } }\n }\n };\n }\n };;\n\nBasic.args = {\n content: lorum,\n marquee: false,\n fixed: true,\n w: 600\n};\n\nBasic.argTypes = {\n content: {\n control: 'text',\n description: 'Text to be displayed in element',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n marquee: {\n control: 'boolean',\n description:\n \"Scrolls text when a single line of text is longer than the textbox's width\",\n table: {\n defaultValue: { summary: false }\n }\n },\n fixed: {\n control: 'boolean',\n description:\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const WithInlineContentArray = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 200,\n w: 400,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };;\n\nWithInlineContentArray.args = inlineContentArgs;\nWithInlineContentArray.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentString = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 400,\n w: 400,\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n }\n }\n };\n }\n };;\n\nWithInlineContentString.args = inlineContentArgs;\nWithInlineContentString.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n w: 500,\n style: {\n textStyle: {\n maxLines: 2,\n maxLinesSuffix: '...'\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -55835,7 +55783,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 TextBox from '.';\nimport mdx from './TextBox.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/TextBox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\n inlineContentStory;\n\nconst lorum =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n fixed: true,\n w: 600,\n style: { textStyle: { maxLines: 3 } }\n }\n };\n }\n };\n\nBasic.args = {\n content: lorum,\n marquee: false,\n fixed: true,\n w: 600\n};\n\nBasic.argTypes = {\n content: {\n control: 'text',\n description: 'Text to be displayed in element',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n marquee: {\n control: 'boolean',\n description:\n \"Scrolls text when a single line of text is longer than the textbox's width\",\n table: {\n defaultValue: { summary: false }\n }\n },\n fixed: {\n control: 'boolean',\n description:\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const WithInlineContentArray = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 200,\n w: 400,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nWithInlineContentArray.args = inlineContentArgs;\nWithInlineContentArray.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentString = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 400,\n w: 400,\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n }\n }\n };\n }\n };\n\nWithInlineContentString.args = inlineContentArgs;\nWithInlineContentString.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n w: 500,\n style: {\n textStyle: {\n maxLines: 2,\n maxLinesSuffix: '...'\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\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 TextBox from '.';\nimport mdx from './TextBox.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/TextBox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\n inlineContentStory;\n\nconst lorum =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n fixed: true,\n w: 600,\n style: { textStyle: { maxLines: 3 } }\n }\n };\n }\n };\n\nBasic.args = {\n content: lorum,\n marquee: false,\n fixed: true,\n w: 600\n};\n\nBasic.argTypes = {\n content: {\n control: 'text',\n description: 'Text to be displayed in element',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n marquee: {\n control: 'boolean',\n description:\n \"Scrolls text when a single line of text is longer than the textbox's width\",\n table: {\n defaultValue: { summary: false }\n }\n },\n fixed: {\n control: 'boolean',\n description:\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const WithInlineContentArray = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 200,\n w: 400,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nWithInlineContentArray.args = inlineContentArgs;\nWithInlineContentArray.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentString = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 400,\n w: 400,\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n }\n }\n };\n }\n };\n\nWithInlineContentString.args = inlineContentArgs;\nWithInlineContentString.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n w: 500,\n style: {\n textStyle: {\n maxLines: 2,\n maxLinesSuffix: '...'\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -55938,10 +55886,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var TextBox_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][256] + "/TextBox", + title: constants["a" /* CATEGORIES */][8] + "/TextBox", 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 TextBox from '.';\nimport mdx from './TextBox.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[256]}/TextBox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\n inlineContentStory;\n\nconst lorum =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n fixed: true,\n w: 600,\n style: { textStyle: { maxLines: 3 } }\n }\n };\n }\n };\n\nBasic.args = {\n content: lorum,\n marquee: false,\n fixed: true,\n w: 600\n};\n\nBasic.argTypes = {\n content: {\n control: 'text',\n description: 'Text to be displayed in element',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n marquee: {\n control: 'boolean',\n description:\n \"Scrolls text when a single line of text is longer than the textbox's width\",\n table: {\n defaultValue: { summary: false }\n }\n },\n fixed: {\n control: 'boolean',\n description:\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const WithInlineContentArray = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 200,\n w: 400,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nWithInlineContentArray.args = inlineContentArgs;\nWithInlineContentArray.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentString = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 400,\n w: 400,\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n }\n }\n };\n }\n };\n\nWithInlineContentString.args = inlineContentArgs;\nWithInlineContentString.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n w: 500,\n style: {\n textStyle: {\n maxLines: 2,\n maxLinesSuffix: '...'\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\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 TextBox from '.';\nimport mdx from './TextBox.mdx';\nimport lightningbolt from '../../assets/images/ic_lightning_white_32.png';\nimport { getHexColor } from '../../utils';\nimport inlineContentStory from '../InlineContent/InlineContent.stories';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/TextBox`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst { args: inlineContentArgs, argTypes: inlineContentArgTypes } =\n inlineContentStory;\n\nconst lorum =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n fixed: true,\n w: 600,\n style: { textStyle: { maxLines: 3 } }\n }\n };\n }\n };\n\nBasic.args = {\n content: lorum,\n marquee: false,\n fixed: true,\n w: 600\n};\n\nBasic.argTypes = {\n content: {\n control: 'text',\n description: 'Text to be displayed in element',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n marquee: {\n control: 'boolean',\n description:\n \"Scrolls text when a single line of text is longer than the textbox's width\",\n table: {\n defaultValue: { summary: false }\n }\n },\n fixed: {\n control: 'boolean',\n description:\n 'Flag that when set to `true`, allows the width of the component to be set with `w`',\n table: {\n defaultValue: { summary: false }\n }\n },\n w: {\n control: 'number',\n description:\n 'When the `fixed` property is `true`, this will set the width of the component (but only if `wordWrapWidth` is not defined otherwise the width will reflect the `wordWrapWidth` value)',\n table: {\n defaultValue: { summary: 0 }\n }\n }\n};\n\nexport const WithInlineContentArray = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 200,\n w: 400,\n content: [\n 'Text',\n {\n icon: lightningbolt,\n style: { color: getHexColor('00ff00') },\n title: 'Green Lightning Bolt'\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' }\n ]\n }\n };\n }\n };\n\nWithInlineContentArray.args = inlineContentArgs;\nWithInlineContentArray.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentString = () =>\n class WithInlineContentArray extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n x: 400,\n w: 400,\n content:\n 'This is an example of using custom markup {ICON:settings|https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png} with a linebreak{NEWLINE}{BADGE:HD} that includes all available types like {TEXT:styled text|italic}.',\n customStyleMappings: {\n italic: {\n fontStyle: 'italic',\n textColor: getHexColor('FF6194')\n }\n }\n }\n };\n }\n };\n\nWithInlineContentString.args = inlineContentArgs;\nWithInlineContentString.argTypes = inlineContentArgTypes;\n\nexport const WithInlineContentTruncation = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n TextBox: {\n type: TextBox,\n w: 500,\n style: {\n textStyle: {\n maxLines: 2,\n maxLinesSuffix: '...'\n }\n },\n content: [\n 'Text',\n {\n icon: lightningbolt,\n title: 'Green Lightning Bolt',\n style: { color: getHexColor('00ff00') }\n },\n 'Wrapping Text',\n {\n icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',\n title: 'Rotten Tomatoes rating'\n },\n 'and more text',\n {\n text: 'with some red ',\n style: { textColor: getHexColor('FF6194') }\n },\n 'for fun',\n { badge: 'HD', title: 'HD' },\n { badge: 'SD', title: 'SD' },\n ', and this should truncate before going on to a third line.'\n ],\n contentWrap: true\n }\n };\n }\n };\n", "locationsMap": { "basic": { "startLoc": { @@ -57148,7 +57096,7 @@ function MDXContent(_ref) { }, "import { Tile } from '@lightningjs/ui-components';\n\nclass Basic extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: Tile\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "tiles-cards-tile--tile", + id: "components-tile--tile", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "metadata" @@ -57200,7 +57148,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/foundations-artwork--artwork" + "href": "?path=/docs/components-artwork--artwork" }, "Artwork component"))), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { @@ -57220,7 +57168,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/metadata-badge--text" + "href": "?path=/docs/components-badge--text" }, "Badge component"))), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { @@ -57240,7 +57188,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/utilities-checkbox--checkbox" + "href": "?path=/docs/components-checkbox--checkbox" }, "Checkbox component"))), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { @@ -57260,7 +57208,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/metadata-label--label" + "href": "?path=/docs/components-label--label" }, "Label component"))), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { @@ -57280,7 +57228,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "?path=/docs/metadata-metadatatile--metadata-tile" + "href": "?path=/docs/components-metadatatile--metadata-tile" }, "MetadataTile component"), Object(esm["b" /* mdx */])("br", null), " Can use a different Metadata component by passing in a 'type' and then that component's properties")), Object(esm["b" /* mdx */])("tr", { parentName: "tbody" }, Object(esm["b" /* mdx */])("td", { @@ -57334,7 +57282,7 @@ function MDXContent(_ref) { "align": null }, "Object containing all properties supported in the ", Object(esm["b" /* mdx */])("a", { parentName: "td", - "href": "??path=/docs/utilities-progressbar--progress-bar" + "href": "?path=/docs/components-progressbar--progress-bar" }, "ProgressBar component"))))), Object(esm["b" /* mdx */])("h3", { "id": "style-properties" }, "Style Properties"), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { @@ -57503,7 +57451,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './Tile.mdx';\\nimport { default as TileComponent } from '.';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\\nimport { Label as LabelStory } from '../Label/Label.stories.js';\\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/Tile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tile = () =>\\n class Tile extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: TileComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n }\\n };\\n }\\n };\\n\\nTile.args = {\\n metadataLocation: 'standard',\\n persistentMetadata: false,\\n mode: 'focused'\\n};\\n\\nTile.argTypes = {\\n ...createModeControl({ summaryValue: Tile.args.mode }),\\n persistentMetadata: {\\n control: 'boolean',\\n description: 'Show metadata if exists regardless of focusState',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n metadataLocation: {\\n control: 'radio',\\n options: ['standard', 'inset'],\\n description:\\n 'Controls where metadata is positioned in relationship to the Tile',\\n table: {\\n defaultValue: { summary: 'standard' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: MetadataTileStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ItemLayoutStory,\\n targetProperty: 'itemLayout',\\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: BadgeStory,\\n targetProperty: 'badge',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: LabelStory,\\n targetProperty: 'label',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ArtworkStory,\\n targetProperty: 'artwork',\\n include: ['blur', 'foregroundSrc', 'format', 'fill']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ProgressBarStory,\\n targetProperty: 'progressBar',\\n include: ['progress']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: CheckboxStory,\\n targetProperty: 'checkbox',\\n include: ['checked']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Tile\":{\"startLoc\":{\"col\":20,\"line\":41},\"endLoc\":{\"col\":3,\"line\":58},\"startBody\":{\"col\":20,\"line\":41},\"endBody\":{\"col\":3,\"line\":58}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './Tile.mdx';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\nimport { Label as LabelStory } from '../Label/Label.stories.js';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\n\nexport default {\n title: `${CATEGORIES[128]}/Tile`,\n 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 mdx from './Tile.mdx';\\nimport { default as TileComponent } from '.';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\\nimport { Label as LabelStory } from '../Label/Label.stories.js';\\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\\n\\nexport default {\\n title: `${CATEGORIES[128]}/Tile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tile = () =>\\n class Tile extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: TileComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n }\\n };\\n }\\n };\\n\\nTile.args = {\\n metadataLocation: 'standard',\\n persistentMetadata: false,\\n mode: 'focused'\\n};\\n\\nTile.argTypes = {\\n ...createModeControl({ summaryValue: Tile.args.mode }),\\n persistentMetadata: {\\n control: 'boolean',\\n description: 'Show metadata if exists regardless of focusState',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n metadataLocation: {\\n control: 'radio',\\n options: ['standard', 'inset'],\\n description:\\n 'Controls where metadata is positioned in relationship to the Tile',\\n table: {\\n defaultValue: { summary: 'standard' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: MetadataTileStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ItemLayoutStory,\\n targetProperty: 'itemLayout',\\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: BadgeStory,\\n targetProperty: 'badge',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: LabelStory,\\n targetProperty: 'label',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ArtworkStory,\\n targetProperty: 'artwork',\\n include: ['blur', 'foregroundSrc', 'format', 'fill']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ProgressBarStory,\\n targetProperty: 'progressBar',\\n include: ['progress']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: CheckboxStory,\\n targetProperty: 'checkbox',\\n include: ['checked']\\n});\\n\",\"locationsMap\":{\"tile\":{\"startLoc\":{\"col\":20,\"line\":41},\"endLoc\":{\"col\":3,\"line\":58},\"startBody\":{\"col\":20,\"line\":41},\"endBody\":{\"col\":3,\"line\":58}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './Tile.mdx';\\nimport { default as TileComponent } from '.';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\\nimport { Label as LabelStory } from '../Label/Label.stories.js';\\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Tile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tile = () =>\\n class Tile extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: TileComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n }\\n };\\n }\\n };\\n\\nTile.args = {\\n metadataLocation: 'standard',\\n persistentMetadata: false,\\n mode: 'focused'\\n};\\n\\nTile.argTypes = {\\n ...createModeControl({ summaryValue: Tile.args.mode }),\\n persistentMetadata: {\\n control: 'boolean',\\n description: 'Show metadata if exists regardless of focusState',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n metadataLocation: {\\n control: 'radio',\\n options: ['standard', 'inset'],\\n description:\\n 'Controls where metadata is positioned in relationship to the Tile',\\n table: {\\n defaultValue: { summary: 'standard' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: MetadataTileStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ItemLayoutStory,\\n targetProperty: 'itemLayout',\\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: BadgeStory,\\n targetProperty: 'badge',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: LabelStory,\\n targetProperty: 'label',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ArtworkStory,\\n targetProperty: 'artwork',\\n include: ['blur', 'foregroundSrc', 'format', 'fill']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ProgressBarStory,\\n targetProperty: 'progressBar',\\n include: ['progress']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: CheckboxStory,\\n targetProperty: 'checkbox',\\n include: ['checked']\\n});\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Tile\":{\"startLoc\":{\"col\":20,\"line\":41},\"endLoc\":{\"col\":3,\"line\":58},\"startBody\":{\"col\":20,\"line\":41},\"endBody\":{\"col\":3,\"line\":58}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './Tile.mdx';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\nimport { Label as LabelStory } from '../Label/Label.stories.js';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\n\nexport default {\n title: `${CATEGORIES[8]}/Tile`,\n 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 mdx from './Tile.mdx';\\nimport { default as TileComponent } from '.';\\nimport { createModeControl, generateSubStory } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\\nimport { Label as LabelStory } from '../Label/Label.stories.js';\\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Tile`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Tile = () =>\\n class Tile extends lng.Component {\\n static _template() {\\n return {\\n Tile: {\\n type: TileComponent,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3\\n },\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\\n }\\n }\\n };\\n }\\n };\\n\\nTile.args = {\\n metadataLocation: 'standard',\\n persistentMetadata: false,\\n mode: 'focused'\\n};\\n\\nTile.argTypes = {\\n ...createModeControl({ summaryValue: Tile.args.mode }),\\n persistentMetadata: {\\n control: 'boolean',\\n description: 'Show metadata if exists regardless of focusState',\\n table: {\\n defaultValue: { summary: false }\\n }\\n },\\n metadataLocation: {\\n control: 'radio',\\n options: ['standard', 'inset'],\\n description:\\n 'Controls where metadata is positioned in relationship to the Tile',\\n table: {\\n defaultValue: { summary: 'standard' }\\n }\\n }\\n};\\n\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: MetadataTileStory,\\n targetProperty: 'metadata',\\n include: ['title', 'description']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ItemLayoutStory,\\n targetProperty: 'itemLayout',\\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: BadgeStory,\\n targetProperty: 'badge',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: LabelStory,\\n targetProperty: 'label',\\n include: ['title']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ArtworkStory,\\n targetProperty: 'artwork',\\n include: ['blur', 'foregroundSrc', 'format', 'fill']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: ProgressBarStory,\\n targetProperty: 'progressBar',\\n include: ['progress']\\n});\\ngenerateSubStory({\\n componentName: 'Tile',\\n baseStory: Tile,\\n subStory: CheckboxStory,\\n targetProperty: 'checkbox',\\n include: ['checked']\\n});\\n\",\"locationsMap\":{\"tile\":{\"startLoc\":{\"col\":20,\"line\":41},\"endLoc\":{\"col\":3,\"line\":58},\"startBody\":{\"col\":20,\"line\":41},\"endBody\":{\"col\":3,\"line\":58}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Tile": { @@ -57529,7 +57477,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 mdx from './Tile.mdx';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\nimport { Label as LabelStory } from '../Label/Label.stories.js';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\n\nexport default {\n title: `${CATEGORIES[128]}/Tile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n"; +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 mdx from './Tile.mdx';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\nimport { Label as LabelStory } from '../Label/Label.stories.js';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\n\nexport default {\n title: `${CATEGORIES[8]}/Tile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Tile": { @@ -57583,10 +57531,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Tile_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][128] + "/Tile", + title: constants["a" /* CATEGORIES */][8] + "/Tile", 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 mdx from './Tile.mdx';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\nimport { Label as LabelStory } from '../Label/Label.stories.js';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\n\nexport default {\n title: `${CATEGORIES[128]}/Tile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n", + "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 mdx from './Tile.mdx';\nimport { default as TileComponent } from '.';\nimport { createModeControl, generateSubStory } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\nimport { Artwork as ArtworkStory } from '../Artwork/Artwork.stories.js';\nimport { Checkbox as CheckboxStory } from '../Checkbox/Checkbox.stories.js';\nimport { MetadataTile as MetadataTileStory } from '../MetadataTile/MetadataTile.stories';\nimport { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayout.stories.js';\nimport { Label as LabelStory } from '../Label/Label.stories.js';\nimport { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';\nimport { Text as BadgeStory } from '../Badge/Badge.stories.js';\n\nexport default {\n title: `${CATEGORIES[8]}/Tile`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Tile = () =>\n class Tile extends lng.Component {\n static _template() {\n return {\n Tile: {\n type: TileComponent,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 3\n },\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg'\n }\n }\n };\n }\n };\n\nTile.args = {\n metadataLocation: 'standard',\n persistentMetadata: false,\n mode: 'focused'\n};\n\nTile.argTypes = {\n ...createModeControl({ summaryValue: Tile.args.mode }),\n persistentMetadata: {\n control: 'boolean',\n description: 'Show metadata if exists regardless of focusState',\n table: {\n defaultValue: { summary: false }\n }\n },\n metadataLocation: {\n control: 'radio',\n options: ['standard', 'inset'],\n description:\n 'Controls where metadata is positioned in relationship to the Tile',\n table: {\n defaultValue: { summary: 'standard' }\n }\n }\n};\n\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: MetadataTileStory,\n targetProperty: 'metadata',\n include: ['title', 'description']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ItemLayoutStory,\n targetProperty: 'itemLayout',\n include: ['ratioX', 'ratioY', 'upCount', 'circle']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: BadgeStory,\n targetProperty: 'badge',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: LabelStory,\n targetProperty: 'label',\n include: ['title']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ArtworkStory,\n targetProperty: 'artwork',\n include: ['blur', 'foregroundSrc', 'format', 'fill']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: ProgressBarStory,\n targetProperty: 'progressBar',\n include: ['progress']\n});\ngenerateSubStory({\n componentName: 'Tile',\n baseStory: Tile,\n subStory: CheckboxStory,\n targetProperty: 'checkbox',\n include: ['checked']\n});\n", "locationsMap": { "tile": { "startLoc": { @@ -58158,10 +58106,10 @@ function MDXContent(_ref) { parentName: "p" }, "TitleRow"), " component renders a ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/layout-row--basic" + "href": "/docs/components-row--basic" }, "Row"), " component with a title displayed as a ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/elements-textbox--base" + "href": "/docs/components-textbox--base" }, "TextBox"), " above the Row items."), Object(esm["b" /* mdx */])("h2", { "id": "source" }, "Source"), Object(esm["b" /* mdx */])("p", null, Object(esm["b" /* mdx */])("a", { @@ -58175,7 +58123,7 @@ function MDXContent(_ref) { parentName: "p" }, "TitleRow"), " accepts all ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/layout-row--basic#properties" + "href": "/docs/components-row--basic#properties" }, "properties supported by Row"), " as well as an optional ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "title"), " property."), Object(esm["b" /* mdx */])("pre", null, Object(esm["b" /* mdx */])("code", { @@ -58184,7 +58132,7 @@ function MDXContent(_ref) { }, "import { TitleRow } from '@lightningjs/ui-components';\nclass Example extends lng.Component {\n static _template() {\n return {\n TitleRow: {\n type: TitleRow,\n title: 'Row Title',\n items: [\n // list of item components\n ]\n }\n };\n }\n _getFocused() {\n return this.tag('TitleRow');\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "navigation-titlerow--title-row", + id: "components-titlerow--title-row", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -58196,10 +58144,10 @@ function MDXContent(_ref) { parentName: "strong" }, "TitleRow"), " is a subclass of the ", Object(esm["b" /* mdx */])("a", { parentName: "strong", - "href": "/docs/layout-row--basic" + "href": "/docs/components-row--basic" }, "Row component")), ","), Object(esm["b" /* mdx */])("p", null, "It allows setting all\n", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/layout-row--basic#properties" + "href": "/docs/components-row--basic#properties" }, "properties, style properties, and child properties"), "\nsupported by ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "Row"), "."), Object(esm["b" /* mdx */])("table", null, Object(esm["b" /* mdx */])("thead", { @@ -58248,7 +58196,7 @@ function MDXContent(_ref) { parentName: "p" }, "TitleRow"), " can access ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "/docs/layout-row--basic#methods" + "href": "/docs/components-row--basic#methods" }, "all public methods supported by the Row component"))); } ; @@ -58293,7 +58241,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { Row as RowBasic } from '../Row/Row.stories.js';\\nimport Tile from '../Tile';\\nimport mdx from './TitleRow.mdx';\\nimport { default as TitleRowComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\n// add remount to all Row argTypes individually since Row uses remountAll\\n// TitleRow title prop can be updated without requiring a remount\\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\\n acc[key] = {\\n ...RowBasic.argTypes[key],\\n remount: key !== 'mode'\\n };\\n return acc;\\n}, {});\\n\\nexport default {\\n title: `${CATEGORIES[64]}/TitleRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n title: 'Row Title',\\n ...RowBasic.args\\n },\\n argTypes: {\\n title: {\\n control: 'text',\\n description: 'title text to be displayed above the row',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n ...rowArgTypes\\n }\\n};\\n\\nconst createItems = length => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`\\n }));\\n};\\n\\nexport const TitleRow = () =>\\n class TitleRow extends lng.Component {\\n static _template() {\\n return {\\n TitleRow: {\\n type: TitleRowComponent,\\n items: createItems(12)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('TitleRow');\\n }\\n };\\n\\nTitleRow.storyName = 'TitleRow';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"TitleRow\":{\"startLoc\":{\"col\":24,\"line\":72},\"endLoc\":{\"col\":3,\"line\":86},\"startBody\":{\"col\":24,\"line\":72},\"endBody\":{\"col\":3,\"line\":86}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { Row as RowBasic } from '../Row/Row.stories.js';\nimport Tile from '../Tile';\nimport mdx from './TitleRow.mdx';\nimport { default as TitleRowComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\n// add remount to all Row argTypes individually since Row uses remountAll\n// TitleRow title prop can be updated without requiring a remount\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\n acc[key] = {\n ...RowBasic.argTypes[key],\n remount: key !== 'mode'\n };\n return acc;\n}, {});\n\nexport default {\n title: `${CATEGORIES[64]}/TitleRow`,\n 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 { Row as RowBasic } from '../Row/Row.stories.js';\\nimport Tile from '../Tile';\\nimport mdx from './TitleRow.mdx';\\nimport { default as TitleRowComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\n// add remount to all Row argTypes individually since Row uses remountAll\\n// TitleRow title prop can be updated without requiring a remount\\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\\n acc[key] = {\\n ...RowBasic.argTypes[key],\\n remount: key !== 'mode'\\n };\\n return acc;\\n}, {});\\n\\nexport default {\\n title: `${CATEGORIES[64]}/TitleRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n title: 'Row Title',\\n ...RowBasic.args\\n },\\n argTypes: {\\n title: {\\n control: 'text',\\n description: 'title text to be displayed above the row',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n ...rowArgTypes\\n }\\n};\\n\\nconst createItems = length => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`\\n }));\\n};\\n\\nexport const TitleRow = () =>\\n class TitleRow extends lng.Component {\\n static _template() {\\n return {\\n TitleRow: {\\n type: TitleRowComponent,\\n items: createItems(12)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('TitleRow');\\n }\\n };\\n\\nTitleRow.storyName = 'TitleRow';\\n\",\"locationsMap\":{\"title-row\":{\"startLoc\":{\"col\":24,\"line\":72},\"endLoc\":{\"col\":3,\"line\":86},\"startBody\":{\"col\":24,\"line\":72},\"endBody\":{\"col\":3,\"line\":86}}}},\n docs: {\n page: mdx\n }\n },\n args: {\n title: 'Row Title',\n ...RowBasic.args\n },\n argTypes: {\n title: {\n control: 'text',\n description: 'title text to be displayed above the row',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n ...rowArgTypes\n }\n};\n\nconst createItems = length => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`\n }));\n};\n\nexport const TitleRow = () =>\n class TitleRow extends lng.Component {\n static _template() {\n return {\n TitleRow: {\n type: TitleRowComponent,\n items: createItems(12)\n }\n };\n }\n\n _getFocused() {\n return this.tag('TitleRow');\n }\n };\n\nTitleRow.storyName = 'TitleRow';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { Row as RowBasic } from '../Row/Row.stories.js';\\nimport Tile from '../Tile';\\nimport mdx from './TitleRow.mdx';\\nimport { default as TitleRowComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\n// add remount to all Row argTypes individually since Row uses remountAll\\n// TitleRow title prop can be updated without requiring a remount\\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\\n acc[key] = {\\n ...RowBasic.argTypes[key],\\n remount: key !== 'mode'\\n };\\n return acc;\\n}, {});\\n\\nexport default {\\n title: `${CATEGORIES[8]}/TitleRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n title: 'Row Title',\\n ...RowBasic.args\\n },\\n argTypes: {\\n title: {\\n control: 'text',\\n description: 'title text to be displayed above the row',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n ...rowArgTypes\\n }\\n};\\n\\nconst createItems = length => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`\\n }));\\n};\\n\\nexport const TitleRow = () =>\\n class TitleRow extends lng.Component {\\n static _template() {\\n return {\\n TitleRow: {\\n type: TitleRowComponent,\\n items: createItems(12)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('TitleRow');\\n }\\n };\\n\\nTitleRow.storyName = 'TitleRow';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"TitleRow\":{\"startLoc\":{\"col\":24,\"line\":72},\"endLoc\":{\"col\":3,\"line\":86},\"startBody\":{\"col\":24,\"line\":72},\"endBody\":{\"col\":3,\"line\":86}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { Row as RowBasic } from '../Row/Row.stories.js';\nimport Tile from '../Tile';\nimport mdx from './TitleRow.mdx';\nimport { default as TitleRowComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\n// add remount to all Row argTypes individually since Row uses remountAll\n// TitleRow title prop can be updated without requiring a remount\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\n acc[key] = {\n ...RowBasic.argTypes[key],\n remount: key !== 'mode'\n };\n return acc;\n}, {});\n\nexport default {\n title: `${CATEGORIES[8]}/TitleRow`,\n 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 { Row as RowBasic } from '../Row/Row.stories.js';\\nimport Tile from '../Tile';\\nimport mdx from './TitleRow.mdx';\\nimport { default as TitleRowComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\n// add remount to all Row argTypes individually since Row uses remountAll\\n// TitleRow title prop can be updated without requiring a remount\\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\\n acc[key] = {\\n ...RowBasic.argTypes[key],\\n remount: key !== 'mode'\\n };\\n return acc;\\n}, {});\\n\\nexport default {\\n title: `${CATEGORIES[8]}/TitleRow`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n },\\n args: {\\n title: 'Row Title',\\n ...RowBasic.args\\n },\\n argTypes: {\\n title: {\\n control: 'text',\\n description: 'title text to be displayed above the row',\\n table: {\\n defaultValue: { summary: 'undefined' }\\n }\\n },\\n ...rowArgTypes\\n }\\n};\\n\\nconst createItems = length => {\\n return Array.from({ length }).map((_, index) => ({\\n type: Tile,\\n itemLayout: {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 4\\n },\\n announce: 'Tile',\\n announceContext: `${index + 1} of ${length}`\\n }));\\n};\\n\\nexport const TitleRow = () =>\\n class TitleRow extends lng.Component {\\n static _template() {\\n return {\\n TitleRow: {\\n type: TitleRowComponent,\\n items: createItems(12)\\n }\\n };\\n }\\n\\n _getFocused() {\\n return this.tag('TitleRow');\\n }\\n };\\n\\nTitleRow.storyName = 'TitleRow';\\n\",\"locationsMap\":{\"title-row\":{\"startLoc\":{\"col\":24,\"line\":72},\"endLoc\":{\"col\":3,\"line\":86},\"startBody\":{\"col\":24,\"line\":72},\"endBody\":{\"col\":3,\"line\":86}}}},\n docs: {\n page: mdx\n }\n },\n args: {\n title: 'Row Title',\n ...RowBasic.args\n },\n argTypes: {\n title: {\n control: 'text',\n description: 'title text to be displayed above the row',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n ...rowArgTypes\n }\n};\n\nconst createItems = length => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`\n }));\n};\n\nexport const TitleRow = () =>\n class TitleRow extends lng.Component {\n static _template() {\n return {\n TitleRow: {\n type: TitleRowComponent,\n items: createItems(12)\n }\n };\n }\n\n _getFocused() {\n return this.tag('TitleRow');\n }\n };\n\nTitleRow.storyName = 'TitleRow';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "TitleRow": { @@ -58319,7 +58267,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { Row as RowBasic } from '../Row/Row.stories.js';\nimport Tile from '../Tile';\nimport mdx from './TitleRow.mdx';\nimport { default as TitleRowComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\n// add remount to all Row argTypes individually since Row uses remountAll\n// TitleRow title prop can be updated without requiring a remount\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\n acc[key] = {\n ...RowBasic.argTypes[key],\n remount: key !== 'mode'\n };\n return acc;\n}, {});\n\nexport default {\n title: `${CATEGORIES[64]}/TitleRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n title: 'Row Title',\n ...RowBasic.args\n },\n argTypes: {\n title: {\n control: 'text',\n description: 'title text to be displayed above the row',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n ...rowArgTypes\n }\n};\n\nconst createItems = length => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`\n }));\n};\n\nexport const TitleRow = () =>\n class TitleRow extends lng.Component {\n static _template() {\n return {\n TitleRow: {\n type: TitleRowComponent,\n items: createItems(12)\n }\n };\n }\n\n _getFocused() {\n return this.tag('TitleRow');\n }\n };\n\nTitleRow.storyName = 'TitleRow';\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 { Row as RowBasic } from '../Row/Row.stories.js';\nimport Tile from '../Tile';\nimport mdx from './TitleRow.mdx';\nimport { default as TitleRowComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\n// add remount to all Row argTypes individually since Row uses remountAll\n// TitleRow title prop can be updated without requiring a remount\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\n acc[key] = {\n ...RowBasic.argTypes[key],\n remount: key !== 'mode'\n };\n return acc;\n}, {});\n\nexport default {\n title: `${CATEGORIES[8]}/TitleRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n title: 'Row Title',\n ...RowBasic.args\n },\n argTypes: {\n title: {\n control: 'text',\n description: 'title text to be displayed above the row',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n ...rowArgTypes\n }\n};\n\nconst createItems = length => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`\n }));\n};\n\nexport const TitleRow = () =>\n class TitleRow extends lng.Component {\n static _template() {\n return {\n TitleRow: {\n type: TitleRowComponent,\n items: createItems(12)\n }\n };\n }\n\n _getFocused() {\n return this.tag('TitleRow');\n }\n };\n\nTitleRow.storyName = 'TitleRow';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "TitleRow": { @@ -58376,10 +58324,10 @@ var rowArgTypes = Object.keys(Row_stories["Row"].argTypes).reduce(function (acc, return acc; }, {}); /* harmony default export */ var TitleRow_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][64] + "/TitleRow", + title: constants["a" /* CATEGORIES */][8] + "/TitleRow", 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 { Row as RowBasic } from '../Row/Row.stories.js';\nimport Tile from '../Tile';\nimport mdx from './TitleRow.mdx';\nimport { default as TitleRowComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\n// add remount to all Row argTypes individually since Row uses remountAll\n// TitleRow title prop can be updated without requiring a remount\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\n acc[key] = {\n ...RowBasic.argTypes[key],\n remount: key !== 'mode'\n };\n return acc;\n}, {});\n\nexport default {\n title: `${CATEGORIES[64]}/TitleRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n title: 'Row Title',\n ...RowBasic.args\n },\n argTypes: {\n title: {\n control: 'text',\n description: 'title text to be displayed above the row',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n ...rowArgTypes\n }\n};\n\nconst createItems = length => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`\n }));\n};\n\nexport const TitleRow = () =>\n class TitleRow extends lng.Component {\n static _template() {\n return {\n TitleRow: {\n type: TitleRowComponent,\n items: createItems(12)\n }\n };\n }\n\n _getFocused() {\n return this.tag('TitleRow');\n }\n };\n\nTitleRow.storyName = 'TitleRow';\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 { Row as RowBasic } from '../Row/Row.stories.js';\nimport Tile from '../Tile';\nimport mdx from './TitleRow.mdx';\nimport { default as TitleRowComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\n// add remount to all Row argTypes individually since Row uses remountAll\n// TitleRow title prop can be updated without requiring a remount\nconst rowArgTypes = Object.keys(RowBasic.argTypes).reduce((acc, key) => {\n acc[key] = {\n ...RowBasic.argTypes[key],\n remount: key !== 'mode'\n };\n return acc;\n}, {});\n\nexport default {\n title: `${CATEGORIES[8]}/TitleRow`,\n parameters: {\n docs: {\n page: mdx\n }\n },\n args: {\n title: 'Row Title',\n ...RowBasic.args\n },\n argTypes: {\n title: {\n control: 'text',\n description: 'title text to be displayed above the row',\n table: {\n defaultValue: { summary: 'undefined' }\n }\n },\n ...rowArgTypes\n }\n};\n\nconst createItems = length => {\n return Array.from({ length }).map((_, index) => ({\n type: Tile,\n itemLayout: {\n ratioX: 16,\n ratioY: 9,\n upCount: 4\n },\n announce: 'Tile',\n announceContext: `${index + 1} of ${length}`\n }));\n};\n\nexport const TitleRow = () =>\n class TitleRow extends lng.Component {\n static _template() {\n return {\n TitleRow: {\n type: TitleRowComponent,\n items: createItems(12)\n }\n };\n }\n\n _getFocused() {\n return this.tag('TitleRow');\n }\n };\n\nTitleRow.storyName = 'TitleRow';\n", "locationsMap": { "title-row": { "startLoc": { @@ -58933,7 +58881,7 @@ function MDXContent(_ref) { }, "import { Toggle } from '@lightningjs/ui-components';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Toggle: {\n type: Toggle\n }\n };\n }\n}\n")), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Canvas */ "b"], { mdxType: "Canvas" }, Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__[/* Story */ "f"], { - id: "utilities-toggle--toggle", + id: "components-toggle--toggle", mdxType: "Story" })), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("p", null, "The ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("inlineCode", { parentName: "p" @@ -59250,7 +59198,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ToggleComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Toggle`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Toggle = () =>\\n class Toggle extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Toggle: {\\n type: ToggleComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggle.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nToggle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Toggle\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":49}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ToggleComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Toggle`,\n 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 { default as ToggleComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Toggle`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Toggle = () =>\\n class Toggle extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Toggle: {\\n type: ToggleComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggle.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nToggle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"toggle\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":49}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Toggle = () =>\n class Toggle extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Toggle: {\n type: ToggleComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggle.args = {\n checked: false,\n mode: 'focused'\n};\n\nToggle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { default as ToggleComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Toggle`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Toggle = () =>\\n class Toggle extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Toggle: {\\n type: ToggleComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggle.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nToggle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Toggle\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":49}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { default as ToggleComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Toggle`,\n 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 { default as ToggleComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Toggle`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Toggle = () =>\\n class Toggle extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n Toggle: {\\n type: ToggleComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggle.args = {\\n checked: false,\\n mode: 'focused'\\n};\\n\\nToggle.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"toggle\":{\"startLoc\":{\"col\":22,\"line\":34},\"endLoc\":{\"col\":3,\"line\":49},\"startBody\":{\"col\":22,\"line\":34},\"endBody\":{\"col\":3,\"line\":49}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Toggle = () =>\n class Toggle extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Toggle: {\n type: ToggleComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggle.args = {\n checked: false,\n mode: 'focused'\n};\n\nToggle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Toggle": { @@ -59276,7 +59224,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { default as ToggleComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Toggle`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Toggle = () =>\n class Toggle extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Toggle: {\n type: ToggleComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggle.args = {\n checked: false,\n mode: 'focused'\n};\n\nToggle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\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 { default as ToggleComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Toggle`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Toggle = () =>\n class Toggle extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Toggle: {\n type: ToggleComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggle.args = {\n checked: false,\n mode: 'focused'\n};\n\nToggle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Toggle": { @@ -59323,10 +59271,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ __webpack_exports__["default"] = ({ - title: _docs_constants__WEBPACK_IMPORTED_MODULE_17__[/* CATEGORIES */ "a"][512] + "/Toggle", + title: _docs_constants__WEBPACK_IMPORTED_MODULE_17__[/* CATEGORIES */ "a"][8] + "/Toggle", 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 { default as ToggleComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Toggle`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Toggle = () =>\n class Toggle extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Toggle: {\n type: ToggleComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggle.args = {\n checked: false,\n mode: 'focused'\n};\n\nToggle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\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 { default as ToggleComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Toggle`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Toggle = () =>\n class Toggle extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n Toggle: {\n type: ToggleComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggle.args = {\n checked: false,\n mode: 'focused'\n};\n\nToggle.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", "locationsMap": { "toggle": { "startLoc": { @@ -59603,7 +59551,7 @@ function ToggleSmall_stories_getPrototypeOf(o) { ToggleSmall_stories_getPrototyp /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { ToggleSmall as ToggleSmallComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/ToggleSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ToggleSmall = () =>\\n class ToggleSmall extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n ToggleSmall: {\\n type: ToggleSmallComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggleSmall.storyName = 'ToggleSmall';\\nToggleSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nToggleSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ToggleSmall\":{\"startLoc\":{\"col\":27,\"line\":35},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":27,\"line\":35},\"endBody\":{\"col\":3,\"line\":50}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { ToggleSmall as ToggleSmallComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/ToggleSmall`,\n 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';\\n\\nimport { ToggleSmall as ToggleSmallComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/ToggleSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ToggleSmall = () =>\\n class ToggleSmall extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n ToggleSmall: {\\n type: ToggleSmallComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggleSmall.storyName = 'ToggleSmall';\\nToggleSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nToggleSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"toggle-small\":{\"startLoc\":{\"col\":27,\"line\":35},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":27,\"line\":35},\"endBody\":{\"col\":3,\"line\":50}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ToggleSmall = () =>\n class ToggleSmall extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n ToggleSmall: {\n type: ToggleSmallComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggleSmall.storyName = 'ToggleSmall';\nToggleSmall.args = {\n checked: false,\n mode: 'focused'\n};\nToggleSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { ToggleSmall as ToggleSmallComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ToggleSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ToggleSmall = () =>\\n class ToggleSmall extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n ToggleSmall: {\\n type: ToggleSmallComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggleSmall.storyName = 'ToggleSmall';\\nToggleSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nToggleSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"ToggleSmall\":{\"startLoc\":{\"col\":27,\"line\":35},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":27,\"line\":35},\"endBody\":{\"col\":3,\"line\":50}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { ToggleSmall as ToggleSmallComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ToggleSmall`,\n 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';\\n\\nimport { ToggleSmall as ToggleSmallComponent } from '.';\\nimport mdx from './Toggle.mdx';\\nimport { createModeControl } from '../../docs/utils';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/ToggleSmall`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const ToggleSmall = () =>\\n class ToggleSmall extends lng.Component {\\n static _template() {\\n return {\\n flex: { direction: 'column' },\\n ToggleSmall: {\\n type: ToggleSmallComponent,\\n onEnter: toggle => {\\n alert('Sample onEnter override');\\n toggle.toggle();\\n return true;\\n }\\n }\\n };\\n }\\n };\\nToggleSmall.storyName = 'ToggleSmall';\\nToggleSmall.args = {\\n checked: false,\\n mode: 'focused'\\n};\\nToggleSmall.argTypes = {\\n ...createModeControl({ summaryValue: 'focused' }),\\n checked: {\\n control: 'boolean',\\n description: 'The state of the toggle being checked',\\n table: {\\n defaultValue: { summary: false }\\n }\\n }\\n};\\n\",\"locationsMap\":{\"toggle-small\":{\"startLoc\":{\"col\":27,\"line\":35},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":27,\"line\":35},\"endBody\":{\"col\":3,\"line\":50}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const ToggleSmall = () =>\n class ToggleSmall extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n ToggleSmall: {\n type: ToggleSmallComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggleSmall.storyName = 'ToggleSmall';\nToggleSmall.args = {\n checked: false,\n mode: 'focused'\n};\nToggleSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ToggleSmall": { @@ -59629,7 +59577,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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';\n\nimport { ToggleSmall as ToggleSmallComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/ToggleSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ToggleSmall = () =>\n class ToggleSmall extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n ToggleSmall: {\n type: ToggleSmallComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggleSmall.storyName = 'ToggleSmall';\nToggleSmall.args = {\n checked: false,\n mode: 'focused'\n};\nToggleSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\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';\n\nimport { ToggleSmall as ToggleSmallComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ToggleSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ToggleSmall = () =>\n class ToggleSmall extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n ToggleSmall: {\n type: ToggleSmallComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggleSmall.storyName = 'ToggleSmall';\nToggleSmall.args = {\n checked: false,\n mode: 'focused'\n};\nToggleSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "ToggleSmall": { @@ -59676,10 +59624,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var ToggleSmall_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/ToggleSmall", + title: constants["a" /* CATEGORIES */][8] + "/ToggleSmall", 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';\n\nimport { ToggleSmall as ToggleSmallComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/ToggleSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ToggleSmall = () =>\n class ToggleSmall extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n ToggleSmall: {\n type: ToggleSmallComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggleSmall.storyName = 'ToggleSmall';\nToggleSmall.args = {\n checked: false,\n mode: 'focused'\n};\nToggleSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\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';\n\nimport { ToggleSmall as ToggleSmallComponent } from '.';\nimport mdx from './Toggle.mdx';\nimport { createModeControl } from '../../docs/utils';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/ToggleSmall`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const ToggleSmall = () =>\n class ToggleSmall extends lng.Component {\n static _template() {\n return {\n flex: { direction: 'column' },\n ToggleSmall: {\n type: ToggleSmallComponent,\n onEnter: toggle => {\n alert('Sample onEnter override');\n toggle.toggle();\n return true;\n }\n }\n };\n }\n };\nToggleSmall.storyName = 'ToggleSmall';\nToggleSmall.args = {\n checked: false,\n mode: 'focused'\n};\nToggleSmall.argTypes = {\n ...createModeControl({ summaryValue: 'focused' }),\n checked: {\n control: 'boolean',\n description: 'The state of the toggle being checked',\n table: {\n defaultValue: { summary: false }\n }\n }\n};\n", "locationsMap": { "toggle-small": { "startLoc": { @@ -59887,7 +59835,7 @@ function MDXContent(_ref) { }, "import { Tooltip } from '@lightningjs/ui-components';\nimport Button from '../Button';\n\nclass Example extends lng.Component {\n static _template() {\n return {\n Button: {\n type: Button,\n x: 200,\n y: 100,\n w: 410,\n title: '+',\n background: 'stroke',\n Tooltip: {\n type: Tooltip,\n title: 'Add to My List!',\n bottomMargin: 24\n }\n }\n };\n }\n}\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "utilities-tooltip--basic", + id: "components-tooltip--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("h3", { "id": "sizing" @@ -60930,7 +60878,7 @@ function Tooltip_stories_getPrototypeOf(o) { Tooltip_stories_getPrototypeOf = Ob /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Button from '../Button';\\nimport { createModeControl } from '../../docs/utils';\\nimport mdx from './Tooltip.mdx';\\nimport { default as TooltipComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Tooltip`,\\n args: {\\n title: 'Tooltip',\\n delayVisible: 0,\\n timeVisible: 0,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Text content of tooltip',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n delayVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n timeVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgActions = {\\n argActions: {\\n delayVisible: (delayVisible, component) => {\\n component.tag('Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tooltip: {\\n type: TooltipComponent,\\n x: 1280 / 2,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n };\\n }\\n };\\n\\nBasic.parameters = { ...sharedArgActions };\\n\\nexport const LongTitle = Basic.bind({});\\nLongTitle.args = {\\n title:\\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\\n};\\n\\nLongTitle.parameters = { ...sharedArgActions };\\n\\nexport const WithButton = args =>\\n class WithButton extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: class extends Button {\\n _getFocused() {\\n return this.childList.getByRef('Tooltip');\\n }\\n },\\n x: 200,\\n y: 100,\\n title: 'Button',\\n backgroundType: 'stroke',\\n Tooltip: {\\n type: TooltipComponent,\\n title: args.title,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n }\\n };\\n }\\n };\\n\\nWithButton.args = {};\\n\\nWithButton.parameters = {\\n argActions: {\\n title: (title, component) => {\\n component.tag('Button.Tooltip').title = title;\\n },\\n delayVisible: (delayVisible, component) => {\\n component.tag('Button.Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Button.Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"LongTitle\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"WithButton\":{\"startLoc\":{\"col\":26,\"line\":96},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":26,\"line\":96},\"endBody\":{\"col\":3,\"line\":119}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Button from '../Button';\nimport { createModeControl } from '../../docs/utils';\nimport mdx from './Tooltip.mdx';\nimport { default as TooltipComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Tooltip`,\n args: {\n title: 'Tooltip',\n delayVisible: 0,\n timeVisible: 0,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Text content of tooltip',\n table: { defaultValue: { summary: 'undefined' } }\n },\n delayVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n },\n timeVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n }\n },\n 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 Button from '../Button';\\nimport { createModeControl } from '../../docs/utils';\\nimport mdx from './Tooltip.mdx';\\nimport { default as TooltipComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/Tooltip`,\\n args: {\\n title: 'Tooltip',\\n delayVisible: 0,\\n timeVisible: 0,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Text content of tooltip',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n delayVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n timeVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgActions = {\\n argActions: {\\n delayVisible: (delayVisible, component) => {\\n component.tag('Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tooltip: {\\n type: TooltipComponent,\\n x: 1280 / 2,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n };\\n }\\n };\\n\\nBasic.parameters = { ...sharedArgActions };\\n\\nexport const LongTitle = Basic.bind({});\\nLongTitle.args = {\\n title:\\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\\n};\\n\\nLongTitle.parameters = { ...sharedArgActions };\\n\\nexport const WithButton = args =>\\n class WithButton extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: class extends Button {\\n _getFocused() {\\n return this.childList.getByRef('Tooltip');\\n }\\n },\\n x: 200,\\n y: 100,\\n title: 'Button',\\n backgroundType: 'stroke',\\n Tooltip: {\\n type: TooltipComponent,\\n title: args.title,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n }\\n };\\n }\\n };\\n\\nWithButton.args = {};\\n\\nWithButton.parameters = {\\n argActions: {\\n title: (title, component) => {\\n component.tag('Button.Tooltip').title = title;\\n },\\n delayVisible: (delayVisible, component) => {\\n component.tag('Button.Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Button.Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"long-title\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"with-button\":{\"startLoc\":{\"col\":26,\"line\":96},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":26,\"line\":96},\"endBody\":{\"col\":3,\"line\":119}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst sharedArgActions = {\n argActions: {\n delayVisible: (delayVisible, component) => {\n component.tag('Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Tooltip').timeVisible = timeVisible;\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Tooltip: {\n type: TooltipComponent,\n x: 1280 / 2,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n };\n }\n };;\n\nBasic.parameters = { ...sharedArgActions };\n\nexport const LongTitle = Basic.bind({});;\nLongTitle.args = {\n title:\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\n};\n\nLongTitle.parameters = { ...sharedArgActions };\n\nexport const WithButton = args =>\n class WithButton extends lng.Component {\n static _template() {\n return {\n Button: {\n type: class extends Button {\n _getFocused() {\n return this.childList.getByRef('Tooltip');\n }\n },\n x: 200,\n y: 100,\n title: 'Button',\n backgroundType: 'stroke',\n Tooltip: {\n type: TooltipComponent,\n title: args.title,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n }\n };\n }\n };\n\nWithButton.args = {};\n\nWithButton.parameters = {\n argActions: {\n title: (title, component) => {\n component.tag('Button.Tooltip').title = title;\n },\n delayVisible: (delayVisible, component) => {\n component.tag('Button.Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Button.Tooltip').timeVisible = timeVisible;\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 Button from '../Button';\\nimport { createModeControl } from '../../docs/utils';\\nimport mdx from './Tooltip.mdx';\\nimport { default as TooltipComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Tooltip`,\\n args: {\\n title: 'Tooltip',\\n delayVisible: 0,\\n timeVisible: 0,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Text content of tooltip',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n delayVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n timeVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgActions = {\\n argActions: {\\n delayVisible: (delayVisible, component) => {\\n component.tag('Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tooltip: {\\n type: TooltipComponent,\\n x: 1280 / 2,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n };\\n }\\n };\\n\\nBasic.parameters = { ...sharedArgActions };\\n\\nexport const LongTitle = Basic.bind({});\\nLongTitle.args = {\\n title:\\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\\n};\\n\\nLongTitle.parameters = { ...sharedArgActions };\\n\\nexport const WithButton = args =>\\n class WithButton extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: class extends Button {\\n _getFocused() {\\n return this.childList.getByRef('Tooltip');\\n }\\n },\\n x: 200,\\n y: 100,\\n title: 'Button',\\n backgroundType: 'stroke',\\n Tooltip: {\\n type: TooltipComponent,\\n title: args.title,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n }\\n };\\n }\\n };\\n\\nWithButton.args = {};\\n\\nWithButton.parameters = {\\n argActions: {\\n title: (title, component) => {\\n component.tag('Button.Tooltip').title = title;\\n },\\n delayVisible: (delayVisible, component) => {\\n component.tag('Button.Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Button.Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"LongTitle\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"WithButton\":{\"startLoc\":{\"col\":26,\"line\":96},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":26,\"line\":96},\"endBody\":{\"col\":3,\"line\":119}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport Button from '../Button';\nimport { createModeControl } from '../../docs/utils';\nimport mdx from './Tooltip.mdx';\nimport { default as TooltipComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Tooltip`,\n args: {\n title: 'Tooltip',\n delayVisible: 0,\n timeVisible: 0,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Text content of tooltip',\n table: { defaultValue: { summary: 'undefined' } }\n },\n delayVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n },\n timeVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n }\n },\n 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 Button from '../Button';\\nimport { createModeControl } from '../../docs/utils';\\nimport mdx from './Tooltip.mdx';\\nimport { default as TooltipComponent } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[8]}/Tooltip`,\\n args: {\\n title: 'Tooltip',\\n delayVisible: 0,\\n timeVisible: 0,\\n mode: 'focused'\\n },\\n argTypes: {\\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\\n title: {\\n control: 'text',\\n description: 'Text content of tooltip',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n delayVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n },\\n timeVisible: {\\n control: 'number',\\n description:\\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n },\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst sharedArgActions = {\\n argActions: {\\n delayVisible: (delayVisible, component) => {\\n component.tag('Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\\nexport const Basic = args =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n Tooltip: {\\n type: TooltipComponent,\\n x: 1280 / 2,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n };\\n }\\n };\\n\\nBasic.parameters = { ...sharedArgActions };\\n\\nexport const LongTitle = Basic.bind({});\\nLongTitle.args = {\\n title:\\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\\n};\\n\\nLongTitle.parameters = { ...sharedArgActions };\\n\\nexport const WithButton = args =>\\n class WithButton extends lng.Component {\\n static _template() {\\n return {\\n Button: {\\n type: class extends Button {\\n _getFocused() {\\n return this.childList.getByRef('Tooltip');\\n }\\n },\\n x: 200,\\n y: 100,\\n title: 'Button',\\n backgroundType: 'stroke',\\n Tooltip: {\\n type: TooltipComponent,\\n title: args.title,\\n delayVisible: args.delayVisible,\\n timeVisible: args.timeVisible\\n }\\n }\\n };\\n }\\n };\\n\\nWithButton.args = {};\\n\\nWithButton.parameters = {\\n argActions: {\\n title: (title, component) => {\\n component.tag('Button.Tooltip').title = title;\\n },\\n delayVisible: (delayVisible, component) => {\\n component.tag('Button.Tooltip').delayVisible = delayVisible;\\n },\\n timeVisible: (timeVisible, component) => {\\n component.tag('Button.Tooltip').timeVisible = timeVisible;\\n }\\n }\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"long-title\":{\"startLoc\":{\"col\":21,\"line\":72},\"endLoc\":{\"col\":3,\"line\":84},\"startBody\":{\"col\":21,\"line\":72},\"endBody\":{\"col\":3,\"line\":84}},\"with-button\":{\"startLoc\":{\"col\":26,\"line\":96},\"endLoc\":{\"col\":3,\"line\":119},\"startBody\":{\"col\":26,\"line\":96},\"endBody\":{\"col\":3,\"line\":119}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst sharedArgActions = {\n argActions: {\n delayVisible: (delayVisible, component) => {\n component.tag('Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Tooltip').timeVisible = timeVisible;\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Tooltip: {\n type: TooltipComponent,\n x: 1280 / 2,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n };\n }\n };;\n\nBasic.parameters = { ...sharedArgActions };\n\nexport const LongTitle = Basic.bind({});;\nLongTitle.args = {\n title:\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\n};\n\nLongTitle.parameters = { ...sharedArgActions };\n\nexport const WithButton = args =>\n class WithButton extends lng.Component {\n static _template() {\n return {\n Button: {\n type: class extends Button {\n _getFocused() {\n return this.childList.getByRef('Tooltip');\n }\n },\n x: 200,\n y: 100,\n title: 'Button',\n backgroundType: 'stroke',\n Tooltip: {\n type: TooltipComponent,\n title: args.title,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n }\n };\n }\n };\n\nWithButton.args = {};\n\nWithButton.parameters = {\n argActions: {\n title: (title, component) => {\n component.tag('Button.Tooltip').title = title;\n },\n delayVisible: (delayVisible, component) => {\n component.tag('Button.Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Button.Tooltip').timeVisible = timeVisible;\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -60992,7 +60940,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 Button from '../Button';\nimport { createModeControl } from '../../docs/utils';\nimport mdx from './Tooltip.mdx';\nimport { default as TooltipComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Tooltip`,\n args: {\n title: 'Tooltip',\n delayVisible: 0,\n timeVisible: 0,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Text content of tooltip',\n table: { defaultValue: { summary: 'undefined' } }\n },\n delayVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n },\n timeVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgActions = {\n argActions: {\n delayVisible: (delayVisible, component) => {\n component.tag('Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Tooltip').timeVisible = timeVisible;\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Tooltip: {\n type: TooltipComponent,\n x: 1280 / 2,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n };\n }\n };\n\nBasic.parameters = { ...sharedArgActions };\n\nexport const LongTitle = Basic.bind({});\nLongTitle.args = {\n title:\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\n};\n\nLongTitle.parameters = { ...sharedArgActions };\n\nexport const WithButton = args =>\n class WithButton extends lng.Component {\n static _template() {\n return {\n Button: {\n type: class extends Button {\n _getFocused() {\n return this.childList.getByRef('Tooltip');\n }\n },\n x: 200,\n y: 100,\n title: 'Button',\n backgroundType: 'stroke',\n Tooltip: {\n type: TooltipComponent,\n title: args.title,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n }\n };\n }\n };\n\nWithButton.args = {};\n\nWithButton.parameters = {\n argActions: {\n title: (title, component) => {\n component.tag('Button.Tooltip').title = title;\n },\n delayVisible: (delayVisible, component) => {\n component.tag('Button.Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Button.Tooltip').timeVisible = timeVisible;\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 Button from '../Button';\nimport { createModeControl } from '../../docs/utils';\nimport mdx from './Tooltip.mdx';\nimport { default as TooltipComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Tooltip`,\n args: {\n title: 'Tooltip',\n delayVisible: 0,\n timeVisible: 0,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Text content of tooltip',\n table: { defaultValue: { summary: 'undefined' } }\n },\n delayVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n },\n timeVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgActions = {\n argActions: {\n delayVisible: (delayVisible, component) => {\n component.tag('Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Tooltip').timeVisible = timeVisible;\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Tooltip: {\n type: TooltipComponent,\n x: 1280 / 2,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n };\n }\n };\n\nBasic.parameters = { ...sharedArgActions };\n\nexport const LongTitle = Basic.bind({});\nLongTitle.args = {\n title:\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\n};\n\nLongTitle.parameters = { ...sharedArgActions };\n\nexport const WithButton = args =>\n class WithButton extends lng.Component {\n static _template() {\n return {\n Button: {\n type: class extends Button {\n _getFocused() {\n return this.childList.getByRef('Tooltip');\n }\n },\n x: 200,\n y: 100,\n title: 'Button',\n backgroundType: 'stroke',\n Tooltip: {\n type: TooltipComponent,\n title: args.title,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n }\n };\n }\n };\n\nWithButton.args = {};\n\nWithButton.parameters = {\n argActions: {\n title: (title, component) => {\n component.tag('Button.Tooltip').title = title;\n },\n delayVisible: (delayVisible, component) => {\n component.tag('Button.Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Button.Tooltip').timeVisible = timeVisible;\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -61076,7 +61024,7 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var Tooltip_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/Tooltip", + title: constants["a" /* CATEGORIES */][8] + "/Tooltip", args: { title: 'Tooltip', delayVisible: 0, @@ -61117,7 +61065,7 @@ var __LOCATIONS_MAP__ = { }), 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 Button from '../Button';\nimport { createModeControl } from '../../docs/utils';\nimport mdx from './Tooltip.mdx';\nimport { default as TooltipComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/Tooltip`,\n args: {\n title: 'Tooltip',\n delayVisible: 0,\n timeVisible: 0,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Text content of tooltip',\n table: { defaultValue: { summary: 'undefined' } }\n },\n delayVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n },\n timeVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgActions = {\n argActions: {\n delayVisible: (delayVisible, component) => {\n component.tag('Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Tooltip').timeVisible = timeVisible;\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Tooltip: {\n type: TooltipComponent,\n x: 1280 / 2,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n };\n }\n };\n\nBasic.parameters = { ...sharedArgActions };\n\nexport const LongTitle = Basic.bind({});\nLongTitle.args = {\n title:\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\n};\n\nLongTitle.parameters = { ...sharedArgActions };\n\nexport const WithButton = args =>\n class WithButton extends lng.Component {\n static _template() {\n return {\n Button: {\n type: class extends Button {\n _getFocused() {\n return this.childList.getByRef('Tooltip');\n }\n },\n x: 200,\n y: 100,\n title: 'Button',\n backgroundType: 'stroke',\n Tooltip: {\n type: TooltipComponent,\n title: args.title,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n }\n };\n }\n };\n\nWithButton.args = {};\n\nWithButton.parameters = {\n argActions: {\n title: (title, component) => {\n component.tag('Button.Tooltip').title = title;\n },\n delayVisible: (delayVisible, component) => {\n component.tag('Button.Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Button.Tooltip').timeVisible = timeVisible;\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 Button from '../Button';\nimport { createModeControl } from '../../docs/utils';\nimport mdx from './Tooltip.mdx';\nimport { default as TooltipComponent } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[8]}/Tooltip`,\n args: {\n title: 'Tooltip',\n delayVisible: 0,\n timeVisible: 0,\n mode: 'focused'\n },\n argTypes: {\n ...createModeControl({ options: ['focused'], summaryValue: 'focused' }),\n title: {\n control: 'text',\n description: 'Text content of tooltip',\n table: { defaultValue: { summary: 'undefined' } }\n },\n delayVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the delay value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n },\n timeVisible: {\n control: 'number',\n description:\n 'Start with unfocused mode and set the time value in milliseconds, now change the mode to focused to see the required changes',\n table: { defaultValue: { summary: 'undefined' } }\n }\n },\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst sharedArgActions = {\n argActions: {\n delayVisible: (delayVisible, component) => {\n component.tag('Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Tooltip').timeVisible = timeVisible;\n }\n }\n};\n\nexport const Basic = args =>\n class Basic extends lng.Component {\n static _template() {\n return {\n Tooltip: {\n type: TooltipComponent,\n x: 1280 / 2,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n };\n }\n };\n\nBasic.parameters = { ...sharedArgActions };\n\nexport const LongTitle = Basic.bind({});\nLongTitle.args = {\n title:\n 'This is a long message. Text will remain on a single line and does not have a maximum width'\n};\n\nLongTitle.parameters = { ...sharedArgActions };\n\nexport const WithButton = args =>\n class WithButton extends lng.Component {\n static _template() {\n return {\n Button: {\n type: class extends Button {\n _getFocused() {\n return this.childList.getByRef('Tooltip');\n }\n },\n x: 200,\n y: 100,\n title: 'Button',\n backgroundType: 'stroke',\n Tooltip: {\n type: TooltipComponent,\n title: args.title,\n delayVisible: args.delayVisible,\n timeVisible: args.timeVisible\n }\n }\n };\n }\n };\n\nWithButton.args = {};\n\nWithButton.parameters = {\n argActions: {\n title: (title, component) => {\n component.tag('Button.Tooltip').title = title;\n },\n delayVisible: (delayVisible, component) => {\n component.tag('Button.Tooltip').delayVisible = delayVisible;\n },\n timeVisible: (timeVisible, component) => {\n component.tag('Button.Tooltip').timeVisible = timeVisible;\n }\n }\n};\n", "locationsMap": { "basic": { "startLoc": { @@ -62309,11 +62257,11 @@ var esm = __webpack_require__("../../../node_modules/@mdx-js/react/dist/esm.js") var dist_esm = __webpack_require__("../../../node_modules/@storybook/addon-docs/dist/esm/index.js"); // CONCATENATED MODULE: ./scripts/themePropertyTables/radius.md -/* harmony default export */ var radius = ("radius Value | Components \n--------|-------- \nmd | [Artwork](../?path=/docs/foundations-artwork--artwork)
[CardContent](../?path=/docs/tiles-cards-cardcontent--card-content)
[Card](../?path=/docs/tiles-cards-card--card)
[Keyboard](../?path=/docs/keyboard-keyboard--keyboard)
[Label](../?path=/docs/metadata-label--label)
[Shadow](../?path=/docs/foundations-shadow--shadow)
[Surface](../?path=/docs/foundations-surface--surface)
[Tile](../?path=/docs/tiles-cards-tile--tile)
[ToggleSmall](../?path=/docs/utilities-toggle--toggle)
[Toggle](../?path=/docs/utilities-toggle--toggle)
[Tooltip](../?path=/docs/utilities-tooltip--basic)\nsm | [Badge](../?path=/docs/metadata-badge--text)
[ListItem](../?path=/docs/controls-listitem--list-item)
[Provider](../?path=/docs/utilities-provider--provider)
[ToggleSmall](../?path=/docs/utilities-toggle--toggle)
[Toggle](../?path=/docs/utilities-toggle--toggle)\nnone | [Gradient](../?path=/docs/foundations-gradient--gradient)
[Label](../?path=/docs/metadata-label--label)\nxs | [ProgressBar](../?path=/docs/utilities-progressbar--progress-bar)
[Toggle](../?path=/docs/utilities-toggle--toggle)\nxl | [Tab](../?path=/docs/layout-tabbar--basic)\nlg | No components are using this value\n"); +/* harmony default export */ var radius = ("radius Value | Components \n--------|-------- \nmd | [Artwork](../?path=/docs/components-artwork--artwork)
[CardContent](../?path=/docs/components-cardcontent--card-content)
[Card](../?path=/docs/components-card--card)
[Keyboard](../?path=/docs/components-keyboard--keyboard)
[Label](../?path=/docs/components-label--label)
[Shadow](../?path=/docs/components-shadow--shadow)
[Surface](../?path=/docs/components-surface--surface)
[Tile](../?path=/docs/components-tile--tile)
[ToggleSmall](../?path=/docs/components-toggle--toggle)
[Toggle](../?path=/docs/components-toggle--toggle)
[Tooltip](../?path=/docs/components-tooltip--basic)\nsm | [Badge](../?path=/docs/components-badge--text)
[ListItem](../?path=/docs/components-listitem--list-item)
[Provider](../?path=/docs/components-provider--provider)
[ToggleSmall](../?path=/docs/components-toggle--toggle)
[Toggle](../?path=/docs/components-toggle--toggle)\nnone | [Gradient](../?path=/docs/components-gradient--gradient)
[Label](../?path=/docs/components-label--label)\nxs | [ProgressBar](../?path=/docs/components-progressbar--progress-bar)
[Toggle](../?path=/docs/components-toggle--toggle)\nxl | [Tab](../?path=/docs/components-tabbar--basic)\nlg | No components are using this value\n"); // CONCATENATED MODULE: ./scripts/themePropertyTables/color.md -/* harmony default export */ var color = ("color Value | Components | Role \n--------|--------|--------\noverlay | [Artwork](../?path=/docs/foundations-artwork--artwork)|More info coming\nmaterial | [Artwork](../?path=/docs/foundations-artwork--artwork)
[Gradient](../?path=/docs/foundations-gradient--gradient)|Default page background\nfillInverseSecondary | [Badge](../?path=/docs/metadata-badge--text)
[Provider](../?path=/docs/utilities-provider--provider)|More info coming\nfillNeutral | [Badge](../?path=/docs/metadata-badge--text)
[Button](../?path=/docs/controls-button--button)
[Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Gradient](../?path=/docs/foundations-gradient--gradient)
[Icon](../?path=/docs/foundations-icon--png)
[Label](../?path=/docs/metadata-label--label)
[ListItemPicker](../?path=/docs/controls-listitem--list-item)
[NestedSlider](../?path=/docs/controls-listitem--list-item)
[ProgressBar](../?path=/docs/utilities-progressbar--progress-bar)
[Radio](../?path=/docs/utilities-radio--radio)
[Slider](../?path=/docs/utilities-slider--basic)
[Tab](../?path=/docs/layout-tabbar--basic)
[Toggle](../?path=/docs/utilities-toggle--toggle)
[Tooltip](../?path=/docs/utilities-tooltip--basic)|More info coming\ntextNeutral | [Badge](../?path=/docs/metadata-badge--text)
[Button](../?path=/docs/controls-button--button)
[CardRadio](../?path=/docs/tiles-cards-card--card)
[CardTitle](../?path=/docs/tiles-cards-card--card)
[Card](../?path=/docs/tiles-cards-card--card)
[Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[GridOverlay](../?path=/docs/foundations-gridoverlay--grid-overlay)
[Input](../?path=/docs/keyboard-input--input)
[Label](../?path=/docs/metadata-label--label)
[ListItem](../?path=/docs/controls-listitem--list-item)
[MetadataBase](../?path=/docs/metadata-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/metadata-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/metadata-metadatatile--metadata-tile)
[Tab](../?path=/docs/layout-tabbar--basic)
[TitleRow](../?path=/docs/navigation-titlerow--title-row)
[Tooltip](../?path=/docs/utilities-tooltip--basic)|More info coming\nfillNeutralSecondary | [Badge](../?path=/docs/metadata-badge--text)
[Provider](../?path=/docs/utilities-provider--provider)|More info coming\nfillInverse | [Badge](../?path=/docs/metadata-badge--text)
[Button](../?path=/docs/controls-button--button)
[Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Icon](../?path=/docs/foundations-icon--png)
[Label](../?path=/docs/metadata-label--label)
[ListItemPicker](../?path=/docs/controls-listitem--list-item)
[NestedSlider](../?path=/docs/controls-listitem--list-item)
[ProgressBar](../?path=/docs/utilities-progressbar--progress-bar)
[Radio](../?path=/docs/utilities-radio--radio)
[Slider](../?path=/docs/utilities-slider--basic)
[Tab](../?path=/docs/layout-tabbar--basic)
[Toggle](../?path=/docs/utilities-toggle--toggle)
[Tooltip](../?path=/docs/utilities-tooltip--basic)|More info coming\ntextInverse | [Badge](../?path=/docs/metadata-badge--text)
[Button](../?path=/docs/controls-button--button)
[Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Input](../?path=/docs/keyboard-input--input)
[Label](../?path=/docs/metadata-label--label)
[ListItem](../?path=/docs/controls-listitem--list-item)
[MetadataBase](../?path=/docs/metadata-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/metadata-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/metadata-metadatatile--metadata-tile)
[Tab](../?path=/docs/layout-tabbar--basic)
[TitleRow](../?path=/docs/navigation-titlerow--title-row)
[Tooltip](../?path=/docs/utilities-tooltip--basic)|More info coming\nfillBrand | [Badge](../?path=/docs/metadata-badge--text)
[Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Gradient](../?path=/docs/foundations-gradient--gradient)
[Icon](../?path=/docs/foundations-icon--png)
[Label](../?path=/docs/metadata-label--label)
[NestedSlider](../?path=/docs/controls-listitem--list-item)
[ProgressBar](../?path=/docs/utilities-progressbar--progress-bar)
[Radio](../?path=/docs/utilities-radio--radio)
[Toggle](../?path=/docs/utilities-toggle--toggle)
[Tooltip](../?path=/docs/utilities-tooltip--basic)|More info coming\ntextNeutralDisabled | [Button](../?path=/docs/controls-button--button)
[CardRadio](../?path=/docs/tiles-cards-card--card)
[CardTitle](../?path=/docs/tiles-cards-card--card)
[Card](../?path=/docs/tiles-cards-card--card)
[Input](../?path=/docs/keyboard-input--input)
[ListItemSlider](../?path=/docs/controls-listitem--list-item)
[ListItem](../?path=/docs/controls-listitem--list-item)
[MetadataBase](../?path=/docs/metadata-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/metadata-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/metadata-metadatatile--metadata-tile)
[Tab](../?path=/docs/layout-tabbar--basic)|More info coming\nfillNeutralDisabled | [Button](../?path=/docs/controls-button--button)
[Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Knob](../?path=/docs/utilities-knob--knob)
[Radio](../?path=/docs/utilities-radio--radio)
[Surface](../?path=/docs/foundations-surface--surface)
[Tab](../?path=/docs/layout-tabbar--basic)
[Toggle](../?path=/docs/utilities-toggle--toggle)|More info coming\ninteractiveNeutralFocusSoft | [Card](../?path=/docs/tiles-cards-card--card)
[Tab](../?path=/docs/layout-tabbar--basic)
[Tile](../?path=/docs/tiles-cards-tile--tile)|More info coming\ninteractiveInverseFocusSoft | [Card](../?path=/docs/tiles-cards-card--card)
[Tile](../?path=/docs/tiles-cards-tile--tile)|More info coming\ninteractiveBrandFocusSoft | [Card](../?path=/docs/tiles-cards-card--card)
[Tile](../?path=/docs/tiles-cards-tile--tile)|More info coming\ntextNeutralSecondary | [CardRadio](../?path=/docs/tiles-cards-card--card)
[CardTitle](../?path=/docs/tiles-cards-card--card)
[Input](../?path=/docs/keyboard-input--input)
[ListItemSlider](../?path=/docs/controls-listitem--list-item)
[ListItem](../?path=/docs/controls-listitem--list-item)
[MetadataBase](../?path=/docs/metadata-metadatabase--metadata-base)
[MetadataTile](../?path=/docs/metadata-metadatatile--metadata-tile)|More info coming\nstrokeInverse | [Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Radio](../?path=/docs/utilities-radio--radio)|More info coming\nstrokeNeutral | [Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Radio](../?path=/docs/utilities-radio--radio)|More info coming\nfillInverseDisabled | [Checkbox](../?path=/docs/utilities-checkbox--checkbox)
[Knob](../?path=/docs/utilities-knob--knob)
[Radio](../?path=/docs/utilities-radio--radio)
[Toggle](../?path=/docs/utilities-toggle--toggle)|More info coming\nfillTransparent | [Gradient](../?path=/docs/foundations-gradient--gradient)
[Tab](../?path=/docs/layout-tabbar--basic)|More info coming\ninteractiveNeutralFocus | [Knob](../?path=/docs/utilities-knob--knob)
[Slider](../?path=/docs/utilities-slider--basic)
[Surface](../?path=/docs/foundations-surface--surface)
[Tab](../?path=/docs/layout-tabbar--basic)|More info coming\ninteractiveInverseFocus | [Knob](../?path=/docs/utilities-knob--knob)
[Slider](../?path=/docs/utilities-slider--basic)
[Surface](../?path=/docs/foundations-surface--surface)|More info coming\ninteractiveBrandFocus | [Knob](../?path=/docs/utilities-knob--knob)|More info coming\ntextInverseSecondary | [ListItemSlider](../?path=/docs/controls-listitem--list-item)
[ListItem](../?path=/docs/controls-listitem--list-item)
[MetadataBase](../?path=/docs/metadata-metadatabase--metadata-base)
[MetadataTile](../?path=/docs/metadata-metadatatile--metadata-tile)|More info coming\nfillInverseTertiary | [NestedSlider](../?path=/docs/controls-listitem--list-item)
[ProgressBar](../?path=/docs/utilities-progressbar--progress-bar)|More info coming\nfillNeutralTertiary | [NestedSlider](../?path=/docs/controls-listitem--list-item)
[ProgressBar](../?path=/docs/utilities-progressbar--progress-bar)
[Surface](../?path=/docs/foundations-surface--surface)|More info coming\nfillBrandTertiary | [NestedSlider](../?path=/docs/controls-listitem--list-item)|More info coming\nshadowNeutralFocus | [Shadow](../?path=/docs/foundations-shadow--shadow)|More info coming\nshadowInverseFocus | [Shadow](../?path=/docs/foundations-shadow--shadow)|More info coming\nshadowBrandFocus | [Shadow](../?path=/docs/foundations-shadow--shadow)|More info coming\nwhite | No components are using this value |More info coming\nblack | No components are using this value |More info coming\ngrey | No components are using this value |More info coming\nred | No components are using this value |More info coming\norange | No components are using this value |More info coming\nyellow | No components are using this value |More info coming\ngreen | No components are using this value |More info coming\nblue | No components are using this value |More info coming\npurple | No components are using this value |More info coming\npalette | No components are using this value |More info coming\nmaterialBrand | No components are using this value |Branded page background\ntextNeutralTertiary | No components are using this value |More info coming\ntextInverseTertiary | No components are using this value |More info coming\ntextInverseDisabled | No components are using this value |More info coming\ntextBrand | No components are using this value |More info coming\ntextBrandSecondary | No components are using this value |More info coming\ntextBrandTertiary | No components are using this value |More info coming\ntextBrandDisabled | No components are using this value |More info coming\ntextPositive | No components are using this value |More info coming\ntextNegative | No components are using this value |More info coming\ntextInfo | No components are using this value |More info coming\ntextCaution | No components are using this value |More info coming\nfillBrandSecondary | No components are using this value |More info coming\nfillBrandDisabled | No components are using this value |More info coming\nfillPositive | No components are using this value |More info coming\nfillNegative | No components are using this value |More info coming\nfillInfo | No components are using this value |More info coming\nfillCaution | No components are using this value |More info coming\nstrokeNeutralSecondary | No components are using this value |More info coming\nstrokeNeutralTertiary | No components are using this value |More info coming\nstrokeNeutralDisabled | No components are using this value |More info coming\nstrokeInverseSecondary | No components are using this value |More info coming\nstrokeInverseTertiary | No components are using this value |More info coming\nstrokeInverseDisabled | No components are using this value |More info coming\nstrokeBrand | No components are using this value |More info coming\nstrokeBrandSecondary | No components are using this value |More info coming\nstrokeBrandTertiary | No components are using this value |More info coming\nstrokeBrandDisabled | No components are using this value |More info coming\nstrokePositive | No components are using this value |More info coming\nstrokeNegative | No components are using this value |More info coming\nstrokeInfo | No components are using this value |More info coming\nstrokeCaution | No components are using this value |More info coming\nshadowNeutralFocusSoft | No components are using this value |More info coming\nshadowInverseFocusSoft | No components are using this value |More info coming\nshadowBrandFocusSoft | No components are using this value |More info coming\n"); +/* harmony default export */ var color = ("color Value | Components | Role \n--------|--------|--------\noverlay | [Artwork](../?path=/docs/components-artwork--artwork)|More info coming\nmaterial | [Artwork](../?path=/docs/components-artwork--artwork)
[Gradient](../?path=/docs/components-gradient--gradient)|Default page background\nfillInverseSecondary | [Badge](../?path=/docs/components-badge--text)
[Provider](../?path=/docs/components-provider--provider)|More info coming\ntextNeutral | [Badge](../?path=/docs/components-badge--text)
[Button](../?path=/docs/components-button--button)
[CardRadio](../?path=/docs/components-card--card)
[CardTitle](../?path=/docs/components-card--card)
[Card](../?path=/docs/components-card--card)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[GridOverlay](../?path=/docs/components-gridoverlay--grid-overlay)
[Input](../?path=/docs/components-input--input)
[Label](../?path=/docs/components-label--label)
[ListItem](../?path=/docs/components-listitem--list-item)
[MetadataBase](../?path=/docs/components-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/components-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/components-metadatatile--metadata-tile)
[Tab](../?path=/docs/components-tabbar--basic)
[TitleRow](../?path=/docs/components-titlerow--title-row)
[Tooltip](../?path=/docs/components-tooltip--basic)|More info coming\nstrokeNeutral | [Badge](../?path=/docs/components-badge--text)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[Radio](../?path=/docs/components-radio--radio)|More info coming\nfillNeutralSecondary | [Badge](../?path=/docs/components-badge--text)
[Provider](../?path=/docs/components-provider--provider)|More info coming\ntextInverse | [Badge](../?path=/docs/components-badge--text)
[Button](../?path=/docs/components-button--button)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[Input](../?path=/docs/components-input--input)
[Label](../?path=/docs/components-label--label)
[ListItem](../?path=/docs/components-listitem--list-item)
[MetadataBase](../?path=/docs/components-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/components-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/components-metadatatile--metadata-tile)
[Tab](../?path=/docs/components-tabbar--basic)
[TitleRow](../?path=/docs/components-titlerow--title-row)
[Tooltip](../?path=/docs/components-tooltip--basic)|More info coming\nstrokeInverse | [Badge](../?path=/docs/components-badge--text)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[Radio](../?path=/docs/components-radio--radio)|More info coming\nfillBrand | [Badge](../?path=/docs/components-badge--text)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[Gradient](../?path=/docs/components-gradient--gradient)
[Icon](../?path=/docs/components-icon--png)
[Label](../?path=/docs/components-label--label)
[NestedSlider](../?path=/docs/components-listitem--list-item)
[ProgressBar](../?path=/docs/components-progressbar--progress-bar)
[Radio](../?path=/docs/components-radio--radio)
[Toggle](../?path=/docs/components-toggle--toggle)
[Tooltip](../?path=/docs/components-tooltip--basic)|More info coming\nfillNeutral | [Button](../?path=/docs/components-button--button)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[Gradient](../?path=/docs/components-gradient--gradient)
[Icon](../?path=/docs/components-icon--png)
[Label](../?path=/docs/components-label--label)
[ListItemPicker](../?path=/docs/components-listitem--list-item)
[NestedSlider](../?path=/docs/components-listitem--list-item)
[ProgressBar](../?path=/docs/components-progressbar--progress-bar)
[Radio](../?path=/docs/components-radio--radio)
[Slider](../?path=/docs/components-slider--basic)
[Tab](../?path=/docs/components-tabbar--basic)
[Toggle](../?path=/docs/components-toggle--toggle)
[Tooltip](../?path=/docs/components-tooltip--basic)|More info coming\nfillInverse | [Button](../?path=/docs/components-button--button)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[Icon](../?path=/docs/components-icon--png)
[Label](../?path=/docs/components-label--label)
[ListItemPicker](../?path=/docs/components-listitem--list-item)
[NestedSlider](../?path=/docs/components-listitem--list-item)
[ProgressBar](../?path=/docs/components-progressbar--progress-bar)
[Radio](../?path=/docs/components-radio--radio)
[Slider](../?path=/docs/components-slider--basic)
[Tab](../?path=/docs/components-tabbar--basic)
[Toggle](../?path=/docs/components-toggle--toggle)
[Tooltip](../?path=/docs/components-tooltip--basic)|More info coming\ntextNeutralDisabled | [Button](../?path=/docs/components-button--button)
[CardRadio](../?path=/docs/components-card--card)
[CardTitle](../?path=/docs/components-card--card)
[Card](../?path=/docs/components-card--card)
[Input](../?path=/docs/components-input--input)
[ListItemSlider](../?path=/docs/components-listitem--list-item)
[ListItem](../?path=/docs/components-listitem--list-item)
[MetadataBase](../?path=/docs/components-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/components-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/components-metadatatile--metadata-tile)
[Tab](../?path=/docs/components-tabbar--basic)|More info coming\nfillNeutralDisabled | [Button](../?path=/docs/components-button--button)
[Checkbox](../?path=/docs/components-checkbox--checkbox)
[Knob](../?path=/docs/components-knob--knob)
[Radio](../?path=/docs/components-radio--radio)
[Surface](../?path=/docs/components-surface--surface)
[Tab](../?path=/docs/components-tabbar--basic)
[Toggle](../?path=/docs/components-toggle--toggle)|More info coming\ninteractiveNeutralFocusSoft | [Card](../?path=/docs/components-card--card)
[Tab](../?path=/docs/components-tabbar--basic)
[Tile](../?path=/docs/components-tile--tile)|More info coming\ninteractiveInverseFocusSoft | [Card](../?path=/docs/components-card--card)
[Tile](../?path=/docs/components-tile--tile)|More info coming\ninteractiveBrandFocusSoft | [Card](../?path=/docs/components-card--card)
[Tile](../?path=/docs/components-tile--tile)|More info coming\ntextNeutralSecondary | [CardRadio](../?path=/docs/components-card--card)
[CardTitle](../?path=/docs/components-card--card)
[Input](../?path=/docs/components-input--input)
[ListItemSlider](../?path=/docs/components-listitem--list-item)
[ListItem](../?path=/docs/components-listitem--list-item)
[MetadataBase](../?path=/docs/components-metadatabase--metadata-base)
[MetadataTile](../?path=/docs/components-metadatatile--metadata-tile)|More info coming\nfillInverseDisabled | [Checkbox](../?path=/docs/components-checkbox--checkbox)
[Knob](../?path=/docs/components-knob--knob)
[Radio](../?path=/docs/components-radio--radio)
[Toggle](../?path=/docs/components-toggle--toggle)|More info coming\nfillTransparent | [Gradient](../?path=/docs/components-gradient--gradient)
[Tab](../?path=/docs/components-tabbar--basic)|More info coming\ninteractiveNeutralFocus | [Knob](../?path=/docs/components-knob--knob)
[Slider](../?path=/docs/components-slider--basic)
[Surface](../?path=/docs/components-surface--surface)
[Tab](../?path=/docs/components-tabbar--basic)|More info coming\ninteractiveInverseFocus | [Knob](../?path=/docs/components-knob--knob)
[Slider](../?path=/docs/components-slider--basic)
[Surface](../?path=/docs/components-surface--surface)|More info coming\ninteractiveBrandFocus | [Knob](../?path=/docs/components-knob--knob)|More info coming\ntextInverseSecondary | [ListItemSlider](../?path=/docs/components-listitem--list-item)
[ListItem](../?path=/docs/components-listitem--list-item)
[MetadataBase](../?path=/docs/components-metadatabase--metadata-base)
[MetadataTile](../?path=/docs/components-metadatatile--metadata-tile)|More info coming\nfillInverseTertiary | [NestedSlider](../?path=/docs/components-listitem--list-item)
[ProgressBar](../?path=/docs/components-progressbar--progress-bar)|More info coming\nfillNeutralTertiary | [NestedSlider](../?path=/docs/components-listitem--list-item)
[ProgressBar](../?path=/docs/components-progressbar--progress-bar)
[Surface](../?path=/docs/components-surface--surface)|More info coming\nfillBrandTertiary | [NestedSlider](../?path=/docs/components-listitem--list-item)|More info coming\nshadowNeutralFocus | [Shadow](../?path=/docs/components-shadow--shadow)|More info coming\nshadowInverseFocus | [Shadow](../?path=/docs/components-shadow--shadow)|More info coming\nshadowBrandFocus | [Shadow](../?path=/docs/components-shadow--shadow)|More info coming\nwhite | No components are using this value |More info coming\nblack | No components are using this value |More info coming\ngrey | No components are using this value |More info coming\nred | No components are using this value |More info coming\norange | No components are using this value |More info coming\nyellow | No components are using this value |More info coming\ngreen | No components are using this value |More info coming\nblue | No components are using this value |More info coming\npurple | No components are using this value |More info coming\npalette | No components are using this value |More info coming\nmaterialBrand | No components are using this value |Branded page background\ntextNeutralTertiary | No components are using this value |More info coming\ntextInverseTertiary | No components are using this value |More info coming\ntextInverseDisabled | No components are using this value |More info coming\ntextBrand | No components are using this value |More info coming\ntextBrandSecondary | No components are using this value |More info coming\ntextBrandTertiary | No components are using this value |More info coming\ntextBrandDisabled | No components are using this value |More info coming\ntextPositive | No components are using this value |More info coming\ntextNegative | No components are using this value |More info coming\ntextInfo | No components are using this value |More info coming\ntextCaution | No components are using this value |More info coming\nfillBrandSecondary | No components are using this value |More info coming\nfillBrandDisabled | No components are using this value |More info coming\nfillPositive | No components are using this value |More info coming\nfillNegative | No components are using this value |More info coming\nfillInfo | No components are using this value |More info coming\nfillCaution | No components are using this value |More info coming\nstrokeNeutralSecondary | No components are using this value |More info coming\nstrokeNeutralTertiary | No components are using this value |More info coming\nstrokeNeutralDisabled | No components are using this value |More info coming\nstrokeInverseSecondary | No components are using this value |More info coming\nstrokeInverseTertiary | No components are using this value |More info coming\nstrokeInverseDisabled | No components are using this value |More info coming\nstrokeBrand | No components are using this value |More info coming\nstrokeBrandSecondary | No components are using this value |More info coming\nstrokeBrandTertiary | No components are using this value |More info coming\nstrokeBrandDisabled | No components are using this value |More info coming\nstrokePositive | No components are using this value |More info coming\nstrokeNegative | No components are using this value |More info coming\nstrokeInfo | No components are using this value |More info coming\nstrokeCaution | No components are using this value |More info coming\nshadowNeutralFocusSoft | No components are using this value |More info coming\nshadowInverseFocusSoft | No components are using this value |More info coming\nshadowBrandFocusSoft | No components are using this value |More info coming\n"); // CONCATENATED MODULE: ./scripts/themePropertyTables/typography.md -/* harmony default export */ var typography = ("typography Value | Components | Role \n--------|--------|--------\ncaption1 | [Badge](../?path=/docs/metadata-badge--text)
[Input](../?path=/docs/keyboard-input--input)
[Label](../?path=/docs/metadata-label--label)
[Tooltip](../?path=/docs/utilities-tooltip--basic)|Caption 1 should be used for text within a badge and helper text strings. It should not be used for any long bodies of text due to its size.\nbutton1 | [Button](../?path=/docs/controls-button--button)|Button 1 should only be used within the standard button component.\nbutton2 | [ButtonSmall](../?path=/docs/controls-button--button)
[ControlSmall](../?path=/docs/controls-control--control)|Button 2 should only be used within the small button component.\nheadline1 | [Card](../?path=/docs/tiles-cards-card--card)
[GridOverlay](../?path=/docs/foundations-gridoverlay--grid-overlay)
[TitleRow](../?path=/docs/navigation-titlerow--title-row)|Headline 1 is primarily used for row titles within the experience, both as a card and stand alone title.\nbody2 | [CardRadio](../?path=/docs/tiles-cards-card--card)
[CardTitle](../?path=/docs/tiles-cards-card--card)
[ScrollWrapper](../?path=/docs/layout-scrollwrapper--basic)|Body 2 can be used for secondary level metadata on cards like descriptions.\nbody3 | [CardRadio](../?path=/docs/tiles-cards-card--card)
[CardTitle](../?path=/docs/tiles-cards-card--card)
[ListItem](../?path=/docs/controls-listitem--list-item)
[MetadataBase](../?path=/docs/metadata-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/metadata-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/metadata-metadatatile--metadata-tile)|Body 3 can be used for tertiary level metadata on tiles and cards for text elements like details, ratings, runtime and air date.\nbody1 | [GridOverlay](../?path=/docs/foundations-gridoverlay--grid-overlay)
[InlineContent](../?path=/docs/text-inlinecontent--basic)
[Marquee](../?path=/docs/text-marquee--marquee)
[TextBox](../?path=/docs/text-textbox--basic)|Body 1 should be used for primary text areas like the synopsis on entity or within a hero browse pattern.\nheadline3 | [ListItemSlider](../?path=/docs/controls-listitem--list-item)
[ListItem](../?path=/docs/controls-listitem--list-item)
[MetadataTile](../?path=/docs/metadata-metadatatile--metadata-tile)
[Provider](../?path=/docs/utilities-provider--provider)
[Tab](../?path=/docs/layout-tabbar--basic)|Headline 3 should be used for titles within a tile, due to limited size headline 3 provides enough visible impact and text length affordance. Can also be used for tabs\ndisplay1 | No components are using this value |Display 1 is primarily used for program titles, examples being entity, hero browse and playback patterns.\ndisplay2 | No components are using this value |Display 2 is primarily used for page headers\nheadline2 | No components are using this value |Headline 2 is used for key text within the keyboard\ncallout1 | No components are using this value |Callout 1 can be used for headers within a card where it could be visible near a larger row header. This can be used for secondary headers for less emphasis\n"); +/* harmony default export */ var typography = ("typography Value | Components | Role \n--------|--------|--------\ncaption1 | [Badge](../?path=/docs/components-badge--text)
[Input](../?path=/docs/components-input--input)
[Label](../?path=/docs/components-label--label)
[Tooltip](../?path=/docs/components-tooltip--basic)|Caption 1 should be used for text within a badge and helper text strings. It should not be used for any long bodies of text due to its size.\nbutton1 | [Button](../?path=/docs/components-button--button)|Button 1 should only be used within the standard button component.\nbutton2 | [ButtonSmall](../?path=/docs/components-button--button)
[ControlSmall](../?path=/docs/components-control--control)|Button 2 should only be used within the small button component.\nheadline1 | [Card](../?path=/docs/components-card--card)
[GridOverlay](../?path=/docs/components-gridoverlay--grid-overlay)
[TitleRow](../?path=/docs/components-titlerow--title-row)|Headline 1 is primarily used for row titles within the experience, both as a card and stand alone title.\nbody2 | [CardRadio](../?path=/docs/components-card--card)
[CardTitle](../?path=/docs/components-card--card)
[ScrollWrapper](../?path=/docs/components-scrollwrapper--basic)|Body 2 can be used for secondary level metadata on cards like descriptions.\nbody3 | [CardRadio](../?path=/docs/components-card--card)
[CardTitle](../?path=/docs/components-card--card)
[ListItem](../?path=/docs/components-listitem--list-item)
[MetadataBase](../?path=/docs/components-metadatabase--metadata-base)
[MetadataCardContent](../?path=/docs/components-metadatacardcontent--metadata-card-content)
[MetadataTile](../?path=/docs/components-metadatatile--metadata-tile)|Body 3 can be used for tertiary level metadata on tiles and cards for text elements like details, ratings, runtime and air date.\nbody1 | [GridOverlay](../?path=/docs/components-gridoverlay--grid-overlay)
[InlineContent](../?path=/docs/components-inlinecontent--basic)
[Marquee](../?path=/docs/components-marquee--marquee)
[TextBox](../?path=/docs/components-textbox--basic)|Body 1 should be used for primary text areas like the synopsis on entity or within a hero browse pattern.\nheadline3 | [ListItemSlider](../?path=/docs/components-listitem--list-item)
[ListItem](../?path=/docs/components-listitem--list-item)
[MetadataTile](../?path=/docs/components-metadatatile--metadata-tile)
[Provider](../?path=/docs/components-provider--provider)
[Tab](../?path=/docs/components-tabbar--basic)|Headline 3 should be used for titles within a tile, due to limited size headline 3 provides enough visible impact and text length affordance. Can also be used for tabs\ndisplay1 | No components are using this value |Display 1 is primarily used for program titles, examples being entity, hero browse and playback patterns.\ndisplay2 | No components are using this value |Display 2 is primarily used for page headers\nheadline2 | No components are using this value |Headline 2 is used for key text within the keyboard\ncallout1 | No components are using this value |Callout 1 can be used for headers within a card where it could be visible near a larger row header. This can be used for secondary headers for less emphasis\n"); // CONCATENATED MODULE: /home/runner/work/Lightning-UI-Components/Lightning-UI-Components/packages/@lightningjs/ui-components/src/docs/ThemingAttributes.stories.mdx @@ -63785,7 +63733,7 @@ function MDXContent(_ref) { "id": "in-line-component-style-overrides" }, "In-line Component Style Overrides"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("p", null, "When utilizing components within your application, you can use ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("a", { parentName: "p", - "href": "path=/docs/utilities-withthemestyles--with-theme-styles" + "href": "?path=/docs/utilities-withthemestyles--with-theme-styles" }, "withThemeStyles"), " to override particular style values in just that use case. Those custom styles are deep-merged with the resulting object from the previous steps."), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("h2", { "id": "extensions" }, "Extensions"), Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("p", null, "Any extensions that target a component will be applied after the in-line component style overrides. This creates the final style object which will be referenced by the component via ", Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__[/* mdx */ "b"])("inlineCode", { @@ -64491,23 +64439,17 @@ componentMeta.parameters.docs = Object.assign({}, componentMeta.parameters.docs */ var CATEGORIES = { - 0: 'Accessibility', - 2: 'Controls', - 4: 'Foundations', - 8: 'Keyboard', - 16: 'Layout', - 32: 'Metadata', - 64: 'Navigation', - 128: 'Tiles & Cards', - 256: 'Text', - 512: 'Utilities', - 1024: 'Docs', - 2048: 'Collections' + 0: 'Docs', + 2: 'Collections', + 4: 'Utilities', + 8: 'Components', + 16: 'Patterns', + 32: 'Templates' }; /** Storybook config constants should go in this file */ -var storySortOrder = [CATEGORIES[1024], ['Introduction', 'Read Me', 'Base', 'Contributing', 'Lightning Resources', 'Theming', ['Overview', 'Component Config', 'Tones', 'Modes', 'Extensions', 'Subtheming', 'Use in Storybook', 'Theme Properties', '*'], 'Unit Testing', ['Overview', 'Test Renderer', 'Test Utils', ['makeCreateComponent', '*']]], CATEGORIES[2048], CATEGORIES[0], CATEGORIES[4], CATEGORIES[512], CATEGORIES[64], CATEGORIES[16], CATEGORIES[2], CATEGORIES[8], CATEGORIES[256], CATEGORIES[32], CATEGORIES[128]]; +var storySortOrder = [CATEGORIES[0], ['Introduction', 'Read Me', 'Base', 'Contributing', 'Lightning Resources', 'Theming', ['Overview', 'Component Config', 'Tones', 'Modes', 'Extensions', 'Subtheming', 'Use in Storybook', 'Theme Properties', '*'], 'Unit Testing', ['Overview', 'Test Renderer', 'Test Utils', ['makeCreateComponent', '*']]], CATEGORIES[2], CATEGORIES[4], CATEGORIES[8], CATEGORIES[16], CATEGORIES[32]]; var controlDescriptions = { collapseToMetadata: 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the image to metadata (when focused, it will always be expanded)', shouldCollapse: 'When in unfocused or disabled mode, if this flag is true metadata will collapse (when focused, it will always be expanded)', @@ -68242,7 +68184,7 @@ function MDXContent(_ref) { }, "const customAbbreviations = [{ pattern: 'PA', replacer: 'Pennsylvania' }];\nconst customAbbrevConfig = generateAbbrevConfig(customAbbreviations, true);\n\n// usage with withAnnouncer\nconst CustomComp = withAnnouncer(lng.Component, customSpeechImpl, {\n abbreviationsConfig: customAbbrevConfig\n});\n")), Object(esm["b" /* mdx */])(dist_esm["b" /* Canvas */], { mdxType: "Canvas" }, Object(esm["b" /* mdx */])(dist_esm["f" /* Story */], { - id: "accessibility-withannouncer--basic", + id: "utilities-withannouncer--basic", mdxType: "Story" })), Object(esm["b" /* mdx */])("h2", { "id": "api" @@ -68558,7 +68500,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 withAnnouncer, { defaultAbbrevConfig } from '.';\\nimport { Column, Row, Button } from '../../components';\\nimport mdx from './withAnnouncer.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[0]}/withAnnouncer`,\\n component: withAnnouncer,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst rows = [\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n }\\n];\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: rows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n };\\n\\nconst createRow = items => ({\\n type: Row,\\n w: 900,\\n h: 100,\\n itemSpacing: 30,\\n items\\n});\\nconst createButton = (title, announceContext) => ({\\n type: Button,\\n title,\\n announceContext\\n});\\n\\nconst abbrevRows = [\\n createRow([\\n createButton('TV-14', '1 of 9'),\\n createButton('(CC)', '2 of 9'),\\n createButton('HD', '3 of 9')\\n ]),\\n createRow([\\n createButton('ENG', '4 of 9'),\\n createButton('ENG+ES', '5 of 9'),\\n createButton('AD', '6 of 9')\\n ]),\\n createRow([\\n createButton('RT 95%', '7 of 9'),\\n createButton('S3E12', '8 of 9'),\\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\\n ])\\n];\\n\\nexport const WithDefaultAbbreviations = () => {\\n class WithAbbreviations extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 900,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: abbrevRows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n }\\n return WithAbbreviations;\\n};\\nWithDefaultAbbreviations.parameters = {\\n announcerOptions: {\\n abbreviations: defaultAbbrevConfig\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":95},\"endLoc\":{\"col\":3,\"line\":122},\"startBody\":{\"col\":21,\"line\":95},\"endBody\":{\"col\":3,\"line\":122}},\"WithDefaultAbbreviations\":{\"startLoc\":{\"col\":40,\"line\":155},\"endLoc\":{\"col\":1,\"line\":184},\"startBody\":{\"col\":40,\"line\":155},\"endBody\":{\"col\":1,\"line\":184}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport withAnnouncer, { defaultAbbrevConfig } from '.';\nimport { Column, Row, Button } from '../../components';\nimport mdx from './withAnnouncer.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[0]}/withAnnouncer`,\n component: withAnnouncer,\n 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 withAnnouncer, { defaultAbbrevConfig } from '.';\\nimport { Column, Row, Button } from '../../components';\\nimport mdx from './withAnnouncer.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[0]}/withAnnouncer`,\\n component: withAnnouncer,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst rows = [\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n }\\n];\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: rows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n };\\n\\nconst createRow = items => ({\\n type: Row,\\n w: 900,\\n h: 100,\\n itemSpacing: 30,\\n items\\n});\\nconst createButton = (title, announceContext) => ({\\n type: Button,\\n title,\\n announceContext\\n});\\n\\nconst abbrevRows = [\\n createRow([\\n createButton('TV-14', '1 of 9'),\\n createButton('(CC)', '2 of 9'),\\n createButton('HD', '3 of 9')\\n ]),\\n createRow([\\n createButton('ENG', '4 of 9'),\\n createButton('ENG+ES', '5 of 9'),\\n createButton('AD', '6 of 9')\\n ]),\\n createRow([\\n createButton('RT 95%', '7 of 9'),\\n createButton('S3E12', '8 of 9'),\\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\\n ])\\n];\\n\\nexport const WithDefaultAbbreviations = () => {\\n class WithAbbreviations extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 900,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: abbrevRows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n }\\n return WithAbbreviations;\\n};\\nWithDefaultAbbreviations.parameters = {\\n announcerOptions: {\\n abbreviations: defaultAbbrevConfig\\n }\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":95},\"endLoc\":{\"col\":3,\"line\":122},\"startBody\":{\"col\":21,\"line\":95},\"endBody\":{\"col\":3,\"line\":122}},\"with-default-abbreviations\":{\"startLoc\":{\"col\":40,\"line\":155},\"endLoc\":{\"col\":1,\"line\":184},\"startBody\":{\"col\":40,\"line\":155},\"endBody\":{\"col\":1,\"line\":184}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst rows = [\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n }\n];\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: rows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n };;\n\nconst createRow = items => ({\n type: Row,\n w: 900,\n h: 100,\n itemSpacing: 30,\n items\n});\nconst createButton = (title, announceContext) => ({\n type: Button,\n title,\n announceContext\n});\n\nconst abbrevRows = [\n createRow([\n createButton('TV-14', '1 of 9'),\n createButton('(CC)', '2 of 9'),\n createButton('HD', '3 of 9')\n ]),\n createRow([\n createButton('ENG', '4 of 9'),\n createButton('ENG+ES', '5 of 9'),\n createButton('AD', '6 of 9')\n ]),\n createRow([\n createButton('RT 95%', '7 of 9'),\n createButton('S3E12', '8 of 9'),\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\n ])\n];\n\nexport const WithDefaultAbbreviations = () => {\n class WithAbbreviations extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 900,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: abbrevRows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n }\n return WithAbbreviations;\n};\nWithDefaultAbbreviations.parameters = {\n announcerOptions: {\n abbreviations: defaultAbbrevConfig\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 withAnnouncer, { defaultAbbrevConfig } from '.';\\nimport { Column, Row, Button } from '../../components';\\nimport mdx from './withAnnouncer.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withAnnouncer`,\\n component: withAnnouncer,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst rows = [\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n }\\n];\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: rows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n };\\n\\nconst createRow = items => ({\\n type: Row,\\n w: 900,\\n h: 100,\\n itemSpacing: 30,\\n items\\n});\\nconst createButton = (title, announceContext) => ({\\n type: Button,\\n title,\\n announceContext\\n});\\n\\nconst abbrevRows = [\\n createRow([\\n createButton('TV-14', '1 of 9'),\\n createButton('(CC)', '2 of 9'),\\n createButton('HD', '3 of 9')\\n ]),\\n createRow([\\n createButton('ENG', '4 of 9'),\\n createButton('ENG+ES', '5 of 9'),\\n createButton('AD', '6 of 9')\\n ]),\\n createRow([\\n createButton('RT 95%', '7 of 9'),\\n createButton('S3E12', '8 of 9'),\\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\\n ])\\n];\\n\\nexport const WithDefaultAbbreviations = () => {\\n class WithAbbreviations extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 900,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: abbrevRows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n }\\n return WithAbbreviations;\\n};\\nWithDefaultAbbreviations.parameters = {\\n announcerOptions: {\\n abbreviations: defaultAbbrevConfig\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":95},\"endLoc\":{\"col\":3,\"line\":122},\"startBody\":{\"col\":21,\"line\":95},\"endBody\":{\"col\":3,\"line\":122}},\"WithDefaultAbbreviations\":{\"startLoc\":{\"col\":40,\"line\":155},\"endLoc\":{\"col\":1,\"line\":184},\"startBody\":{\"col\":40,\"line\":155},\"endBody\":{\"col\":1,\"line\":184}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport withAnnouncer, { defaultAbbrevConfig } from '.';\nimport { Column, Row, Button } from '../../components';\nimport mdx from './withAnnouncer.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withAnnouncer`,\n component: withAnnouncer,\n 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 withAnnouncer, { defaultAbbrevConfig } from '.';\\nimport { Column, Row, Button } from '../../components';\\nimport mdx from './withAnnouncer.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withAnnouncer`,\\n component: withAnnouncer,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nconst rows = [\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n },\\n {\\n type: Row,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 100,\\n itemSpacing: 30,\\n items: [\\n {\\n type: Button,\\n title: 'Button 1',\\n announceContext: '1 of 3'\\n },\\n {\\n type: Button,\\n title: 'Button 2',\\n announceContext: '2 of 3'\\n },\\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\\n ]\\n }\\n];\\n\\nexport const Basic = () =>\\n class Basic extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 1920 - 160, // x offset from preview.js * 2,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: rows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n };\\n\\nconst createRow = items => ({\\n type: Row,\\n w: 900,\\n h: 100,\\n itemSpacing: 30,\\n items\\n});\\nconst createButton = (title, announceContext) => ({\\n type: Button,\\n title,\\n announceContext\\n});\\n\\nconst abbrevRows = [\\n createRow([\\n createButton('TV-14', '1 of 9'),\\n createButton('(CC)', '2 of 9'),\\n createButton('HD', '3 of 9')\\n ]),\\n createRow([\\n createButton('ENG', '4 of 9'),\\n createButton('ENG+ES', '5 of 9'),\\n createButton('AD', '6 of 9')\\n ]),\\n createRow([\\n createButton('RT 95%', '7 of 9'),\\n createButton('S3E12', '8 of 9'),\\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\\n ])\\n];\\n\\nexport const WithDefaultAbbreviations = () => {\\n class WithAbbreviations extends lng.Component {\\n static _template() {\\n return {\\n debug: true,\\n announcerEnabled: true,\\n announcerTimeout: 15 * 1000,\\n Column: {\\n type: Column,\\n w: 900,\\n h: 400,\\n style: {\\n itemSpacing: 20\\n },\\n items: abbrevRows\\n }\\n };\\n }\\n\\n get announceContext() {\\n return [\\n 'PAUSE-2.2',\\n `Press LEFT or RIGHT to review items,\\n press UP or DOWN to review categories,\\n press CENTER to select`\\n ];\\n }\\n }\\n return WithAbbreviations;\\n};\\nWithDefaultAbbreviations.parameters = {\\n announcerOptions: {\\n abbreviations: defaultAbbrevConfig\\n }\\n};\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":95},\"endLoc\":{\"col\":3,\"line\":122},\"startBody\":{\"col\":21,\"line\":95},\"endBody\":{\"col\":3,\"line\":122}},\"with-default-abbreviations\":{\"startLoc\":{\"col\":40,\"line\":155},\"endLoc\":{\"col\":1,\"line\":184},\"startBody\":{\"col\":40,\"line\":155},\"endBody\":{\"col\":1,\"line\":184}}}},\n docs: {\n page: mdx\n }\n },};\n\nconst rows = [\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n }\n];\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: rows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n };;\n\nconst createRow = items => ({\n type: Row,\n w: 900,\n h: 100,\n itemSpacing: 30,\n items\n});\nconst createButton = (title, announceContext) => ({\n type: Button,\n title,\n announceContext\n});\n\nconst abbrevRows = [\n createRow([\n createButton('TV-14', '1 of 9'),\n createButton('(CC)', '2 of 9'),\n createButton('HD', '3 of 9')\n ]),\n createRow([\n createButton('ENG', '4 of 9'),\n createButton('ENG+ES', '5 of 9'),\n createButton('AD', '6 of 9')\n ]),\n createRow([\n createButton('RT 95%', '7 of 9'),\n createButton('S3E12', '8 of 9'),\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\n ])\n];\n\nexport const WithDefaultAbbreviations = () => {\n class WithAbbreviations extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 900,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: abbrevRows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n }\n return WithAbbreviations;\n};\nWithDefaultAbbreviations.parameters = {\n announcerOptions: {\n abbreviations: defaultAbbrevConfig\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -68602,7 +68544,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 withAnnouncer, { defaultAbbrevConfig } from '.';\nimport { Column, Row, Button } from '../../components';\nimport mdx from './withAnnouncer.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[0]}/withAnnouncer`,\n component: withAnnouncer,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst rows = [\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n }\n];\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: rows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n };\n\nconst createRow = items => ({\n type: Row,\n w: 900,\n h: 100,\n itemSpacing: 30,\n items\n});\nconst createButton = (title, announceContext) => ({\n type: Button,\n title,\n announceContext\n});\n\nconst abbrevRows = [\n createRow([\n createButton('TV-14', '1 of 9'),\n createButton('(CC)', '2 of 9'),\n createButton('HD', '3 of 9')\n ]),\n createRow([\n createButton('ENG', '4 of 9'),\n createButton('ENG+ES', '5 of 9'),\n createButton('AD', '6 of 9')\n ]),\n createRow([\n createButton('RT 95%', '7 of 9'),\n createButton('S3E12', '8 of 9'),\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\n ])\n];\n\nexport const WithDefaultAbbreviations = () => {\n class WithAbbreviations extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 900,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: abbrevRows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n }\n return WithAbbreviations;\n};\nWithDefaultAbbreviations.parameters = {\n announcerOptions: {\n abbreviations: defaultAbbrevConfig\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 withAnnouncer, { defaultAbbrevConfig } from '.';\nimport { Column, Row, Button } from '../../components';\nimport mdx from './withAnnouncer.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withAnnouncer`,\n component: withAnnouncer,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst rows = [\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n }\n];\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: rows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n };\n\nconst createRow = items => ({\n type: Row,\n w: 900,\n h: 100,\n itemSpacing: 30,\n items\n});\nconst createButton = (title, announceContext) => ({\n type: Button,\n title,\n announceContext\n});\n\nconst abbrevRows = [\n createRow([\n createButton('TV-14', '1 of 9'),\n createButton('(CC)', '2 of 9'),\n createButton('HD', '3 of 9')\n ]),\n createRow([\n createButton('ENG', '4 of 9'),\n createButton('ENG+ES', '5 of 9'),\n createButton('AD', '6 of 9')\n ]),\n createRow([\n createButton('RT 95%', '7 of 9'),\n createButton('S3E12', '8 of 9'),\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\n ])\n];\n\nexport const WithDefaultAbbreviations = () => {\n class WithAbbreviations extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 900,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: abbrevRows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n }\n return WithAbbreviations;\n};\nWithDefaultAbbreviations.parameters = {\n announcerOptions: {\n abbreviations: defaultAbbrevConfig\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -68667,11 +68609,11 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var withAnnouncer_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][0] + "/withAnnouncer", + title: constants["a" /* CATEGORIES */][4] + "/withAnnouncer", component: withAnnouncer["a" /* default */], 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 withAnnouncer, { defaultAbbrevConfig } from '.';\nimport { Column, Row, Button } from '../../components';\nimport mdx from './withAnnouncer.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[0]}/withAnnouncer`,\n component: withAnnouncer,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst rows = [\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n }\n];\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: rows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n };\n\nconst createRow = items => ({\n type: Row,\n w: 900,\n h: 100,\n itemSpacing: 30,\n items\n});\nconst createButton = (title, announceContext) => ({\n type: Button,\n title,\n announceContext\n});\n\nconst abbrevRows = [\n createRow([\n createButton('TV-14', '1 of 9'),\n createButton('(CC)', '2 of 9'),\n createButton('HD', '3 of 9')\n ]),\n createRow([\n createButton('ENG', '4 of 9'),\n createButton('ENG+ES', '5 of 9'),\n createButton('AD', '6 of 9')\n ]),\n createRow([\n createButton('RT 95%', '7 of 9'),\n createButton('S3E12', '8 of 9'),\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\n ])\n];\n\nexport const WithDefaultAbbreviations = () => {\n class WithAbbreviations extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 900,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: abbrevRows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n }\n return WithAbbreviations;\n};\nWithDefaultAbbreviations.parameters = {\n announcerOptions: {\n abbreviations: defaultAbbrevConfig\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 withAnnouncer, { defaultAbbrevConfig } from '.';\nimport { Column, Row, Button } from '../../components';\nimport mdx from './withAnnouncer.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withAnnouncer`,\n component: withAnnouncer,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nconst rows = [\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n },\n {\n type: Row,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 100,\n itemSpacing: 30,\n items: [\n {\n type: Button,\n title: 'Button 1',\n announceContext: '1 of 3'\n },\n {\n type: Button,\n title: 'Button 2',\n announceContext: '2 of 3'\n },\n { type: Button, title: 'Button 3', announceContext: '3 of 3' }\n ]\n }\n];\n\nexport const Basic = () =>\n class Basic extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 1920 - 160, // x offset from preview.js * 2,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: rows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n };\n\nconst createRow = items => ({\n type: Row,\n w: 900,\n h: 100,\n itemSpacing: 30,\n items\n});\nconst createButton = (title, announceContext) => ({\n type: Button,\n title,\n announceContext\n});\n\nconst abbrevRows = [\n createRow([\n createButton('TV-14', '1 of 9'),\n createButton('(CC)', '2 of 9'),\n createButton('HD', '3 of 9')\n ]),\n createRow([\n createButton('ENG', '4 of 9'),\n createButton('ENG+ES', '5 of 9'),\n createButton('AD', '6 of 9')\n ]),\n createRow([\n createButton('RT 95%', '7 of 9'),\n createButton('S3E12', '8 of 9'),\n createButton('S12E1, TV-14, CC, HD, ENG+ES, AD, RT 95%', '9 of 9')\n ])\n];\n\nexport const WithDefaultAbbreviations = () => {\n class WithAbbreviations extends lng.Component {\n static _template() {\n return {\n debug: true,\n announcerEnabled: true,\n announcerTimeout: 15 * 1000,\n Column: {\n type: Column,\n w: 900,\n h: 400,\n style: {\n itemSpacing: 20\n },\n items: abbrevRows\n }\n };\n }\n\n get announceContext() {\n return [\n 'PAUSE-2.2',\n `Press LEFT or RIGHT to review items,\n press UP or DOWN to review categories,\n press CENTER to select`\n ];\n }\n }\n return WithAbbreviations;\n};\nWithDefaultAbbreviations.parameters = {\n announcerOptions: {\n abbreviations: defaultAbbrevConfig\n }\n};\n", "locationsMap": { "basic": { "startLoc": { @@ -69267,7 +69209,7 @@ function withEditItems_stories_getPrototypeOf(o) { withEditItems_stories_getProt /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { Button, TextBox, Row } from '../../components';\\nimport mdx from './withEditItems.mdx';\\nimport { default as withEditItemsMixin } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n/**\\n * Shared Args and Arg Types from Row\\n */\\nimport * as RowProps from '../../components/Row/Row.stories.js';\\nexport default {\\n title: `${CATEGORIES[512]}/withEditItems`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nexport const withEditItems = () =>\\n class withEditItems extends lng.Component {\\n static _template() {\\n return {\\n RowComponent: {\\n type: withEditItemsMixin(Row),\\n y: 300,\\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1}`,\\n w: 150\\n }))\\n },\\n TextBox: {\\n type: TextBox,\\n content:\\n 'Press enter to toggle edit mode. \\\\nWhen in edit mode, use left/right arrows to move items \\\\nPress enter again to exit edit mode'\\n }\\n };\\n }\\n\\n _handleEnter() {\\n this.tag('RowComponent').toggleEdit();\\n }\\n };\\nwithEditItems.args = RowProps.Row.args;\\nwithEditItems.argTypes = RowProps.Row.argTypes;\\n\\nwithEditItems.storyName = 'withEditItems';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withEditItems\":{\"startLoc\":{\"col\":29,\"line\":39},\"endLoc\":{\"col\":3,\"line\":63},\"startBody\":{\"col\":29,\"line\":39},\"endBody\":{\"col\":3,\"line\":63}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { Button, TextBox, Row } from '../../components';\nimport mdx from './withEditItems.mdx';\nimport { default as withEditItemsMixin } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n/**\n * Shared Args and Arg Types from Row\n */\nimport * as RowProps from '../../components/Row/Row.stories.js';\nexport default {\n title: `${CATEGORIES[512]}/withEditItems`,\n 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';\\n\\nimport { Button, TextBox, Row } from '../../components';\\nimport mdx from './withEditItems.mdx';\\nimport { default as withEditItemsMixin } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n/**\\n * Shared Args and Arg Types from Row\\n */\\nimport * as RowProps from '../../components/Row/Row.stories.js';\\nexport default {\\n title: `${CATEGORIES[512]}/withEditItems`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nexport const withEditItems = () =>\\n class withEditItems extends lng.Component {\\n static _template() {\\n return {\\n RowComponent: {\\n type: withEditItemsMixin(Row),\\n y: 300,\\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1}`,\\n w: 150\\n }))\\n },\\n TextBox: {\\n type: TextBox,\\n content:\\n 'Press enter to toggle edit mode. \\\\nWhen in edit mode, use left/right arrows to move items \\\\nPress enter again to exit edit mode'\\n }\\n };\\n }\\n\\n _handleEnter() {\\n this.tag('RowComponent').toggleEdit();\\n }\\n };\\nwithEditItems.args = RowProps.Row.args;\\nwithEditItems.argTypes = RowProps.Row.argTypes;\\n\\nwithEditItems.storyName = 'withEditItems';\\n\",\"locationsMap\":{\"with-edit-items\":{\"startLoc\":{\"col\":29,\"line\":39},\"endLoc\":{\"col\":3,\"line\":63},\"startBody\":{\"col\":29,\"line\":39},\"endBody\":{\"col\":3,\"line\":63}}}},\n docs: {\n page: mdx\n },\n remountAll: true\n },};\n\nexport const withEditItems = () =>\n class withEditItems extends lng.Component {\n static _template() {\n return {\n RowComponent: {\n type: withEditItemsMixin(Row),\n y: 300,\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1}`,\n w: 150\n }))\n },\n TextBox: {\n type: TextBox,\n content:\n 'Press enter to toggle edit mode. \\nWhen in edit mode, use left/right arrows to move items \\nPress enter again to exit edit mode'\n }\n };\n }\n\n _handleEnter() {\n this.tag('RowComponent').toggleEdit();\n }\n };\nwithEditItems.args = RowProps.Row.args;\nwithEditItems.argTypes = RowProps.Row.argTypes;\n\nwithEditItems.storyName = 'withEditItems';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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';\\n\\nimport { Button, TextBox, Row } from '../../components';\\nimport mdx from './withEditItems.mdx';\\nimport { default as withEditItemsMixin } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n/**\\n * Shared Args and Arg Types from Row\\n */\\nimport * as RowProps from '../../components/Row/Row.stories.js';\\nexport default {\\n title: `${CATEGORIES[4]}/withEditItems`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nexport const withEditItems = () =>\\n class withEditItems extends lng.Component {\\n static _template() {\\n return {\\n RowComponent: {\\n type: withEditItemsMixin(Row),\\n y: 300,\\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1}`,\\n w: 150\\n }))\\n },\\n TextBox: {\\n type: TextBox,\\n content:\\n 'Press enter to toggle edit mode. \\\\nWhen in edit mode, use left/right arrows to move items \\\\nPress enter again to exit edit mode'\\n }\\n };\\n }\\n\\n _handleEnter() {\\n this.tag('RowComponent').toggleEdit();\\n }\\n };\\nwithEditItems.args = RowProps.Row.args;\\nwithEditItems.argTypes = RowProps.Row.argTypes;\\n\\nwithEditItems.storyName = 'withEditItems';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withEditItems\":{\"startLoc\":{\"col\":29,\"line\":39},\"endLoc\":{\"col\":3,\"line\":63},\"startBody\":{\"col\":29,\"line\":39},\"endBody\":{\"col\":3,\"line\":63}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\n\nimport { Button, TextBox, Row } from '../../components';\nimport mdx from './withEditItems.mdx';\nimport { default as withEditItemsMixin } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n/**\n * Shared Args and Arg Types from Row\n */\nimport * as RowProps from '../../components/Row/Row.stories.js';\nexport default {\n title: `${CATEGORIES[4]}/withEditItems`,\n 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';\\n\\nimport { Button, TextBox, Row } from '../../components';\\nimport mdx from './withEditItems.mdx';\\nimport { default as withEditItemsMixin } from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n/**\\n * Shared Args and Arg Types from Row\\n */\\nimport * as RowProps from '../../components/Row/Row.stories.js';\\nexport default {\\n title: `${CATEGORIES[4]}/withEditItems`,\\n parameters: {\\n docs: {\\n page: mdx\\n },\\n remountAll: true\\n }\\n};\\n\\nexport const withEditItems = () =>\\n class withEditItems extends lng.Component {\\n static _template() {\\n return {\\n RowComponent: {\\n type: withEditItemsMixin(Row),\\n y: 300,\\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\\n type: Button,\\n title: `Button ${i + 1}`,\\n w: 150\\n }))\\n },\\n TextBox: {\\n type: TextBox,\\n content:\\n 'Press enter to toggle edit mode. \\\\nWhen in edit mode, use left/right arrows to move items \\\\nPress enter again to exit edit mode'\\n }\\n };\\n }\\n\\n _handleEnter() {\\n this.tag('RowComponent').toggleEdit();\\n }\\n };\\nwithEditItems.args = RowProps.Row.args;\\nwithEditItems.argTypes = RowProps.Row.argTypes;\\n\\nwithEditItems.storyName = 'withEditItems';\\n\",\"locationsMap\":{\"with-edit-items\":{\"startLoc\":{\"col\":29,\"line\":39},\"endLoc\":{\"col\":3,\"line\":63},\"startBody\":{\"col\":29,\"line\":39},\"endBody\":{\"col\":3,\"line\":63}}}},\n docs: {\n page: mdx\n },\n remountAll: true\n },};\n\nexport const withEditItems = () =>\n class withEditItems extends lng.Component {\n static _template() {\n return {\n RowComponent: {\n type: withEditItemsMixin(Row),\n y: 300,\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1}`,\n w: 150\n }))\n },\n TextBox: {\n type: TextBox,\n content:\n 'Press enter to toggle edit mode. \\nWhen in edit mode, use left/right arrows to move items \\nPress enter again to exit edit mode'\n }\n };\n }\n\n _handleEnter() {\n this.tag('RowComponent').toggleEdit();\n }\n };\nwithEditItems.args = RowProps.Row.args;\nwithEditItems.argTypes = RowProps.Row.argTypes;\n\nwithEditItems.storyName = 'withEditItems';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withEditItems": { @@ -69293,7 +69235,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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';\n\nimport { Button, TextBox, Row } from '../../components';\nimport mdx from './withEditItems.mdx';\nimport { default as withEditItemsMixin } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n/**\n * Shared Args and Arg Types from Row\n */\nimport * as RowProps from '../../components/Row/Row.stories.js';\nexport default {\n title: `${CATEGORIES[512]}/withEditItems`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nexport const withEditItems = () =>\n class withEditItems extends lng.Component {\n static _template() {\n return {\n RowComponent: {\n type: withEditItemsMixin(Row),\n y: 300,\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1}`,\n w: 150\n }))\n },\n TextBox: {\n type: TextBox,\n content:\n 'Press enter to toggle edit mode. \\nWhen in edit mode, use left/right arrows to move items \\nPress enter again to exit edit mode'\n }\n };\n }\n\n _handleEnter() {\n this.tag('RowComponent').toggleEdit();\n }\n };\nwithEditItems.args = RowProps.Row.args;\nwithEditItems.argTypes = RowProps.Row.argTypes;\n\nwithEditItems.storyName = 'withEditItems';\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';\n\nimport { Button, TextBox, Row } from '../../components';\nimport mdx from './withEditItems.mdx';\nimport { default as withEditItemsMixin } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n/**\n * Shared Args and Arg Types from Row\n */\nimport * as RowProps from '../../components/Row/Row.stories.js';\nexport default {\n title: `${CATEGORIES[4]}/withEditItems`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nexport const withEditItems = () =>\n class withEditItems extends lng.Component {\n static _template() {\n return {\n RowComponent: {\n type: withEditItemsMixin(Row),\n y: 300,\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1}`,\n w: 150\n }))\n },\n TextBox: {\n type: TextBox,\n content:\n 'Press enter to toggle edit mode. \\nWhen in edit mode, use left/right arrows to move items \\nPress enter again to exit edit mode'\n }\n };\n }\n\n _handleEnter() {\n this.tag('RowComponent').toggleEdit();\n }\n };\nwithEditItems.args = RowProps.Row.args;\nwithEditItems.argTypes = RowProps.Row.argTypes;\n\nwithEditItems.storyName = 'withEditItems';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withEditItems": { @@ -69344,10 +69286,10 @@ var __LOCATIONS_MAP__ = { */ /* harmony default export */ var withEditItems_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withEditItems", + title: constants["a" /* CATEGORIES */][4] + "/withEditItems", 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';\n\nimport { Button, TextBox, Row } from '../../components';\nimport mdx from './withEditItems.mdx';\nimport { default as withEditItemsMixin } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n/**\n * Shared Args and Arg Types from Row\n */\nimport * as RowProps from '../../components/Row/Row.stories.js';\nexport default {\n title: `${CATEGORIES[512]}/withEditItems`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nexport const withEditItems = () =>\n class withEditItems extends lng.Component {\n static _template() {\n return {\n RowComponent: {\n type: withEditItemsMixin(Row),\n y: 300,\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1}`,\n w: 150\n }))\n },\n TextBox: {\n type: TextBox,\n content:\n 'Press enter to toggle edit mode. \\nWhen in edit mode, use left/right arrows to move items \\nPress enter again to exit edit mode'\n }\n };\n }\n\n _handleEnter() {\n this.tag('RowComponent').toggleEdit();\n }\n };\nwithEditItems.args = RowProps.Row.args;\nwithEditItems.argTypes = RowProps.Row.argTypes;\n\nwithEditItems.storyName = 'withEditItems';\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';\n\nimport { Button, TextBox, Row } from '../../components';\nimport mdx from './withEditItems.mdx';\nimport { default as withEditItemsMixin } from '.';\nimport { CATEGORIES } from '../../docs/constants';\n/**\n * Shared Args and Arg Types from Row\n */\nimport * as RowProps from '../../components/Row/Row.stories.js';\nexport default {\n title: `${CATEGORIES[4]}/withEditItems`,\n parameters: {\n docs: {\n page: mdx\n },\n remountAll: true\n }\n};\n\nexport const withEditItems = () =>\n class withEditItems extends lng.Component {\n static _template() {\n return {\n RowComponent: {\n type: withEditItemsMixin(Row),\n y: 300,\n items: Array.apply(null, { length: 6 }).map((_, i) => ({\n type: Button,\n title: `Button ${i + 1}`,\n w: 150\n }))\n },\n TextBox: {\n type: TextBox,\n content:\n 'Press enter to toggle edit mode. \\nWhen in edit mode, use left/right arrows to move items \\nPress enter again to exit edit mode'\n }\n };\n }\n\n _handleEnter() {\n this.tag('RowComponent').toggleEdit();\n }\n };\nwithEditItems.args = RowProps.Row.args;\nwithEditItems.argTypes = RowProps.Row.argTypes;\n\nwithEditItems.storyName = 'withEditItems';\n", "locationsMap": { "with-edit-items": { "startLoc": { @@ -69732,7 +69674,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { Tile, Row } from '../../components';\\nimport { context } from '../../globals';\\nimport mdx from './withHandleKey.mdx';\\nimport withHandleKeyMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\ncontext.config({\\n // Inspect console to see - should only be called when pressing enter on first tile.\\n keyMetricsCallback: (key, p) => {\\n \\n console.log('Metrics payload received', key, p);\\n }\\n});\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withHandleKey`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withHandleKey = args => {\\n class withHandleKey extends lng.Component {\\n static _template() {\\n return {\\n x: 60,\\n y: 60,\\n Row: {\\n type: Row,\\n itemSpacing: 60,\\n items: [\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onEnter: args.onEnter,\\n metricsPayload: {\\n buttonName: 'enter button',\\n uniqueId: 1\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowDown: args.onArrowDown,\\n metricsPayload: {\\n buttonName: 'arrow down button',\\n uniqueId: 2\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowUp: args.onArrowUp,\\n metricsPayload: {\\n buttonName: 'arrow up button',\\n uniqueId: 3\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowRight: args.onArrowRight,\\n metricsPayload: {\\n buttonName: 'arrow right button',\\n uniqueId: 4\\n }\\n }\\n ]\\n }\\n };\\n }\\n \\n $onEnter(keyEvent, tile) {\\n args.onEnter();\\n }\\n }\\n return withHandleKeyMixin(withHandleKey);\\n};\\n\\nwithHandleKey.storyName = 'withHandleKey';\\n\\nwithHandleKey.args = {};\\n\\nwithHandleKey.argTypes = {};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withHandleKey\":{\"startLoc\":{\"col\":29,\"line\":43},\"endLoc\":{\"col\":1,\"line\":107},\"startBody\":{\"col\":29,\"line\":43},\"endBody\":{\"col\":1,\"line\":107}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { Tile, Row } from '../../components';\nimport { context } from '../../globals';\nimport mdx from './withHandleKey.mdx';\nimport withHandleKeyMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\ncontext.config({\n // Inspect console to see - should only be called when pressing enter on first tile.\n keyMetricsCallback: (key, p) => {\n \n console.log('Metrics payload received', key, p);\n }\n});\n\nexport default {\n title: `${CATEGORIES[512]}/withHandleKey`,\n 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 { Tile, Row } from '../../components';\\nimport { context } from '../../globals';\\nimport mdx from './withHandleKey.mdx';\\nimport withHandleKeyMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\ncontext.config({\\n // Inspect console to see - should only be called when pressing enter on first tile.\\n keyMetricsCallback: (key, p) => {\\n \\n console.log('Metrics payload received', key, p);\\n }\\n});\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withHandleKey`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withHandleKey = args => {\\n class withHandleKey extends lng.Component {\\n static _template() {\\n return {\\n x: 60,\\n y: 60,\\n Row: {\\n type: Row,\\n itemSpacing: 60,\\n items: [\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onEnter: args.onEnter,\\n metricsPayload: {\\n buttonName: 'enter button',\\n uniqueId: 1\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowDown: args.onArrowDown,\\n metricsPayload: {\\n buttonName: 'arrow down button',\\n uniqueId: 2\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowUp: args.onArrowUp,\\n metricsPayload: {\\n buttonName: 'arrow up button',\\n uniqueId: 3\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowRight: args.onArrowRight,\\n metricsPayload: {\\n buttonName: 'arrow right button',\\n uniqueId: 4\\n }\\n }\\n ]\\n }\\n };\\n }\\n \\n $onEnter(keyEvent, tile) {\\n args.onEnter();\\n }\\n }\\n return withHandleKeyMixin(withHandleKey);\\n};\\n\\nwithHandleKey.storyName = 'withHandleKey';\\n\\nwithHandleKey.args = {};\\n\\nwithHandleKey.argTypes = {};\\n\",\"locationsMap\":{\"with-handle-key\":{\"startLoc\":{\"col\":29,\"line\":43},\"endLoc\":{\"col\":1,\"line\":107},\"startBody\":{\"col\":29,\"line\":43},\"endBody\":{\"col\":1,\"line\":107}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withHandleKey = args => {\n class withHandleKey extends lng.Component {\n static _template() {\n return {\n x: 60,\n y: 60,\n Row: {\n type: Row,\n itemSpacing: 60,\n items: [\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onEnter: args.onEnter,\n metricsPayload: {\n buttonName: 'enter button',\n uniqueId: 1\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowDown: args.onArrowDown,\n metricsPayload: {\n buttonName: 'arrow down button',\n uniqueId: 2\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowUp: args.onArrowUp,\n metricsPayload: {\n buttonName: 'arrow up button',\n uniqueId: 3\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowRight: args.onArrowRight,\n metricsPayload: {\n buttonName: 'arrow right button',\n uniqueId: 4\n }\n }\n ]\n }\n };\n }\n \n $onEnter(keyEvent, tile) {\n args.onEnter();\n }\n }\n return withHandleKeyMixin(withHandleKey);\n};\n\nwithHandleKey.storyName = 'withHandleKey';\n\nwithHandleKey.args = {};\n\nwithHandleKey.argTypes = {};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { Tile, Row } from '../../components';\\nimport { context } from '../../globals';\\nimport mdx from './withHandleKey.mdx';\\nimport withHandleKeyMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\ncontext.config({\\n // Inspect console to see - should only be called when pressing enter on first tile.\\n keyMetricsCallback: (key, p) => {\\n \\n console.log('Metrics payload received', key, p);\\n }\\n});\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withHandleKey`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withHandleKey = args => {\\n class withHandleKey extends lng.Component {\\n static _template() {\\n return {\\n x: 60,\\n y: 60,\\n Row: {\\n type: Row,\\n itemSpacing: 60,\\n items: [\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onEnter: args.onEnter,\\n metricsPayload: {\\n buttonName: 'enter button',\\n uniqueId: 1\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowDown: args.onArrowDown,\\n metricsPayload: {\\n buttonName: 'arrow down button',\\n uniqueId: 2\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowUp: args.onArrowUp,\\n metricsPayload: {\\n buttonName: 'arrow up button',\\n uniqueId: 3\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowRight: args.onArrowRight,\\n metricsPayload: {\\n buttonName: 'arrow right button',\\n uniqueId: 4\\n }\\n }\\n ]\\n }\\n };\\n }\\n \\n $onEnter(keyEvent, tile) {\\n args.onEnter();\\n }\\n }\\n return withHandleKeyMixin(withHandleKey);\\n};\\n\\nwithHandleKey.storyName = 'withHandleKey';\\n\\nwithHandleKey.args = {};\\n\\nwithHandleKey.argTypes = {};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withHandleKey\":{\"startLoc\":{\"col\":29,\"line\":43},\"endLoc\":{\"col\":1,\"line\":107},\"startBody\":{\"col\":29,\"line\":43},\"endBody\":{\"col\":1,\"line\":107}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { Tile, Row } from '../../components';\nimport { context } from '../../globals';\nimport mdx from './withHandleKey.mdx';\nimport withHandleKeyMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\ncontext.config({\n // Inspect console to see - should only be called when pressing enter on first tile.\n keyMetricsCallback: (key, p) => {\n \n console.log('Metrics payload received', key, p);\n }\n});\n\nexport default {\n title: `${CATEGORIES[4]}/withHandleKey`,\n 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 { Tile, Row } from '../../components';\\nimport { context } from '../../globals';\\nimport mdx from './withHandleKey.mdx';\\nimport withHandleKeyMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\ncontext.config({\\n // Inspect console to see - should only be called when pressing enter on first tile.\\n keyMetricsCallback: (key, p) => {\\n \\n console.log('Metrics payload received', key, p);\\n }\\n});\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withHandleKey`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withHandleKey = args => {\\n class withHandleKey extends lng.Component {\\n static _template() {\\n return {\\n x: 60,\\n y: 60,\\n Row: {\\n type: Row,\\n itemSpacing: 60,\\n items: [\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onEnter: args.onEnter,\\n metricsPayload: {\\n buttonName: 'enter button',\\n uniqueId: 1\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowDown: args.onArrowDown,\\n metricsPayload: {\\n buttonName: 'arrow down button',\\n uniqueId: 2\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowUp: args.onArrowUp,\\n metricsPayload: {\\n buttonName: 'arrow up button',\\n uniqueId: 3\\n }\\n },\\n {\\n type: Tile,\\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\\n w: 320,\\n h: 180,\\n onArrowRight: args.onArrowRight,\\n metricsPayload: {\\n buttonName: 'arrow right button',\\n uniqueId: 4\\n }\\n }\\n ]\\n }\\n };\\n }\\n \\n $onEnter(keyEvent, tile) {\\n args.onEnter();\\n }\\n }\\n return withHandleKeyMixin(withHandleKey);\\n};\\n\\nwithHandleKey.storyName = 'withHandleKey';\\n\\nwithHandleKey.args = {};\\n\\nwithHandleKey.argTypes = {};\\n\",\"locationsMap\":{\"with-handle-key\":{\"startLoc\":{\"col\":29,\"line\":43},\"endLoc\":{\"col\":1,\"line\":107},\"startBody\":{\"col\":29,\"line\":43},\"endBody\":{\"col\":1,\"line\":107}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withHandleKey = args => {\n class withHandleKey extends lng.Component {\n static _template() {\n return {\n x: 60,\n y: 60,\n Row: {\n type: Row,\n itemSpacing: 60,\n items: [\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onEnter: args.onEnter,\n metricsPayload: {\n buttonName: 'enter button',\n uniqueId: 1\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowDown: args.onArrowDown,\n metricsPayload: {\n buttonName: 'arrow down button',\n uniqueId: 2\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowUp: args.onArrowUp,\n metricsPayload: {\n buttonName: 'arrow up button',\n uniqueId: 3\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowRight: args.onArrowRight,\n metricsPayload: {\n buttonName: 'arrow right button',\n uniqueId: 4\n }\n }\n ]\n }\n };\n }\n \n $onEnter(keyEvent, tile) {\n args.onEnter();\n }\n }\n return withHandleKeyMixin(withHandleKey);\n};\n\nwithHandleKey.storyName = 'withHandleKey';\n\nwithHandleKey.args = {};\n\nwithHandleKey.argTypes = {};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withHandleKey": { @@ -69758,7 +69700,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { Tile, Row } from '../../components';\nimport { context } from '../../globals';\nimport mdx from './withHandleKey.mdx';\nimport withHandleKeyMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\ncontext.config({\n // Inspect console to see - should only be called when pressing enter on first tile.\n keyMetricsCallback: (key, p) => {\n \n console.log('Metrics payload received', key, p);\n }\n});\n\nexport default {\n title: `${CATEGORIES[512]}/withHandleKey`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withHandleKey = args => {\n class withHandleKey extends lng.Component {\n static _template() {\n return {\n x: 60,\n y: 60,\n Row: {\n type: Row,\n itemSpacing: 60,\n items: [\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onEnter: args.onEnter,\n metricsPayload: {\n buttonName: 'enter button',\n uniqueId: 1\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowDown: args.onArrowDown,\n metricsPayload: {\n buttonName: 'arrow down button',\n uniqueId: 2\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowUp: args.onArrowUp,\n metricsPayload: {\n buttonName: 'arrow up button',\n uniqueId: 3\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowRight: args.onArrowRight,\n metricsPayload: {\n buttonName: 'arrow right button',\n uniqueId: 4\n }\n }\n ]\n }\n };\n }\n \n $onEnter(keyEvent, tile) {\n args.onEnter();\n }\n }\n return withHandleKeyMixin(withHandleKey);\n};\n\nwithHandleKey.storyName = 'withHandleKey';\n\nwithHandleKey.args = {};\n\nwithHandleKey.argTypes = {};\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 { Tile, Row } from '../../components';\nimport { context } from '../../globals';\nimport mdx from './withHandleKey.mdx';\nimport withHandleKeyMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\ncontext.config({\n // Inspect console to see - should only be called when pressing enter on first tile.\n keyMetricsCallback: (key, p) => {\n \n console.log('Metrics payload received', key, p);\n }\n});\n\nexport default {\n title: `${CATEGORIES[4]}/withHandleKey`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withHandleKey = args => {\n class withHandleKey extends lng.Component {\n static _template() {\n return {\n x: 60,\n y: 60,\n Row: {\n type: Row,\n itemSpacing: 60,\n items: [\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onEnter: args.onEnter,\n metricsPayload: {\n buttonName: 'enter button',\n uniqueId: 1\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowDown: args.onArrowDown,\n metricsPayload: {\n buttonName: 'arrow down button',\n uniqueId: 2\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowUp: args.onArrowUp,\n metricsPayload: {\n buttonName: 'arrow up button',\n uniqueId: 3\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowRight: args.onArrowRight,\n metricsPayload: {\n buttonName: 'arrow right button',\n uniqueId: 4\n }\n }\n ]\n }\n };\n }\n \n $onEnter(keyEvent, tile) {\n args.onEnter();\n }\n }\n return withHandleKeyMixin(withHandleKey);\n};\n\nwithHandleKey.storyName = 'withHandleKey';\n\nwithHandleKey.args = {};\n\nwithHandleKey.argTypes = {};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withHandleKey": { @@ -69813,10 +69755,10 @@ context["a" /* default */].config({ } }); /* harmony default export */ var withHandleKey_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withHandleKey", + title: constants["a" /* CATEGORIES */][4] + "/withHandleKey", 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 { Tile, Row } from '../../components';\nimport { context } from '../../globals';\nimport mdx from './withHandleKey.mdx';\nimport withHandleKeyMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\ncontext.config({\n // Inspect console to see - should only be called when pressing enter on first tile.\n keyMetricsCallback: (key, p) => {\n \n console.log('Metrics payload received', key, p);\n }\n});\n\nexport default {\n title: `${CATEGORIES[512]}/withHandleKey`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withHandleKey = args => {\n class withHandleKey extends lng.Component {\n static _template() {\n return {\n x: 60,\n y: 60,\n Row: {\n type: Row,\n itemSpacing: 60,\n items: [\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onEnter: args.onEnter,\n metricsPayload: {\n buttonName: 'enter button',\n uniqueId: 1\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowDown: args.onArrowDown,\n metricsPayload: {\n buttonName: 'arrow down button',\n uniqueId: 2\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowUp: args.onArrowUp,\n metricsPayload: {\n buttonName: 'arrow up button',\n uniqueId: 3\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowRight: args.onArrowRight,\n metricsPayload: {\n buttonName: 'arrow right button',\n uniqueId: 4\n }\n }\n ]\n }\n };\n }\n \n $onEnter(keyEvent, tile) {\n args.onEnter();\n }\n }\n return withHandleKeyMixin(withHandleKey);\n};\n\nwithHandleKey.storyName = 'withHandleKey';\n\nwithHandleKey.args = {};\n\nwithHandleKey.argTypes = {};\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 { Tile, Row } from '../../components';\nimport { context } from '../../globals';\nimport mdx from './withHandleKey.mdx';\nimport withHandleKeyMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\ncontext.config({\n // Inspect console to see - should only be called when pressing enter on first tile.\n keyMetricsCallback: (key, p) => {\n \n console.log('Metrics payload received', key, p);\n }\n});\n\nexport default {\n title: `${CATEGORIES[4]}/withHandleKey`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withHandleKey = args => {\n class withHandleKey extends lng.Component {\n static _template() {\n return {\n x: 60,\n y: 60,\n Row: {\n type: Row,\n itemSpacing: 60,\n items: [\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onEnter: args.onEnter,\n metricsPayload: {\n buttonName: 'enter button',\n uniqueId: 1\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowDown: args.onArrowDown,\n metricsPayload: {\n buttonName: 'arrow down button',\n uniqueId: 2\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowUp: args.onArrowUp,\n metricsPayload: {\n buttonName: 'arrow up button',\n uniqueId: 3\n }\n },\n {\n type: Tile,\n src: 'https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg',\n w: 320,\n h: 180,\n onArrowRight: args.onArrowRight,\n metricsPayload: {\n buttonName: 'arrow right button',\n uniqueId: 4\n }\n }\n ]\n }\n };\n }\n \n $onEnter(keyEvent, tile) {\n args.onEnter();\n }\n }\n return withHandleKeyMixin(withHandleKey);\n};\n\nwithHandleKey.storyName = 'withHandleKey';\n\nwithHandleKey.args = {};\n\nwithHandleKey.argTypes = {};\n", "locationsMap": { "with-handle-key": { "startLoc": { @@ -70257,7 +70199,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withLayout.mdx';\\nimport { Tile } from '../../components';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withLayout`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withLayout = () => {\\n return class withLayout extends lng.Component {\\n static _template() {\\n return {\\n Item: {\\n type: Tile,\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n mode: 'contain'\\n }\\n }\\n };\\n }\\n };\\n};\\n\\nwithLayout.storyName = 'withLayout';\\n\\nwithLayout.args = {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3,\\n circle: false\\n};\\n\\nwithLayout.argTypes = {\\n ratioX: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of x resolution relative to the screen height',\\n table: { defaultValue: { summary: 0 } }\\n },\\n ratioY: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of y resolution relative to the screen width',\\n table: { defaultValue: { summary: 0 } }\\n },\\n upCount: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'The number of items that should be displayed within screen bounds',\\n table: { defaultValue: { summary: 0 } }\\n },\\n circle: {\\n control: 'boolean',\\n description: 'Boolean changing format to circle if true',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nwithLayout.parameters = {\\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\\n return {\\n ...acc,\\n [curr]: (val, component) => {\\n component.tag('Item').itemLayout = {\\n ...component.tag('Item').itemLayout,\\n [curr]: val\\n };\\n }\\n };\\n }, {})\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withLayout\":{\"startLoc\":{\"col\":26,\"line\":33},\"endLoc\":{\"col\":1,\"line\":47},\"startBody\":{\"col\":26,\"line\":33},\"endBody\":{\"col\":1,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withLayout.mdx';\nimport { Tile } from '../../components';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withLayout`,\n 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 mdx from './withLayout.mdx';\\nimport { Tile } from '../../components';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withLayout`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withLayout = () => {\\n return class withLayout extends lng.Component {\\n static _template() {\\n return {\\n Item: {\\n type: Tile,\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n mode: 'contain'\\n }\\n }\\n };\\n }\\n };\\n};\\n\\nwithLayout.storyName = 'withLayout';\\n\\nwithLayout.args = {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3,\\n circle: false\\n};\\n\\nwithLayout.argTypes = {\\n ratioX: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of x resolution relative to the screen height',\\n table: { defaultValue: { summary: 0 } }\\n },\\n ratioY: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of y resolution relative to the screen width',\\n table: { defaultValue: { summary: 0 } }\\n },\\n upCount: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'The number of items that should be displayed within screen bounds',\\n table: { defaultValue: { summary: 0 } }\\n },\\n circle: {\\n control: 'boolean',\\n description: 'Boolean changing format to circle if true',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nwithLayout.parameters = {\\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\\n return {\\n ...acc,\\n [curr]: (val, component) => {\\n component.tag('Item').itemLayout = {\\n ...component.tag('Item').itemLayout,\\n [curr]: val\\n };\\n }\\n };\\n }, {})\\n};\\n\",\"locationsMap\":{\"with-layout\":{\"startLoc\":{\"col\":26,\"line\":33},\"endLoc\":{\"col\":1,\"line\":47},\"startBody\":{\"col\":26,\"line\":33},\"endBody\":{\"col\":1,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withLayout.mdx';\\nimport { Tile } from '../../components';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withLayout`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withLayout = () => {\\n return class withLayout extends lng.Component {\\n static _template() {\\n return {\\n Item: {\\n type: Tile,\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n mode: 'contain'\\n }\\n }\\n };\\n }\\n };\\n};\\n\\nwithLayout.storyName = 'withLayout';\\n\\nwithLayout.args = {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3,\\n circle: false\\n};\\n\\nwithLayout.argTypes = {\\n ratioX: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of x resolution relative to the screen height',\\n table: { defaultValue: { summary: 0 } }\\n },\\n ratioY: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of y resolution relative to the screen width',\\n table: { defaultValue: { summary: 0 } }\\n },\\n upCount: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'The number of items that should be displayed within screen bounds',\\n table: { defaultValue: { summary: 0 } }\\n },\\n circle: {\\n control: 'boolean',\\n description: 'Boolean changing format to circle if true',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nwithLayout.parameters = {\\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\\n return {\\n ...acc,\\n [curr]: (val, component) => {\\n component.tag('Item').itemLayout = {\\n ...component.tag('Item').itemLayout,\\n [curr]: val\\n };\\n }\\n };\\n }, {})\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withLayout\":{\"startLoc\":{\"col\":26,\"line\":33},\"endLoc\":{\"col\":1,\"line\":47},\"startBody\":{\"col\":26,\"line\":33},\"endBody\":{\"col\":1,\"line\":47}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withLayout.mdx';\nimport { Tile } from '../../components';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withLayout`,\n 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 mdx from './withLayout.mdx';\\nimport { Tile } from '../../components';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withLayout`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withLayout = () => {\\n return class withLayout extends lng.Component {\\n static _template() {\\n return {\\n Item: {\\n type: Tile,\\n artwork: {\\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\\n mode: 'contain'\\n }\\n }\\n };\\n }\\n };\\n};\\n\\nwithLayout.storyName = 'withLayout';\\n\\nwithLayout.args = {\\n ratioX: 16,\\n ratioY: 9,\\n upCount: 3,\\n circle: false\\n};\\n\\nwithLayout.argTypes = {\\n ratioX: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of x resolution relative to the screen height',\\n table: { defaultValue: { summary: 0 } }\\n },\\n ratioY: {\\n control: { type: 'number', min: 0 },\\n description: 'The units of y resolution relative to the screen width',\\n table: { defaultValue: { summary: 0 } }\\n },\\n upCount: {\\n control: { type: 'number', min: 0 },\\n description:\\n 'The number of items that should be displayed within screen bounds',\\n table: { defaultValue: { summary: 0 } }\\n },\\n circle: {\\n control: 'boolean',\\n description: 'Boolean changing format to circle if true',\\n table: { defaultValue: { summary: false } }\\n }\\n};\\n\\nwithLayout.parameters = {\\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\\n return {\\n ...acc,\\n [curr]: (val, component) => {\\n component.tag('Item').itemLayout = {\\n ...component.tag('Item').itemLayout,\\n [curr]: val\\n };\\n }\\n };\\n }, {})\\n};\\n\",\"locationsMap\":{\"with-layout\":{\"startLoc\":{\"col\":26,\"line\":33},\"endLoc\":{\"col\":1,\"line\":47},\"startBody\":{\"col\":26,\"line\":33},\"endBody\":{\"col\":1,\"line\":47}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withLayout": { @@ -70283,7 +70225,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 mdx from './withLayout.mdx';\nimport { Tile } from '../../components';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withLayout`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n"; +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 mdx from './withLayout.mdx';\nimport { Tile } from '../../components';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withLayout`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withLayout": { @@ -70329,10 +70271,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var withLayout_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withLayout", + title: constants["a" /* CATEGORIES */][4] + "/withLayout", 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 mdx from './withLayout.mdx';\nimport { Tile } from '../../components';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withLayout`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n", + "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 mdx from './withLayout.mdx';\nimport { Tile } from '../../components';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withLayout`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withLayout = () => {\n return class withLayout extends lng.Component {\n static _template() {\n return {\n Item: {\n type: Tile,\n artwork: {\n src: 'https://image.tmdb.org/t/p/w500/frwl2zBNAl5ZbFDJGoJv0mYo0rF.jpg',\n mode: 'contain'\n }\n }\n };\n }\n };\n};\n\nwithLayout.storyName = 'withLayout';\n\nwithLayout.args = {\n ratioX: 16,\n ratioY: 9,\n upCount: 3,\n circle: false\n};\n\nwithLayout.argTypes = {\n ratioX: {\n control: { type: 'number', min: 0 },\n description: 'The units of x resolution relative to the screen height',\n table: { defaultValue: { summary: 0 } }\n },\n ratioY: {\n control: { type: 'number', min: 0 },\n description: 'The units of y resolution relative to the screen width',\n table: { defaultValue: { summary: 0 } }\n },\n upCount: {\n control: { type: 'number', min: 0 },\n description:\n 'The number of items that should be displayed within screen bounds',\n table: { defaultValue: { summary: 0 } }\n },\n circle: {\n control: 'boolean',\n description: 'Boolean changing format to circle if true',\n table: { defaultValue: { summary: false } }\n }\n};\n\nwithLayout.parameters = {\n argActions: Object.keys(withLayout.args).reduce((acc, curr) => {\n return {\n ...acc,\n [curr]: (val, component) => {\n component.tag('Item').itemLayout = {\n ...component.tag('Item').itemLayout,\n [curr]: val\n };\n }\n };\n }, {})\n};\n", "locationsMap": { "with-layout": { "startLoc": { @@ -70847,7 +70789,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 withMarqueeSync from './withMarqueeSync';\\nimport Base from '../../components/Base';\\nimport mdx from './withMarqueeSync.mdx';\\nimport TextBox from '../../components/TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withMarqueeSync`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n return class Basic extends withMarqueeSync(Base) {\\n static get __componentName() {\\n return 'Basic';\\n }\\n static _template() {\\n return {\\n Basic: {\\n Title: {\\n type: TextBox,\\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n },\\n Subtitle: {\\n type: TextBox,\\n content:\\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\\n y: 30,\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n }\\n }\\n };\\n }\\n\\n get syncArray() {\\n return [this.tag('Title'), this.tag('Subtitle')];\\n }\\n };\\n};\\n\\nBasic.storyName = 'withMarqueeSync';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":1,\"line\":64},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":1,\"line\":64}}};\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 withMarqueeSync from './withMarqueeSync';\nimport Base from '../../components/Base';\nimport mdx from './withMarqueeSync.mdx';\nimport TextBox from '../../components/TextBox';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withMarqueeSync`,\n 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 withMarqueeSync from './withMarqueeSync';\\nimport Base from '../../components/Base';\\nimport mdx from './withMarqueeSync.mdx';\\nimport TextBox from '../../components/TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withMarqueeSync`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n return class Basic extends withMarqueeSync(Base) {\\n static get __componentName() {\\n return 'Basic';\\n }\\n static _template() {\\n return {\\n Basic: {\\n Title: {\\n type: TextBox,\\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n },\\n Subtitle: {\\n type: TextBox,\\n content:\\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\\n y: 30,\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n }\\n }\\n };\\n }\\n\\n get syncArray() {\\n return [this.tag('Title'), this.tag('Subtitle')];\\n }\\n };\\n};\\n\\nBasic.storyName = 'withMarqueeSync';\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":1,\"line\":64},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":1,\"line\":64}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = () => {\n return class Basic extends withMarqueeSync(Base) {\n static get __componentName() {\n return 'Basic';\n }\n static _template() {\n return {\n Basic: {\n Title: {\n type: TextBox,\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n },\n Subtitle: {\n type: TextBox,\n content:\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\n y: 30,\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n }\n }\n };\n }\n\n get syncArray() {\n return [this.tag('Title'), this.tag('Subtitle')];\n }\n };\n};\n\nBasic.storyName = 'withMarqueeSync';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 withMarqueeSync from './withMarqueeSync';\\nimport Base from '../../components/Base';\\nimport mdx from './withMarqueeSync.mdx';\\nimport TextBox from '../../components/TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withMarqueeSync`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n return class Basic extends withMarqueeSync(Base) {\\n static get __componentName() {\\n return 'Basic';\\n }\\n static _template() {\\n return {\\n Basic: {\\n Title: {\\n type: TextBox,\\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n },\\n Subtitle: {\\n type: TextBox,\\n content:\\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\\n y: 30,\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n }\\n }\\n };\\n }\\n\\n get syncArray() {\\n return [this.tag('Title'), this.tag('Subtitle')];\\n }\\n };\\n};\\n\\nBasic.storyName = 'withMarqueeSync';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"Basic\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":1,\"line\":64},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":1,\"line\":64}}};\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 withMarqueeSync from './withMarqueeSync';\nimport Base from '../../components/Base';\nimport mdx from './withMarqueeSync.mdx';\nimport TextBox from '../../components/TextBox';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withMarqueeSync`,\n 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 withMarqueeSync from './withMarqueeSync';\\nimport Base from '../../components/Base';\\nimport mdx from './withMarqueeSync.mdx';\\nimport TextBox from '../../components/TextBox';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withMarqueeSync`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const Basic = () => {\\n return class Basic extends withMarqueeSync(Base) {\\n static get __componentName() {\\n return 'Basic';\\n }\\n static _template() {\\n return {\\n Basic: {\\n Title: {\\n type: TextBox,\\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n },\\n Subtitle: {\\n type: TextBox,\\n content:\\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\\n y: 30,\\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\\n marquee: true\\n }\\n }\\n };\\n }\\n\\n get syncArray() {\\n return [this.tag('Title'), this.tag('Subtitle')];\\n }\\n };\\n};\\n\\nBasic.storyName = 'withMarqueeSync';\\n\",\"locationsMap\":{\"basic\":{\"startLoc\":{\"col\":21,\"line\":34},\"endLoc\":{\"col\":1,\"line\":64},\"startBody\":{\"col\":21,\"line\":34},\"endBody\":{\"col\":1,\"line\":64}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const Basic = () => {\n return class Basic extends withMarqueeSync(Base) {\n static get __componentName() {\n return 'Basic';\n }\n static _template() {\n return {\n Basic: {\n Title: {\n type: TextBox,\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n },\n Subtitle: {\n type: TextBox,\n content:\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\n y: 30,\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n }\n }\n };\n }\n\n get syncArray() {\n return [this.tag('Title'), this.tag('Subtitle')];\n }\n };\n};\n\nBasic.storyName = 'withMarqueeSync';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -70873,7 +70815,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 withMarqueeSync from './withMarqueeSync';\nimport Base from '../../components/Base';\nimport mdx from './withMarqueeSync.mdx';\nimport TextBox from '../../components/TextBox';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withMarqueeSync`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n return class Basic extends withMarqueeSync(Base) {\n static get __componentName() {\n return 'Basic';\n }\n static _template() {\n return {\n Basic: {\n Title: {\n type: TextBox,\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n },\n Subtitle: {\n type: TextBox,\n content:\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\n y: 30,\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n }\n }\n };\n }\n\n get syncArray() {\n return [this.tag('Title'), this.tag('Subtitle')];\n }\n };\n};\n\nBasic.storyName = 'withMarqueeSync';\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 withMarqueeSync from './withMarqueeSync';\nimport Base from '../../components/Base';\nimport mdx from './withMarqueeSync.mdx';\nimport TextBox from '../../components/TextBox';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withMarqueeSync`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n return class Basic extends withMarqueeSync(Base) {\n static get __componentName() {\n return 'Basic';\n }\n static _template() {\n return {\n Basic: {\n Title: {\n type: TextBox,\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n },\n Subtitle: {\n type: TextBox,\n content:\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\n y: 30,\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n }\n }\n };\n }\n\n get syncArray() {\n return [this.tag('Title'), this.tag('Subtitle')];\n }\n };\n};\n\nBasic.storyName = 'withMarqueeSync';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "Basic": { @@ -70920,10 +70862,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var withMarqueeSync_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withMarqueeSync", + title: constants["a" /* CATEGORIES */][4] + "/withMarqueeSync", 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 withMarqueeSync from './withMarqueeSync';\nimport Base from '../../components/Base';\nimport mdx from './withMarqueeSync.mdx';\nimport TextBox from '../../components/TextBox';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withMarqueeSync`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n return class Basic extends withMarqueeSync(Base) {\n static get __componentName() {\n return 'Basic';\n }\n static _template() {\n return {\n Basic: {\n Title: {\n type: TextBox,\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n },\n Subtitle: {\n type: TextBox,\n content:\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\n y: 30,\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n }\n }\n };\n }\n\n get syncArray() {\n return [this.tag('Title'), this.tag('Subtitle')];\n }\n };\n};\n\nBasic.storyName = 'withMarqueeSync';\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 withMarqueeSync from './withMarqueeSync';\nimport Base from '../../components/Base';\nimport mdx from './withMarqueeSync.mdx';\nimport TextBox from '../../components/TextBox';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withMarqueeSync`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const Basic = () => {\n return class Basic extends withMarqueeSync(Base) {\n static get __componentName() {\n return 'Basic';\n }\n static _template() {\n return {\n Basic: {\n Title: {\n type: TextBox,\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing',\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n },\n Subtitle: {\n type: TextBox,\n content:\n 'Morbi vehicula rhoncus aliquam. Cras eget vulputate lectus. Aenean egestas mi at scelerisque cursus.',\n y: 30,\n style: { textStyle: { wordWrapWidth: 250, maxLines: 1 } },\n marquee: true\n }\n }\n };\n }\n\n get syncArray() {\n return [this.tag('Title'), this.tag('Subtitle')];\n }\n };\n};\n\nBasic.storyName = 'withMarqueeSync';\n", "locationsMap": { "basic": { "startLoc": { @@ -71323,17 +71265,17 @@ function MDXContent(_ref) { mdxType: "Story" })), Object(esm["b" /* mdx */])("p", null, "Take a look at the preview above. The row of modified ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/controls-button--button" + "href": "?path=/docs/components-button--button" }, "Buttons"), " has navigation managed by the ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/navigation-row--row" + "href": "?path=/docs/components-row--row" }, "Row"), " component, which is also wrapped in ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "withSelections"), ". Navigate with the arrow keys to see the ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "focus"), " state change for each ", Object(esm["b" /* mdx */])("a", { parentName: "p", - "href": "?path=/docs/controls-button--button" + "href": "?path=/docs/components-button--button" }, "Button"), ". Hit the ", Object(esm["b" /* mdx */])("inlineCode", { parentName: "p" }, "Enter"), " key to set the currently focused ", Object(esm["b" /* mdx */])("inlineCode", { @@ -71610,7 +71552,7 @@ function withSelections_stories_getPrototypeOf(o) { withSelections_stories_getPr /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { Button, Row } from '../../components';\\nimport withSelectionsMixin from '.';\\nimport mdx from './withSelections.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withSelections`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withSelections = () => {\\n class UnderlineButton extends Button {\\n get isSelected() {\\n return this._isSelected;\\n }\\n\\n set isSelected(v) {\\n this._whenEnabled.then(() => {\\n if (v !== this._isSelected) {\\n this._isSelected = v;\\n if (v) {\\n this.patch({\\n Line: {\\n rect: true,\\n color: 0xffffffff,\\n w: w => w,\\n h: 4,\\n y: h => h + 20\\n }\\n });\\n } else {\\n this.patch({\\n Line: undefined\\n });\\n }\\n }\\n });\\n }\\n }\\n\\n return class withSelections extends lng.Component {\\n static _template() {\\n return {\\n Items: {\\n type: withSelectionsMixin(Row),\\n y: 100,\\n items: [\\n {\\n type: UnderlineButton,\\n title: 'Left'\\n },\\n {\\n type: UnderlineButton,\\n title: 'Center',\\n x: 150\\n },\\n {\\n type: UnderlineButton,\\n title: 'Right',\\n x: 312\\n }\\n ]\\n },\\n Title: {\\n text: {}\\n }\\n };\\n }\\n\\n _firstEnable() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n\\n $onSelect() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n };\\n};\\n\\nwithSelections.storyName = 'withSelections';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withSelections\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":1,\"line\":103},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":1,\"line\":103}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { Button, Row } from '../../components';\nimport withSelectionsMixin from '.';\nimport mdx from './withSelections.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withSelections`,\n 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 { Button, Row } from '../../components';\\nimport withSelectionsMixin from '.';\\nimport mdx from './withSelections.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withSelections`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withSelections = () => {\\n class UnderlineButton extends Button {\\n get isSelected() {\\n return this._isSelected;\\n }\\n\\n set isSelected(v) {\\n this._whenEnabled.then(() => {\\n if (v !== this._isSelected) {\\n this._isSelected = v;\\n if (v) {\\n this.patch({\\n Line: {\\n rect: true,\\n color: 0xffffffff,\\n w: w => w,\\n h: 4,\\n y: h => h + 20\\n }\\n });\\n } else {\\n this.patch({\\n Line: undefined\\n });\\n }\\n }\\n });\\n }\\n }\\n\\n return class withSelections extends lng.Component {\\n static _template() {\\n return {\\n Items: {\\n type: withSelectionsMixin(Row),\\n y: 100,\\n items: [\\n {\\n type: UnderlineButton,\\n title: 'Left'\\n },\\n {\\n type: UnderlineButton,\\n title: 'Center',\\n x: 150\\n },\\n {\\n type: UnderlineButton,\\n title: 'Right',\\n x: 312\\n }\\n ]\\n },\\n Title: {\\n text: {}\\n }\\n };\\n }\\n\\n _firstEnable() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n\\n $onSelect() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n };\\n};\\n\\nwithSelections.storyName = 'withSelections';\\n\",\"locationsMap\":{\"with-selections\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":1,\"line\":103},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":1,\"line\":103}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withSelections = () => {\n class UnderlineButton extends Button {\n get isSelected() {\n return this._isSelected;\n }\n\n set isSelected(v) {\n this._whenEnabled.then(() => {\n if (v !== this._isSelected) {\n this._isSelected = v;\n if (v) {\n this.patch({\n Line: {\n rect: true,\n color: 0xffffffff,\n w: w => w,\n h: 4,\n y: h => h + 20\n }\n });\n } else {\n this.patch({\n Line: undefined\n });\n }\n }\n });\n }\n }\n\n return class withSelections extends lng.Component {\n static _template() {\n return {\n Items: {\n type: withSelectionsMixin(Row),\n y: 100,\n items: [\n {\n type: UnderlineButton,\n title: 'Left'\n },\n {\n type: UnderlineButton,\n title: 'Center',\n x: 150\n },\n {\n type: UnderlineButton,\n title: 'Right',\n x: 312\n }\n ]\n },\n Title: {\n text: {}\n }\n };\n }\n\n _firstEnable() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n\n $onSelect() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n };\n};\n\nwithSelections.storyName = 'withSelections';\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 { Button, Row } from '../../components';\\nimport withSelectionsMixin from '.';\\nimport mdx from './withSelections.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withSelections`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withSelections = () => {\\n class UnderlineButton extends Button {\\n get isSelected() {\\n return this._isSelected;\\n }\\n\\n set isSelected(v) {\\n this._whenEnabled.then(() => {\\n if (v !== this._isSelected) {\\n this._isSelected = v;\\n if (v) {\\n this.patch({\\n Line: {\\n rect: true,\\n color: 0xffffffff,\\n w: w => w,\\n h: 4,\\n y: h => h + 20\\n }\\n });\\n } else {\\n this.patch({\\n Line: undefined\\n });\\n }\\n }\\n });\\n }\\n }\\n\\n return class withSelections extends lng.Component {\\n static _template() {\\n return {\\n Items: {\\n type: withSelectionsMixin(Row),\\n y: 100,\\n items: [\\n {\\n type: UnderlineButton,\\n title: 'Left'\\n },\\n {\\n type: UnderlineButton,\\n title: 'Center',\\n x: 150\\n },\\n {\\n type: UnderlineButton,\\n title: 'Right',\\n x: 312\\n }\\n ]\\n },\\n Title: {\\n text: {}\\n }\\n };\\n }\\n\\n _firstEnable() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n\\n $onSelect() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n };\\n};\\n\\nwithSelections.storyName = 'withSelections';\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withSelections\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":1,\"line\":103},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":1,\"line\":103}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport { Button, Row } from '../../components';\nimport withSelectionsMixin from '.';\nimport mdx from './withSelections.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withSelections`,\n 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 { Button, Row } from '../../components';\\nimport withSelectionsMixin from '.';\\nimport mdx from './withSelections.mdx';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withSelections`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withSelections = () => {\\n class UnderlineButton extends Button {\\n get isSelected() {\\n return this._isSelected;\\n }\\n\\n set isSelected(v) {\\n this._whenEnabled.then(() => {\\n if (v !== this._isSelected) {\\n this._isSelected = v;\\n if (v) {\\n this.patch({\\n Line: {\\n rect: true,\\n color: 0xffffffff,\\n w: w => w,\\n h: 4,\\n y: h => h + 20\\n }\\n });\\n } else {\\n this.patch({\\n Line: undefined\\n });\\n }\\n }\\n });\\n }\\n }\\n\\n return class withSelections extends lng.Component {\\n static _template() {\\n return {\\n Items: {\\n type: withSelectionsMixin(Row),\\n y: 100,\\n items: [\\n {\\n type: UnderlineButton,\\n title: 'Left'\\n },\\n {\\n type: UnderlineButton,\\n title: 'Center',\\n x: 150\\n },\\n {\\n type: UnderlineButton,\\n title: 'Right',\\n x: 312\\n }\\n ]\\n },\\n Title: {\\n text: {}\\n }\\n };\\n }\\n\\n _firstEnable() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n\\n $onSelect() {\\n this.tag('Title').text.text =\\n 'Selected: ' + this.tag('Items').currentSelected.title;\\n }\\n };\\n};\\n\\nwithSelections.storyName = 'withSelections';\\n\",\"locationsMap\":{\"with-selections\":{\"startLoc\":{\"col\":30,\"line\":34},\"endLoc\":{\"col\":1,\"line\":103},\"startBody\":{\"col\":30,\"line\":34},\"endBody\":{\"col\":1,\"line\":103}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withSelections = () => {\n class UnderlineButton extends Button {\n get isSelected() {\n return this._isSelected;\n }\n\n set isSelected(v) {\n this._whenEnabled.then(() => {\n if (v !== this._isSelected) {\n this._isSelected = v;\n if (v) {\n this.patch({\n Line: {\n rect: true,\n color: 0xffffffff,\n w: w => w,\n h: 4,\n y: h => h + 20\n }\n });\n } else {\n this.patch({\n Line: undefined\n });\n }\n }\n });\n }\n }\n\n return class withSelections extends lng.Component {\n static _template() {\n return {\n Items: {\n type: withSelectionsMixin(Row),\n y: 100,\n items: [\n {\n type: UnderlineButton,\n title: 'Left'\n },\n {\n type: UnderlineButton,\n title: 'Center',\n x: 150\n },\n {\n type: UnderlineButton,\n title: 'Right',\n x: 312\n }\n ]\n },\n Title: {\n text: {}\n }\n };\n }\n\n _firstEnable() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n\n $onSelect() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n };\n};\n\nwithSelections.storyName = 'withSelections';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withSelections": { @@ -71636,7 +71578,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 { Button, Row } from '../../components';\nimport withSelectionsMixin from '.';\nimport mdx from './withSelections.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withSelections`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withSelections = () => {\n class UnderlineButton extends Button {\n get isSelected() {\n return this._isSelected;\n }\n\n set isSelected(v) {\n this._whenEnabled.then(() => {\n if (v !== this._isSelected) {\n this._isSelected = v;\n if (v) {\n this.patch({\n Line: {\n rect: true,\n color: 0xffffffff,\n w: w => w,\n h: 4,\n y: h => h + 20\n }\n });\n } else {\n this.patch({\n Line: undefined\n });\n }\n }\n });\n }\n }\n\n return class withSelections extends lng.Component {\n static _template() {\n return {\n Items: {\n type: withSelectionsMixin(Row),\n y: 100,\n items: [\n {\n type: UnderlineButton,\n title: 'Left'\n },\n {\n type: UnderlineButton,\n title: 'Center',\n x: 150\n },\n {\n type: UnderlineButton,\n title: 'Right',\n x: 312\n }\n ]\n },\n Title: {\n text: {}\n }\n };\n }\n\n _firstEnable() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n\n $onSelect() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n };\n};\n\nwithSelections.storyName = 'withSelections';\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 { Button, Row } from '../../components';\nimport withSelectionsMixin from '.';\nimport mdx from './withSelections.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withSelections`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withSelections = () => {\n class UnderlineButton extends Button {\n get isSelected() {\n return this._isSelected;\n }\n\n set isSelected(v) {\n this._whenEnabled.then(() => {\n if (v !== this._isSelected) {\n this._isSelected = v;\n if (v) {\n this.patch({\n Line: {\n rect: true,\n color: 0xffffffff,\n w: w => w,\n h: 4,\n y: h => h + 20\n }\n });\n } else {\n this.patch({\n Line: undefined\n });\n }\n }\n });\n }\n }\n\n return class withSelections extends lng.Component {\n static _template() {\n return {\n Items: {\n type: withSelectionsMixin(Row),\n y: 100,\n items: [\n {\n type: UnderlineButton,\n title: 'Left'\n },\n {\n type: UnderlineButton,\n title: 'Center',\n x: 150\n },\n {\n type: UnderlineButton,\n title: 'Right',\n x: 312\n }\n ]\n },\n Title: {\n text: {}\n }\n };\n }\n\n _firstEnable() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n\n $onSelect() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n };\n};\n\nwithSelections.storyName = 'withSelections';\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withSelections": { @@ -71683,10 +71625,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var withSelections_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withSelections", + title: constants["a" /* CATEGORIES */][4] + "/withSelections", 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 { Button, Row } from '../../components';\nimport withSelectionsMixin from '.';\nimport mdx from './withSelections.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withSelections`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withSelections = () => {\n class UnderlineButton extends Button {\n get isSelected() {\n return this._isSelected;\n }\n\n set isSelected(v) {\n this._whenEnabled.then(() => {\n if (v !== this._isSelected) {\n this._isSelected = v;\n if (v) {\n this.patch({\n Line: {\n rect: true,\n color: 0xffffffff,\n w: w => w,\n h: 4,\n y: h => h + 20\n }\n });\n } else {\n this.patch({\n Line: undefined\n });\n }\n }\n });\n }\n }\n\n return class withSelections extends lng.Component {\n static _template() {\n return {\n Items: {\n type: withSelectionsMixin(Row),\n y: 100,\n items: [\n {\n type: UnderlineButton,\n title: 'Left'\n },\n {\n type: UnderlineButton,\n title: 'Center',\n x: 150\n },\n {\n type: UnderlineButton,\n title: 'Right',\n x: 312\n }\n ]\n },\n Title: {\n text: {}\n }\n };\n }\n\n _firstEnable() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n\n $onSelect() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n };\n};\n\nwithSelections.storyName = 'withSelections';\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 { Button, Row } from '../../components';\nimport withSelectionsMixin from '.';\nimport mdx from './withSelections.mdx';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withSelections`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withSelections = () => {\n class UnderlineButton extends Button {\n get isSelected() {\n return this._isSelected;\n }\n\n set isSelected(v) {\n this._whenEnabled.then(() => {\n if (v !== this._isSelected) {\n this._isSelected = v;\n if (v) {\n this.patch({\n Line: {\n rect: true,\n color: 0xffffffff,\n w: w => w,\n h: 4,\n y: h => h + 20\n }\n });\n } else {\n this.patch({\n Line: undefined\n });\n }\n }\n });\n }\n }\n\n return class withSelections extends lng.Component {\n static _template() {\n return {\n Items: {\n type: withSelectionsMixin(Row),\n y: 100,\n items: [\n {\n type: UnderlineButton,\n title: 'Left'\n },\n {\n type: UnderlineButton,\n title: 'Center',\n x: 150\n },\n {\n type: UnderlineButton,\n title: 'Right',\n x: 312\n }\n ]\n },\n Title: {\n text: {}\n }\n };\n }\n\n _firstEnable() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n\n $onSelect() {\n this.tag('Title').text.text =\n 'Selected: ' + this.tag('Items').currentSelected.title;\n }\n };\n};\n\nwithSelections.storyName = 'withSelections';\n", "locationsMap": { "with-selections": { "startLoc": { @@ -72106,7 +72048,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withTags.mdx';\\nimport withTagsMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withTags`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withTags = () =>\\n class withTags extends withTagsMixin(lng.Component) {\\n static get tags() {\\n return ['Text'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {\\n text: {\\n text: 'This has a tag'\\n }\\n }\\n };\\n }\\n };\\n\\nwithTags.storyName = 'withTags';\\nwithTags.args = {};\\nwithTags.argTypes = {};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withTags\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":50}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withTags.mdx';\nimport withTagsMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withTags`,\n 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 mdx from './withTags.mdx';\\nimport withTagsMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withTags`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withTags = () =>\\n class withTags extends withTagsMixin(lng.Component) {\\n static get tags() {\\n return ['Text'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {\\n text: {\\n text: 'This has a tag'\\n }\\n }\\n };\\n }\\n };\\n\\nwithTags.storyName = 'withTags';\\nwithTags.args = {};\\nwithTags.argTypes = {};\\n\",\"locationsMap\":{\"with-tags\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":50}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withTags = () =>\n class withTags extends withTagsMixin(lng.Component) {\n static get tags() {\n return ['Text'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {\n text: {\n text: 'This has a tag'\n }\n }\n };\n }\n };\n\nwithTags.storyName = 'withTags';\nwithTags.args = {};\nwithTags.argTypes = {};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withTags.mdx';\\nimport withTagsMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withTags`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withTags = () =>\\n class withTags extends withTagsMixin(lng.Component) {\\n static get tags() {\\n return ['Text'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {\\n text: {\\n text: 'This has a tag'\\n }\\n }\\n };\\n }\\n };\\n\\nwithTags.storyName = 'withTags';\\nwithTags.args = {};\\nwithTags.argTypes = {};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withTags\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":50}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withTags.mdx';\nimport withTagsMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withTags`,\n 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 mdx from './withTags.mdx';\\nimport withTagsMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withTags`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withTags = () =>\\n class withTags extends withTagsMixin(lng.Component) {\\n static get tags() {\\n return ['Text'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {\\n text: {\\n text: 'This has a tag'\\n }\\n }\\n };\\n }\\n };\\n\\nwithTags.storyName = 'withTags';\\nwithTags.args = {};\\nwithTags.argTypes = {};\\n\",\"locationsMap\":{\"with-tags\":{\"startLoc\":{\"col\":24,\"line\":33},\"endLoc\":{\"col\":3,\"line\":50},\"startBody\":{\"col\":24,\"line\":33},\"endBody\":{\"col\":3,\"line\":50}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withTags = () =>\n class withTags extends withTagsMixin(lng.Component) {\n static get tags() {\n return ['Text'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {\n text: {\n text: 'This has a tag'\n }\n }\n };\n }\n };\n\nwithTags.storyName = 'withTags';\nwithTags.args = {};\nwithTags.argTypes = {};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withTags": { @@ -72132,7 +72074,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 mdx from './withTags.mdx';\nimport withTagsMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withTags`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withTags = () =>\n class withTags extends withTagsMixin(lng.Component) {\n static get tags() {\n return ['Text'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {\n text: {\n text: 'This has a tag'\n }\n }\n };\n }\n };\n\nwithTags.storyName = 'withTags';\nwithTags.args = {};\nwithTags.argTypes = {};\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 mdx from './withTags.mdx';\nimport withTagsMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withTags`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withTags = () =>\n class withTags extends withTagsMixin(lng.Component) {\n static get tags() {\n return ['Text'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {\n text: {\n text: 'This has a tag'\n }\n }\n };\n }\n };\n\nwithTags.storyName = 'withTags';\nwithTags.args = {};\nwithTags.argTypes = {};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withTags": { @@ -72178,10 +72120,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var withTags_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withTags", + title: constants["a" /* CATEGORIES */][4] + "/withTags", 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 mdx from './withTags.mdx';\nimport withTagsMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withTags`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withTags = () =>\n class withTags extends withTagsMixin(lng.Component) {\n static get tags() {\n return ['Text'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {\n text: {\n text: 'This has a tag'\n }\n }\n };\n }\n };\n\nwithTags.storyName = 'withTags';\nwithTags.args = {};\nwithTags.argTypes = {};\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 mdx from './withTags.mdx';\nimport withTagsMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withTags`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withTags = () =>\n class withTags extends withTagsMixin(lng.Component) {\n static get tags() {\n return ['Text'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {\n text: {\n text: 'This has a tag'\n }\n }\n };\n }\n };\n\nwithTags.storyName = 'withTags';\nwithTags.args = {};\nwithTags.argTypes = {};\n", "locationsMap": { "with-tags": { "startLoc": { @@ -73249,7 +73191,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withThemeStyles.mdx';\\nimport withThemeStylesMixin from './index.js';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { context } from '../../globals';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withThemeStyles`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withThemeStyles = () => {\\n const style = {\\n color: context.theme.color.fillNeutral\\n };\\n\\n class Box extends withThemeStylesMixin(lng.Component) {\\n static get __componentName() {\\n return 'Box';\\n }\\n\\n static get __themeStyle() {\\n return style;\\n }\\n\\n static _template() {\\n return {\\n Box: {\\n w: 150,\\n h: 150,\\n rect: true\\n }\\n };\\n }\\n\\n toggleColor(theme) {\\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\\n }\\n }\\n\\n return class withThemeStyles extends lng.Component {\\n static _template() {\\n return {\\n Box: {\\n type: Box\\n }\\n };\\n }\\n };\\n};\\n\\nwithThemeStyles.storyName = 'withThemeStyles';\\nwithThemeStyles.args = {\\n themeColor: true\\n};\\nwithThemeStyles.argTypes = {\\n themeColor: {\\n control: 'boolean',\\n description: 'Should the box use the color from the theme?',\\n table: {\\n defaultValue: { summary: withThemeStyles.args.themeColor }\\n }\\n }\\n};\\nwithThemeStyles.parameters = {\\n argActions: {\\n themeColor: (themeColor, component) => {\\n component.tag('Box').toggleColor(themeColor);\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withThemeStyles\":{\"startLoc\":{\"col\":31,\"line\":34},\"endLoc\":{\"col\":1,\"line\":72},\"startBody\":{\"col\":31,\"line\":34},\"endBody\":{\"col\":1,\"line\":72}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withThemeStyles.mdx';\nimport withThemeStylesMixin from './index.js';\nimport { CATEGORIES } from '../../docs/constants';\nimport { context } from '../../globals';\n\nexport default {\n title: `${CATEGORIES[512]}/withThemeStyles`,\n 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 mdx from './withThemeStyles.mdx';\\nimport withThemeStylesMixin from './index.js';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { context } from '../../globals';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withThemeStyles`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withThemeStyles = () => {\\n const style = {\\n color: context.theme.color.fillNeutral\\n };\\n\\n class Box extends withThemeStylesMixin(lng.Component) {\\n static get __componentName() {\\n return 'Box';\\n }\\n\\n static get __themeStyle() {\\n return style;\\n }\\n\\n static _template() {\\n return {\\n Box: {\\n w: 150,\\n h: 150,\\n rect: true\\n }\\n };\\n }\\n\\n toggleColor(theme) {\\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\\n }\\n }\\n\\n return class withThemeStyles extends lng.Component {\\n static _template() {\\n return {\\n Box: {\\n type: Box\\n }\\n };\\n }\\n };\\n};\\n\\nwithThemeStyles.storyName = 'withThemeStyles';\\nwithThemeStyles.args = {\\n themeColor: true\\n};\\nwithThemeStyles.argTypes = {\\n themeColor: {\\n control: 'boolean',\\n description: 'Should the box use the color from the theme?',\\n table: {\\n defaultValue: { summary: withThemeStyles.args.themeColor }\\n }\\n }\\n};\\nwithThemeStyles.parameters = {\\n argActions: {\\n themeColor: (themeColor, component) => {\\n component.tag('Box').toggleColor(themeColor);\\n }\\n }\\n};\\n\",\"locationsMap\":{\"with-theme-styles\":{\"startLoc\":{\"col\":31,\"line\":34},\"endLoc\":{\"col\":1,\"line\":72},\"startBody\":{\"col\":31,\"line\":34},\"endBody\":{\"col\":1,\"line\":72}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withThemeStyles = () => {\n const style = {\n color: context.theme.color.fillNeutral\n };\n\n class Box extends withThemeStylesMixin(lng.Component) {\n static get __componentName() {\n return 'Box';\n }\n\n static get __themeStyle() {\n return style;\n }\n\n static _template() {\n return {\n Box: {\n w: 150,\n h: 150,\n rect: true\n }\n };\n }\n\n toggleColor(theme) {\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\n }\n }\n\n return class withThemeStyles extends lng.Component {\n static _template() {\n return {\n Box: {\n type: Box\n }\n };\n }\n };\n};\n\nwithThemeStyles.storyName = 'withThemeStyles';\nwithThemeStyles.args = {\n themeColor: true\n};\nwithThemeStyles.argTypes = {\n themeColor: {\n control: 'boolean',\n description: 'Should the box use the color from the theme?',\n table: {\n defaultValue: { summary: withThemeStyles.args.themeColor }\n }\n }\n};\nwithThemeStyles.parameters = {\n argActions: {\n themeColor: (themeColor, component) => {\n component.tag('Box').toggleColor(themeColor);\n }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withThemeStyles.mdx';\\nimport withThemeStylesMixin from './index.js';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { context } from '../../globals';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withThemeStyles`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withThemeStyles = () => {\\n const style = {\\n color: context.theme.color.fillNeutral\\n };\\n\\n class Box extends withThemeStylesMixin(lng.Component) {\\n static get __componentName() {\\n return 'Box';\\n }\\n\\n static get __themeStyle() {\\n return style;\\n }\\n\\n static _template() {\\n return {\\n Box: {\\n w: 150,\\n h: 150,\\n rect: true\\n }\\n };\\n }\\n\\n toggleColor(theme) {\\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\\n }\\n }\\n\\n return class withThemeStyles extends lng.Component {\\n static _template() {\\n return {\\n Box: {\\n type: Box\\n }\\n };\\n }\\n };\\n};\\n\\nwithThemeStyles.storyName = 'withThemeStyles';\\nwithThemeStyles.args = {\\n themeColor: true\\n};\\nwithThemeStyles.argTypes = {\\n themeColor: {\\n control: 'boolean',\\n description: 'Should the box use the color from the theme?',\\n table: {\\n defaultValue: { summary: withThemeStyles.args.themeColor }\\n }\\n }\\n};\\nwithThemeStyles.parameters = {\\n argActions: {\\n themeColor: (themeColor, component) => {\\n component.tag('Box').toggleColor(themeColor);\\n }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withThemeStyles\":{\"startLoc\":{\"col\":31,\"line\":34},\"endLoc\":{\"col\":1,\"line\":72},\"startBody\":{\"col\":31,\"line\":34},\"endBody\":{\"col\":1,\"line\":72}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withThemeStyles.mdx';\nimport withThemeStylesMixin from './index.js';\nimport { CATEGORIES } from '../../docs/constants';\nimport { context } from '../../globals';\n\nexport default {\n title: `${CATEGORIES[4]}/withThemeStyles`,\n 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 mdx from './withThemeStyles.mdx';\\nimport withThemeStylesMixin from './index.js';\\nimport { CATEGORIES } from '../../docs/constants';\\nimport { context } from '../../globals';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withThemeStyles`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withThemeStyles = () => {\\n const style = {\\n color: context.theme.color.fillNeutral\\n };\\n\\n class Box extends withThemeStylesMixin(lng.Component) {\\n static get __componentName() {\\n return 'Box';\\n }\\n\\n static get __themeStyle() {\\n return style;\\n }\\n\\n static _template() {\\n return {\\n Box: {\\n w: 150,\\n h: 150,\\n rect: true\\n }\\n };\\n }\\n\\n toggleColor(theme) {\\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\\n }\\n }\\n\\n return class withThemeStyles extends lng.Component {\\n static _template() {\\n return {\\n Box: {\\n type: Box\\n }\\n };\\n }\\n };\\n};\\n\\nwithThemeStyles.storyName = 'withThemeStyles';\\nwithThemeStyles.args = {\\n themeColor: true\\n};\\nwithThemeStyles.argTypes = {\\n themeColor: {\\n control: 'boolean',\\n description: 'Should the box use the color from the theme?',\\n table: {\\n defaultValue: { summary: withThemeStyles.args.themeColor }\\n }\\n }\\n};\\nwithThemeStyles.parameters = {\\n argActions: {\\n themeColor: (themeColor, component) => {\\n component.tag('Box').toggleColor(themeColor);\\n }\\n }\\n};\\n\",\"locationsMap\":{\"with-theme-styles\":{\"startLoc\":{\"col\":31,\"line\":34},\"endLoc\":{\"col\":1,\"line\":72},\"startBody\":{\"col\":31,\"line\":34},\"endBody\":{\"col\":1,\"line\":72}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withThemeStyles = () => {\n const style = {\n color: context.theme.color.fillNeutral\n };\n\n class Box extends withThemeStylesMixin(lng.Component) {\n static get __componentName() {\n return 'Box';\n }\n\n static get __themeStyle() {\n return style;\n }\n\n static _template() {\n return {\n Box: {\n w: 150,\n h: 150,\n rect: true\n }\n };\n }\n\n toggleColor(theme) {\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\n }\n }\n\n return class withThemeStyles extends lng.Component {\n static _template() {\n return {\n Box: {\n type: Box\n }\n };\n }\n };\n};\n\nwithThemeStyles.storyName = 'withThemeStyles';\nwithThemeStyles.args = {\n themeColor: true\n};\nwithThemeStyles.argTypes = {\n themeColor: {\n control: 'boolean',\n description: 'Should the box use the color from the theme?',\n table: {\n defaultValue: { summary: withThemeStyles.args.themeColor }\n }\n }\n};\nwithThemeStyles.parameters = {\n argActions: {\n themeColor: (themeColor, component) => {\n component.tag('Box').toggleColor(themeColor);\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withThemeStyles": { @@ -73275,7 +73217,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 mdx from './withThemeStyles.mdx';\nimport withThemeStylesMixin from './index.js';\nimport { CATEGORIES } from '../../docs/constants';\nimport { context } from '../../globals';\n\nexport default {\n title: `${CATEGORIES[512]}/withThemeStyles`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withThemeStyles = () => {\n const style = {\n color: context.theme.color.fillNeutral\n };\n\n class Box extends withThemeStylesMixin(lng.Component) {\n static get __componentName() {\n return 'Box';\n }\n\n static get __themeStyle() {\n return style;\n }\n\n static _template() {\n return {\n Box: {\n w: 150,\n h: 150,\n rect: true\n }\n };\n }\n\n toggleColor(theme) {\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\n }\n }\n\n return class withThemeStyles extends lng.Component {\n static _template() {\n return {\n Box: {\n type: Box\n }\n };\n }\n };\n};\n\nwithThemeStyles.storyName = 'withThemeStyles';\nwithThemeStyles.args = {\n themeColor: true\n};\nwithThemeStyles.argTypes = {\n themeColor: {\n control: 'boolean',\n description: 'Should the box use the color from the theme?',\n table: {\n defaultValue: { summary: withThemeStyles.args.themeColor }\n }\n }\n};\nwithThemeStyles.parameters = {\n argActions: {\n themeColor: (themeColor, component) => {\n component.tag('Box').toggleColor(themeColor);\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 mdx from './withThemeStyles.mdx';\nimport withThemeStylesMixin from './index.js';\nimport { CATEGORIES } from '../../docs/constants';\nimport { context } from '../../globals';\n\nexport default {\n title: `${CATEGORIES[4]}/withThemeStyles`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withThemeStyles = () => {\n const style = {\n color: context.theme.color.fillNeutral\n };\n\n class Box extends withThemeStylesMixin(lng.Component) {\n static get __componentName() {\n return 'Box';\n }\n\n static get __themeStyle() {\n return style;\n }\n\n static _template() {\n return {\n Box: {\n w: 150,\n h: 150,\n rect: true\n }\n };\n }\n\n toggleColor(theme) {\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\n }\n }\n\n return class withThemeStyles extends lng.Component {\n static _template() {\n return {\n Box: {\n type: Box\n }\n };\n }\n };\n};\n\nwithThemeStyles.storyName = 'withThemeStyles';\nwithThemeStyles.args = {\n themeColor: true\n};\nwithThemeStyles.argTypes = {\n themeColor: {\n control: 'boolean',\n description: 'Should the box use the color from the theme?',\n table: {\n defaultValue: { summary: withThemeStyles.args.themeColor }\n }\n }\n};\nwithThemeStyles.parameters = {\n argActions: {\n themeColor: (themeColor, component) => {\n component.tag('Box').toggleColor(themeColor);\n }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withThemeStyles": { @@ -73322,10 +73264,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var withThemeStyles_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withThemeStyles", + title: constants["a" /* CATEGORIES */][4] + "/withThemeStyles", 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 mdx from './withThemeStyles.mdx';\nimport withThemeStylesMixin from './index.js';\nimport { CATEGORIES } from '../../docs/constants';\nimport { context } from '../../globals';\n\nexport default {\n title: `${CATEGORIES[512]}/withThemeStyles`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withThemeStyles = () => {\n const style = {\n color: context.theme.color.fillNeutral\n };\n\n class Box extends withThemeStylesMixin(lng.Component) {\n static get __componentName() {\n return 'Box';\n }\n\n static get __themeStyle() {\n return style;\n }\n\n static _template() {\n return {\n Box: {\n w: 150,\n h: 150,\n rect: true\n }\n };\n }\n\n toggleColor(theme) {\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\n }\n }\n\n return class withThemeStyles extends lng.Component {\n static _template() {\n return {\n Box: {\n type: Box\n }\n };\n }\n };\n};\n\nwithThemeStyles.storyName = 'withThemeStyles';\nwithThemeStyles.args = {\n themeColor: true\n};\nwithThemeStyles.argTypes = {\n themeColor: {\n control: 'boolean',\n description: 'Should the box use the color from the theme?',\n table: {\n defaultValue: { summary: withThemeStyles.args.themeColor }\n }\n }\n};\nwithThemeStyles.parameters = {\n argActions: {\n themeColor: (themeColor, component) => {\n component.tag('Box').toggleColor(themeColor);\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 mdx from './withThemeStyles.mdx';\nimport withThemeStylesMixin from './index.js';\nimport { CATEGORIES } from '../../docs/constants';\nimport { context } from '../../globals';\n\nexport default {\n title: `${CATEGORIES[4]}/withThemeStyles`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withThemeStyles = () => {\n const style = {\n color: context.theme.color.fillNeutral\n };\n\n class Box extends withThemeStylesMixin(lng.Component) {\n static get __componentName() {\n return 'Box';\n }\n\n static get __themeStyle() {\n return style;\n }\n\n static _template() {\n return {\n Box: {\n w: 150,\n h: 150,\n rect: true\n }\n };\n }\n\n toggleColor(theme) {\n this.tag('Box').color = theme ? this.style.color : 0xff0000ff;\n }\n }\n\n return class withThemeStyles extends lng.Component {\n static _template() {\n return {\n Box: {\n type: Box\n }\n };\n }\n };\n};\n\nwithThemeStyles.storyName = 'withThemeStyles';\nwithThemeStyles.args = {\n themeColor: true\n};\nwithThemeStyles.argTypes = {\n themeColor: {\n control: 'boolean',\n description: 'Should the box use the color from the theme?',\n table: {\n defaultValue: { summary: withThemeStyles.args.themeColor }\n }\n }\n};\nwithThemeStyles.parameters = {\n argActions: {\n themeColor: (themeColor, component) => {\n component.tag('Box').toggleColor(themeColor);\n }\n }\n};\n", "locationsMap": { "with-theme-styles": { "startLoc": { @@ -73860,7 +73802,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g /* eslint-disable */ // @ts-nocheck // @ts-ignore -var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withUpdates.mdx';\\nimport withUpdatesMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withUpdates`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withUpdates = args =>\\n class withUpdates extends withUpdatesMixin(lng.Component) {\\n static get properties() {\\n return ['title'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {}\\n };\\n }\\n\\n _init() {\\n this._title = args.title;\\n }\\n\\n _update() {\\n this.tag('Text').text = this.title;\\n }\\n\\n _setTitle(val) {\\n // Only gets called when title is set, not _title\\n return 'TITLE: ' + val;\\n }\\n };\\n\\nwithUpdates.storyName = 'withUpdates';\\n\\nwithUpdates.args = {\\n title: 'Default Title Value'\\n};\\n\\nwithUpdates.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withUpdates\":{\"startLoc\":{\"col\":27,\"line\":33},\"endLoc\":{\"col\":3,\"line\":59},\"startBody\":{\"col\":27,\"line\":33},\"endBody\":{\"col\":3,\"line\":59}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withUpdates.mdx';\nimport withUpdatesMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withUpdates`,\n 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 mdx from './withUpdates.mdx';\\nimport withUpdatesMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[512]}/withUpdates`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withUpdates = args =>\\n class withUpdates extends withUpdatesMixin(lng.Component) {\\n static get properties() {\\n return ['title'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {}\\n };\\n }\\n\\n _init() {\\n this._title = args.title;\\n }\\n\\n _update() {\\n this.tag('Text').text = this.title;\\n }\\n\\n _setTitle(val) {\\n // Only gets called when title is set, not _title\\n return 'TITLE: ' + val;\\n }\\n };\\n\\nwithUpdates.storyName = 'withUpdates';\\n\\nwithUpdates.args = {\\n title: 'Default Title Value'\\n};\\n\\nwithUpdates.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\",\"locationsMap\":{\"with-updates\":{\"startLoc\":{\"col\":27,\"line\":33},\"endLoc\":{\"col\":3,\"line\":59},\"startBody\":{\"col\":27,\"line\":33},\"endBody\":{\"col\":3,\"line\":59}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withUpdates = args =>\n class withUpdates extends withUpdatesMixin(lng.Component) {\n static get properties() {\n return ['title'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {}\n };\n }\n\n _init() {\n this._title = args.title;\n }\n\n _update() {\n this.tag('Text').text = this.title;\n }\n\n _setTitle(val) {\n // Only gets called when title is set, not _title\n return 'TITLE: ' + val;\n }\n };\n\nwithUpdates.storyName = 'withUpdates';\n\nwithUpdates.args = {\n title: 'Default Title Value'\n};\n\nwithUpdates.argTypes = {\n title: {\n control: 'text',\n description: 'Title text',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n"; +var __STORY__ = "\n \n // @ts-nocheck\n // @ts-ignore\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 mdx from './withUpdates.mdx';\\nimport withUpdatesMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withUpdates`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withUpdates = args =>\\n class withUpdates extends withUpdatesMixin(lng.Component) {\\n static get properties() {\\n return ['title'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {}\\n };\\n }\\n\\n _init() {\\n this._title = args.title;\\n }\\n\\n _update() {\\n this.tag('Text').text = this.title;\\n }\\n\\n _setTitle(val) {\\n // Only gets called when title is set, not _title\\n return 'TITLE: ' + val;\\n }\\n };\\n\\nwithUpdates.storyName = 'withUpdates';\\n\\nwithUpdates.args = {\\n title: 'Default Title Value'\\n};\\n\\nwithUpdates.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\";\n // @ts-ignore\n var __LOCATIONS_MAP__ = {\"withUpdates\":{\"startLoc\":{\"col\":27,\"line\":33},\"endLoc\":{\"col\":3,\"line\":59},\"startBody\":{\"col\":27,\"line\":33},\"endBody\":{\"col\":3,\"line\":59}}};\n \n/**\n * Copyright 2023 Comcast Cable Communications Management, LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport lng from '@lightningjs/core';\nimport mdx from './withUpdates.mdx';\nimport withUpdatesMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withUpdates`,\n 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 mdx from './withUpdates.mdx';\\nimport withUpdatesMixin from '.';\\nimport { CATEGORIES } from '../../docs/constants';\\n\\nexport default {\\n title: `${CATEGORIES[4]}/withUpdates`,\\n parameters: {\\n docs: {\\n page: mdx\\n }\\n }\\n};\\n\\nexport const withUpdates = args =>\\n class withUpdates extends withUpdatesMixin(lng.Component) {\\n static get properties() {\\n return ['title'];\\n }\\n\\n static _template() {\\n return {\\n x: 50,\\n y: 50,\\n Text: {}\\n };\\n }\\n\\n _init() {\\n this._title = args.title;\\n }\\n\\n _update() {\\n this.tag('Text').text = this.title;\\n }\\n\\n _setTitle(val) {\\n // Only gets called when title is set, not _title\\n return 'TITLE: ' + val;\\n }\\n };\\n\\nwithUpdates.storyName = 'withUpdates';\\n\\nwithUpdates.args = {\\n title: 'Default Title Value'\\n};\\n\\nwithUpdates.argTypes = {\\n title: {\\n control: 'text',\\n description: 'Title text',\\n table: { defaultValue: { summary: 'undefined' } }\\n }\\n};\\n\",\"locationsMap\":{\"with-updates\":{\"startLoc\":{\"col\":27,\"line\":33},\"endLoc\":{\"col\":3,\"line\":59},\"startBody\":{\"col\":27,\"line\":33},\"endBody\":{\"col\":3,\"line\":59}}}},\n docs: {\n page: mdx\n }\n },};\n\nexport const withUpdates = args =>\n class withUpdates extends withUpdatesMixin(lng.Component) {\n static get properties() {\n return ['title'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {}\n };\n }\n\n _init() {\n this._title = args.title;\n }\n\n _update() {\n this.tag('Text').text = this.title;\n }\n\n _setTitle(val) {\n // Only gets called when title is set, not _title\n return 'TITLE: ' + val;\n }\n };\n\nwithUpdates.storyName = 'withUpdates';\n\nwithUpdates.args = {\n title: 'Default Title Value'\n};\n\nwithUpdates.argTypes = {\n title: {\n control: 'text',\n description: 'Title text',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withUpdates": { @@ -73886,7 +73828,7 @@ var __LOCATIONS_MAP__ = { /* eslint-disable */ // @ts-nocheck // @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 mdx from './withUpdates.mdx';\nimport withUpdatesMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withUpdates`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withUpdates = args =>\n class withUpdates extends withUpdatesMixin(lng.Component) {\n static get properties() {\n return ['title'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {}\n };\n }\n\n _init() {\n this._title = args.title;\n }\n\n _update() {\n this.tag('Text').text = this.title;\n }\n\n _setTitle(val) {\n // Only gets called when title is set, not _title\n return 'TITLE: ' + val;\n }\n };\n\nwithUpdates.storyName = 'withUpdates';\n\nwithUpdates.args = {\n title: 'Default Title Value'\n};\n\nwithUpdates.argTypes = {\n title: {\n control: 'text',\n description: 'Title text',\n table: { defaultValue: { summary: 'undefined' } }\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 mdx from './withUpdates.mdx';\nimport withUpdatesMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withUpdates`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withUpdates = args =>\n class withUpdates extends withUpdatesMixin(lng.Component) {\n static get properties() {\n return ['title'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {}\n };\n }\n\n _init() {\n this._title = args.title;\n }\n\n _update() {\n this.tag('Text').text = this.title;\n }\n\n _setTitle(val) {\n // Only gets called when title is set, not _title\n return 'TITLE: ' + val;\n }\n };\n\nwithUpdates.storyName = 'withUpdates';\n\nwithUpdates.args = {\n title: 'Default Title Value'\n};\n\nwithUpdates.argTypes = {\n title: {\n control: 'text',\n description: 'Title text',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n"; // @ts-ignore var __LOCATIONS_MAP__ = { "withUpdates": { @@ -73932,10 +73874,10 @@ var __LOCATIONS_MAP__ = { /* harmony default export */ var withUpdates_stories = __webpack_exports__["default"] = ({ - title: constants["a" /* CATEGORIES */][512] + "/withUpdates", + title: constants["a" /* CATEGORIES */][4] + "/withUpdates", 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 mdx from './withUpdates.mdx';\nimport withUpdatesMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[512]}/withUpdates`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withUpdates = args =>\n class withUpdates extends withUpdatesMixin(lng.Component) {\n static get properties() {\n return ['title'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {}\n };\n }\n\n _init() {\n this._title = args.title;\n }\n\n _update() {\n this.tag('Text').text = this.title;\n }\n\n _setTitle(val) {\n // Only gets called when title is set, not _title\n return 'TITLE: ' + val;\n }\n };\n\nwithUpdates.storyName = 'withUpdates';\n\nwithUpdates.args = {\n title: 'Default Title Value'\n};\n\nwithUpdates.argTypes = {\n title: {\n control: 'text',\n description: 'Title text',\n table: { defaultValue: { summary: 'undefined' } }\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 mdx from './withUpdates.mdx';\nimport withUpdatesMixin from '.';\nimport { CATEGORIES } from '../../docs/constants';\n\nexport default {\n title: `${CATEGORIES[4]}/withUpdates`,\n parameters: {\n docs: {\n page: mdx\n }\n }\n};\n\nexport const withUpdates = args =>\n class withUpdates extends withUpdatesMixin(lng.Component) {\n static get properties() {\n return ['title'];\n }\n\n static _template() {\n return {\n x: 50,\n y: 50,\n Text: {}\n };\n }\n\n _init() {\n this._title = args.title;\n }\n\n _update() {\n this.tag('Text').text = this.title;\n }\n\n _setTitle(val) {\n // Only gets called when title is set, not _title\n return 'TITLE: ' + val;\n }\n };\n\nwithUpdates.storyName = 'withUpdates';\n\nwithUpdates.args = {\n title: 'Default Title Value'\n};\n\nwithUpdates.argTypes = {\n title: {\n control: 'text',\n description: 'Title text',\n table: { defaultValue: { summary: 'undefined' } }\n }\n};\n", "locationsMap": { "with-updates": { "startLoc": { @@ -74617,6 +74559,7 @@ var CustomImageTexture = /*#__PURE__*/function (_lng$Texture) { /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "t", function() { return max; }); /* unused harmony export createConditionalZContext */ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "x", function() { return watchForUpdates; }); +/* unused harmony export convertTextAlignToFlexJustify */ /* harmony import */ var _home_runner_work_Lightning_UI_Components_Lightning_UI_Components_node_modules_core_js_modules_es_date_now_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../../node_modules/core-js/modules/es.date.now.js"); /* harmony import */ var _home_runner_work_Lightning_UI_Components_Lightning_UI_Components_node_modules_core_js_modules_es_date_now_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_home_runner_work_Lightning_UI_Components_Lightning_UI_Components_node_modules_core_js_modules_es_date_now_js__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _home_runner_work_Lightning_UI_Components_Lightning_UI_Components_node_modules_core_js_modules_es_date_to_string_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../../node_modules/core-js/modules/es.date.to-string.js"); @@ -75505,6 +75448,28 @@ function watchForUpdates(_ref5) { }.bind(this); return element; } + +/** + * Given a Lightning text alignment option (left, right, center), + * return the Lightning flexbox equivalent. + * + * @param {string} align + * @returns {string} + */ +function convertTextAlignToFlexJustify(align) { + switch (align) { + case 'left': + return 'flex-start'; + case 'center': + return 'center'; + case 'right': + return 'flex-end'; + default: + // if there is no alignment passed in, the Lightning Text default is "left" + console.warn("Expected \"textAlign\" values are \"left,\" \"center,\" and \"right,\" but instead, " + align + " was received and will fall back to \"left.\""); + return 'flex-start'; + } +} var utils = { isMarkupString: isMarkupString, capitalizeFirstLetter: capitalizeFirstLetter, @@ -75531,7 +75496,8 @@ var utils = { getDimensions: getDimensions, getWidthByColumnSpan: getWidthByColumnSpan, createConditionalZContext: createConditionalZContext, - watchForUpdates: watchForUpdates + watchForUpdates: watchForUpdates, + convertTextAlignToFlexJustify: convertTextAlignToFlexJustify }; /* harmony default export */ __webpack_exports__["d"] = (utils); diff --git a/project.json b/project.json index 845e1323c..7423728e0 100644 --- a/project.json +++ b/project.json @@ -1 +1 @@ -{"generatedAt":1689865212240,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"3.2.3"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-interactions":{"version":"6.5.16"},"@storybook/addon-links":{"version":"6.5.16"},"@storybook/builder-webpack4":{"version":"6.5.16"},"@storybook/html":{"version":"6.5.16"},"@storybook/manager-webpack4":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/testing-library":{"version":"0.0.13"},"storybook":{"version":"6.5.16"}},"framework":{"name":"html"},"addons":{"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-storysource":{"version":"6.5.16"},"./addons":{"version":null},"storybook-addon-turbo-build":{"version":"1.1.0"}}} +{"generatedAt":1690493611450,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"3.2.3"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-interactions":{"version":"6.5.16"},"@storybook/addon-links":{"version":"6.5.16"},"@storybook/builder-webpack4":{"version":"6.5.16"},"@storybook/html":{"version":"6.5.16"},"@storybook/manager-webpack4":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/testing-library":{"version":"0.0.13"},"storybook":{"version":"6.5.16"}},"framework":{"name":"html"},"addons":{"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-storysource":{"version":"6.5.16"},"./addons":{"version":null},"storybook-addon-turbo-build":{"version":"1.1.0"}}}