@wavemaker/angular-codegen 12.0.0-next.45066 → 12.0.0-next.45067
Sign up to get free protection for your applications and to get access to all the features.
- angular-codegen/angular-app/package-lock.json +12 -12
- angular-codegen/angular-app/package.json +4 -4
- angular-codegen/dependencies/custom-widgets-bundle.cjs.js +422 -0
- angular-codegen/package.json +1 -1
- angular-codegen/src/gen-components.js +1 -1
- angular-codegen/src/pages-util.js +1 -1
- angular-codegen/templates/customwidget/customwidget.component.ts.hbs +0 -2
- angular-codegen/templates/page/page.module.ts.hbs +5 -0
- angular-codegen/dependencies/custom-widgets-m3/src/checkbox_set/checkbox_set.d.ts +0 -0
- angular-codegen/dependencies/custom-widgets-m3/src/checkbox_set/checkbox_set.js +0 -38
- angular-codegen/dependencies/custom-widgets-m3/src/checkbox_set/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/checkbox_set/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts +0 -25
- angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/discrete_slider.js +0 -208
- angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/divider/divider.d.ts +0 -4
- angular-codegen/dependencies/custom-widgets-m3/src/divider/divider.js +0 -42
- angular-codegen/dependencies/custom-widgets-m3/src/divider/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/divider/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/icon_button/icon_button.d.ts +0 -0
- angular-codegen/dependencies/custom-widgets-m3/src/icon_button/icon_button.js +0 -24
- angular-codegen/dependencies/custom-widgets-m3/src/icon_button/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/icon_button/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/input_chip/input_chip.d.ts +0 -0
- angular-codegen/dependencies/custom-widgets-m3/src/input_chip/input_chip.js +0 -34
- angular-codegen/dependencies/custom-widgets-m3/src/input_chip/input_chip.variables.d.ts +0 -0
- angular-codegen/dependencies/custom-widgets-m3/src/input_chip/input_chip.variables.js +0 -1
- angular-codegen/dependencies/custom-widgets-m3/src/input_chip/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/input_chip/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/payee_list/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/payee_list/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/payee_list/payee_list.d.ts +0 -0
- angular-codegen/dependencies/custom-widgets-m3/src/payee_list/payee_list.js +0 -19
- angular-codegen/dependencies/custom-widgets-m3/src/progressbar/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/progressbar/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/progressbar/progressbar.d.ts +0 -0
- angular-codegen/dependencies/custom-widgets-m3/src/progressbar/progressbar.js +0 -52
- angular-codegen/dependencies/custom-widgets-m3/src/radio_set/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/radio_set/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/radio_set/radio_set.d.ts +0 -0
- angular-codegen/dependencies/custom-widgets-m3/src/radio_set/radio_set.js +0 -35
- angular-codegen/dependencies/custom-widgets-m3/src/slider/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/slider/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/slider/slider.d.ts +0 -16
- angular-codegen/dependencies/custom-widgets-m3/src/slider/slider.js +0 -121
- angular-codegen/dependencies/custom-widgets-m3/src/switch_button/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/switch_button/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/switch_button/switch_button.d.ts +0 -6
- angular-codegen/dependencies/custom-widgets-m3/src/switch_button/switch_button.js +0 -103
- angular-codegen/dependencies/custom-widgets-m3/src/textfield/page.min.d.ts +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/textfield/page.min.js +0 -7
- angular-codegen/dependencies/custom-widgets-m3/src/textfield/textfield.d.ts +0 -4
- angular-codegen/dependencies/custom-widgets-m3/src/textfield/textfield.js +0 -65
- angular-codegen/dependencies/custom-widgets-m3/src/widget-registry.d.ts +0 -6
- angular-codegen/dependencies/custom-widgets-m3/src/widget-registry.js +0 -68
angular-codegen/package.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
const{createDir:createDir,writeFile:writeFile,isPrefabProject:isPrefabProject,getLayoutsDirPath:getLayoutsDirPath,getPagesDirPath:getPagesDirPath,formatContents:formatContents,getComponentName:getComponentName,getComponentModuleName:getComponentModuleName,getPrefabPagesDirPath:getPrefabPagesDirPath}=require("./wm-utils"),fs=require("fs"),cheerio=require("cheerio"),{getPageContents:getPageContents,getCustomWidgetPageContents:getCustomWidgetPageContents}=require("./pages-util"),{getHandlebarTemplate:getHandlebarTemplate,safeString:safeString}=require("./handlebar-helpers"),{generateCustomWidgetConfigFile:generateCustomWidgetConfigFile}=require("./gen-customwidget-config");let customWidgetConfigMap=new Map;const writeComponentHtmlFile=async(e,t,a)=>{const n=`${a}/${e}.component.html`;await writeFile(n,t.string)},writeComponentCssFile=async(e,t,a)=>{const n=`${a}/${e}.component.css`;await writeFile(n,t.string)},writeComponentVariablesFile=async(e,t,a,n)=>{let o=getHandlebarTemplate(e)({variables:a});await writeFile(`${n}/${t}.component.variables.ts`,formatContents(o))},writeComponentConfigFile=async(e,t,a,n)=>{let o=getHandlebarTemplate(e)({config:a});await writeFile(`${n}/${t}.component.config.ts`,formatContents(o))},writeComponentJsFile=async(e,t,a,n)=>{const o=getHandlebarTemplate(e)({jsContent:a});await writeFile(`${n}/${t}.component.script.js`,formatContents(o,"javascript"))},writeComponentExpressionsFile=async(e,t,a,n)=>{const o=getHandlebarTemplate(e)({expressions:a});await writeFile(`${n}/${t}.component.expressions.ts`,formatContents(o,"javascript"))},writeComponentTsFile=async(e,t,a,n,o,i,r=[])=>{let s=getHandlebarTemplate(e)({name:t,prefabName:a,componentName:getComponentName(t),enableSpa:o,layoutPages:safeString(JSON.stringify(i)),requiredWMComponents:r});await writeFile(`${n}/${t}.component.ts`,s)},writePagePartialModuleTsFile=async(e,t,a,n,o,i,r=!1,s,m,p,g)=>{let l=getHandlebarTemplate(e)({name:t,componentName:getComponentName(t),moduleName:getComponentModuleName(t),requiredPartials:n,requiredPrefabs:o,requiredWMComponents:i,hasCustomElement:r,insidePrefab:!!s,pagesConfig:m,securityConfig:p,requireCustomComponents:g});await writeFile(`${a}/${t}.module.ts`,l)},writePrefabModuleTsFile=async(e,t,a,n=!1,o)=>{let i=getHandlebarTemplate("prefab-module-ts")({name:e,componentName:getComponentName(e),moduleName:getComponentModuleName(e),requiredPartials:o,requiredWMComponents:a,hasCustomElement:n});await writeFile(`${t}/${e}.module.ts`,i)},generateComponent=async(e,t,a,n,o,i,r,s,m,p=!1)=>{await createDir(e,{recursive:!0});const{markup:g,styles:l,variables:c,script:u,expressions:d}=n,C=[writeComponentHtmlFile(t,safeString(g),e),writeComponentTsFile(o,t,a,e,s,m,n.requiredWMComponents)];return p||writeComponentExpressionsFile("component-expressions",t,safeString(d),e),r||C.concat([writeComponentCssFile(t,safeString(l),e),writeComponentVariablesFile("component-variables",t,safeString(c),e),writeComponentJsFile(i,t,safeString(u),e)]),Promise.all(C)},findRequiredPartials=e=>{const t={};return e("[partialContainer]").map((t,a)=>e(a).attr("content")).toArray().map(e=>({type:"PARTIAL",name:e.trim()})).filter(e=>!t[e.name]&&(t[e.name]=!0))},findRequiredPrefabs=e=>{const t={};return e("[wmPrefab]").map((t,a)=>e(a).attr("prefabname")).toArray().map(e=>({type:"PREFAB",name:e.trim()})).filter(e=>!t[e.name]&&(t[e.name]=!0))},findRequiredCustomWidgets=e=>{const t={};return e("[customWidgetContainer]").map((t,a)=>e(a).attr("widgetname")).toArray().map(e=>({type:"CUSTOMWIDGET",name:e.trim()})).filter(e=>!t[e.name]&&(t[e.name]=!0))},generateCustomWidgetsComponent=async(e,t,a,n)=>{let o,i,r,s;{if(s=`${t}/src/app/customwidgets/${e}`,o="customwidget-component-ts",i="customwidget-component-script",r="customwidget-module-ts",fs.existsSync(`${s}/${e}.component.ts`))return;const a="dependencies/custom-widgets-
|
1
|
+
const{createDir:createDir,writeFile:writeFile,isPrefabProject:isPrefabProject,getLayoutsDirPath:getLayoutsDirPath,getPagesDirPath:getPagesDirPath,formatContents:formatContents,getComponentName:getComponentName,getComponentModuleName:getComponentModuleName,getPrefabPagesDirPath:getPrefabPagesDirPath}=require("./wm-utils"),fs=require("fs"),cheerio=require("cheerio"),{getPageContents:getPageContents,getCustomWidgetPageContents:getCustomWidgetPageContents}=require("./pages-util"),{getHandlebarTemplate:getHandlebarTemplate,safeString:safeString}=require("./handlebar-helpers"),{generateCustomWidgetConfigFile:generateCustomWidgetConfigFile}=require("./gen-customwidget-config");let customWidgetConfigMap=new Map;const writeComponentHtmlFile=async(e,t,a)=>{const n=`${a}/${e}.component.html`;await writeFile(n,t.string)},writeComponentCssFile=async(e,t,a)=>{const n=`${a}/${e}.component.css`;await writeFile(n,t.string)},writeComponentVariablesFile=async(e,t,a,n)=>{let o=getHandlebarTemplate(e)({variables:a});await writeFile(`${n}/${t}.component.variables.ts`,formatContents(o))},writeComponentConfigFile=async(e,t,a,n)=>{let o=getHandlebarTemplate(e)({config:a});await writeFile(`${n}/${t}.component.config.ts`,formatContents(o))},writeComponentJsFile=async(e,t,a,n)=>{const o=getHandlebarTemplate(e)({jsContent:a});await writeFile(`${n}/${t}.component.script.js`,formatContents(o,"javascript"))},writeComponentExpressionsFile=async(e,t,a,n)=>{const o=getHandlebarTemplate(e)({expressions:a});await writeFile(`${n}/${t}.component.expressions.ts`,formatContents(o,"javascript"))},writeComponentTsFile=async(e,t,a,n,o,i,r=[])=>{let s=getHandlebarTemplate(e)({name:t,prefabName:a,componentName:getComponentName(t),enableSpa:o,layoutPages:safeString(JSON.stringify(i)),requiredWMComponents:r});await writeFile(`${n}/${t}.component.ts`,s)},writePagePartialModuleTsFile=async(e,t,a,n,o,i,r=!1,s,m,p,g)=>{let l=getHandlebarTemplate(e)({name:t,componentName:getComponentName(t),moduleName:getComponentModuleName(t),requiredPartials:n,requiredPrefabs:o,requiredWMComponents:i,hasCustomElement:r,insidePrefab:!!s,pagesConfig:m,securityConfig:p,requireCustomComponents:g});await writeFile(`${a}/${t}.module.ts`,l)},writePrefabModuleTsFile=async(e,t,a,n=!1,o)=>{let i=getHandlebarTemplate("prefab-module-ts")({name:e,componentName:getComponentName(e),moduleName:getComponentModuleName(e),requiredPartials:o,requiredWMComponents:a,hasCustomElement:n});await writeFile(`${t}/${e}.module.ts`,i)},generateComponent=async(e,t,a,n,o,i,r,s,m,p=!1)=>{await createDir(e,{recursive:!0});const{markup:g,styles:l,variables:c,script:u,expressions:d}=n,C=[writeComponentHtmlFile(t,safeString(g),e),writeComponentTsFile(o,t,a,e,s,m,n.requiredWMComponents)];return p||writeComponentExpressionsFile("component-expressions",t,safeString(d),e),r||C.concat([writeComponentCssFile(t,safeString(l),e),writeComponentVariablesFile("component-variables",t,safeString(c),e),writeComponentJsFile(i,t,safeString(u),e)]),Promise.all(C)},findRequiredPartials=e=>{const t={};return e("[partialContainer]").map((t,a)=>e(a).attr("content")).toArray().map(e=>({type:"PARTIAL",name:e.trim()})).filter(e=>!t[e.name]&&(t[e.name]=!0))},findRequiredPrefabs=e=>{const t={};return e("[wmPrefab]").map((t,a)=>e(a).attr("prefabname")).toArray().map(e=>({type:"PREFAB",name:e.trim()})).filter(e=>!t[e.name]&&(t[e.name]=!0))},findRequiredCustomWidgets=e=>{const t={};return e("[customWidgetContainer]").map((t,a)=>e(a).attr("widgetname")).toArray().map(e=>({type:"CUSTOMWIDGET",name:e.trim()})).filter(e=>!t[e.name]&&(t[e.name]=!0))},generateCustomWidgetsComponent=async(e,t,a,n)=>{let o,i,r,s;{if(s=`${t}/src/app/customwidgets/${e}`,o="customwidget-component-ts",i="customwidget-component-script",r="customwidget-module-ts",fs.existsSync(`${s}/${e}.component.ts`))return;const a=require("../dependencies/custom-widgets-bundle.cjs.js"),m=await getCustomWidgetPageContents(a,e);n.set(e,m.config);try{const t=cheerio.load(m.markup);findRequiredPartials(t),findRequiredPrefabs(t);await generateComponent(s,e,void 0,m,"customwidget-component-ts","customwidget-component-script",!1,void 0,void 0,!0)}catch(e){throw console.log("failed in "+pageName),e}}};convertHTMLStructure=(e=>{return e.replace(/<div\s+wmWidgetContainer\s+customWidgetContainer\s+#wm_custom_widget\d+="wmWidgetContainer"\s+widgetname="([^"]+)"\s+name="([^"]+)"\s*(.*?)\s*\/?>\s*<\/div>/g,(e,t,a,n)=>{let o;return`<${o=`app-custom-${t}`} wmWidgetContainer #wm_custom_widget${a.match(/\d+/)[0]}="wmWidgetContainer" widgetname="${t}" name="${a}" ${n}></${o}>`})});const generatePagePartialComponent=async(e,t,a,n,o,i,r,s,m,p,g,l)=>{let c,u,d,C,f;if("PAGE"===n?(C=`${o}/src/app/pages/${a}`,c="page-component-ts",u="page-component-script",d="page-module-ts"):"LAYOUT"===n?(C=`${o}/src/app/layouts/${a}`,c="layout-component-ts",d="layout-module-ts",f=p.filter(e=>"PAGE"===e.type&&e.layout===a).map(e=>e.name)):(C=i?`${o}/partials/${a}`:`${o}/src/app/partials/${a}`,c="partial-component-ts",u="partial-component-script",d="partial-module-ts"),fs.existsSync(`${C}/${a}.component.ts`))return;let w=`${e}/${a}`;i&&(w=`${getPrefabPagesDirPath(r,i)}/${a}`);const P=await getPageContents(t,w,`${a}`,a,n,void 0,s);try{const e=cheerio.load(P.markup),l=findRequiredPartials(e),w=findRequiredPrefabs(e),$=findRequiredCustomWidgets(e)||void 0;for(const e of l){const a=getPagesDirPath(r);await generatePagePartialComponent(a,t,e.name,e.type,o,i,r,s,m)}for(const e of $)await generateCustomWidgetsComponent(e.name,o,0,customWidgetConfigMap);$.length&&await generateCustomWidgetConfigFile(customWidgetConfigMap,o),P.markup=convertHTMLStructure(P.markup),await generateComponent(C,a,void 0,P,c,u,"LAYOUT"===n,m,f),await writePagePartialModuleTsFile(d,a,C,l,w,P.requiredWMComponents,P.hasCustomElement,i,p,g,$)}catch(e){throw console.log("failed in "+a),e}},generateComponents=async(e,t,a,n,o,i,r,s,m,p)=>{const g=getPagesDirPath(e);customWidgetConfigMap=new Map;for(const a of i.keys()){const n="__self__"===a?`${g}/Main`:`${getPrefabPagesDirPath(e,a)}/Main`,o=await getPageContents(t,n,"Main",a,"PREFAB",i.get(a),m),c=`${r}/src/app/prefabs/${a}`,u=cheerio.load(o.markup),d=findRequiredPartials(u);await generateComponent(c,a,a,o,"prefab-component-ts","prefab-component-script",!1,p);const C=s[a];for(var l=0;l<C.length;l++)await generatePagePartialComponent(g,t,C[l].name,C[l].type,c,a,e,m,p);await writePrefabModuleTsFile(a,c,o.requiredWMComponents,o.hasCustomElement,d)}if(!isPrefabProject(t)){if(p){const i=getLayoutsDirPath(e);for(let s of a)await generateLayoutComponent(i,t,s.name,s.type,r,s.prefabName,e,m,p,n,o)}for(let a of n)await generatePagePartialComponent(g,t,a.name,a.type,r,a.prefabName,e,m,p)}},generateLayoutComponent=async(e,t,a,n,o,i,r,s,m,p,g)=>{await generatePagePartialComponent(e,t,a,n,o,i,r,s,m,p,g)};module.exports={generateComponents:generateComponents,generatePagePartialComponent:generatePagePartialComponent};
|
@@ -1 +1 @@
|
|
1
|
-
global.$=require("jquery"),global._=require("lodash"),global._WM_APP_PROPERTIES={};const cheerio=require("cheerio"),{generatePageExpressions:generatePageExpressions}=require("./expr-parser-utils"),{readFile:readFile,isMobileProject:isMobileProject}=require("./wm-utils"),{config:config}=require("yargs"),nodePolyfill=require("node-window-polyfill").register(!1),getRequiredScripts=e=>{const t={wmCalendar:["./node_modules/fullcalendar/main.min.js"],wmChart:["./node_modules/d3/dist/d3.min.js","./node_modules/@wavemaker/nvd3/build/nv.d3.min.js"],wmChips:["./node_modules/jquery-ui/ui/widgets/sortable.js"],wmList:["./node_modules/jquery-ui/ui/widgets/droppable.js","./node_modules/jquery-ui/ui/widgets/sortable.js"],wmRichtexteditor:["./node_modules/summernote/dist/summernote-lite.min.js"],wmTable:[global._WM_PACKAGE_PATH+"/scripts/datatable/datatable.js","./node_modules/jquery-ui/ui/widgets/resizable.js"]};let o=[];return _.each(t,(t,r)=>{e("["+r+"]").length>0&&(o=o.concat(t))}),o=o.map(e=>e.replace(/^(\.\/)/,"").replace(/\//g,"-").replace(/@/g,"")),_.uniq(o)},includesCustomElement=e=>{return cheerio.load(e)('[html-custom-element="true"]').length},_decodeURIComponent=e=>decodeURIComponent(e.replace(/\+/g," ")),getCustomWidgetPageContents=async(e,t)=>{try{
|
1
|
+
global.$=require("jquery"),global._=require("lodash"),global._WM_APP_PROPERTIES={};const cheerio=require("cheerio"),{generatePageExpressions:generatePageExpressions}=require("./expr-parser-utils"),{readFile:readFile,isMobileProject:isMobileProject}=require("./wm-utils"),{config:config}=require("yargs"),nodePolyfill=require("node-window-polyfill").register(!1),getRequiredScripts=e=>{const t={wmCalendar:["./node_modules/fullcalendar/main.min.js"],wmChart:["./node_modules/d3/dist/d3.min.js","./node_modules/@wavemaker/nvd3/build/nv.d3.min.js"],wmChips:["./node_modules/jquery-ui/ui/widgets/sortable.js"],wmList:["./node_modules/jquery-ui/ui/widgets/droppable.js","./node_modules/jquery-ui/ui/widgets/sortable.js"],wmRichtexteditor:["./node_modules/summernote/dist/summernote-lite.min.js"],wmTable:[global._WM_PACKAGE_PATH+"/scripts/datatable/datatable.js","./node_modules/jquery-ui/ui/widgets/resizable.js"]};let o=[];return _.each(t,(t,r)=>{e("["+r+"]").length>0&&(o=o.concat(t))}),o=o.map(e=>e.replace(/^(\.\/)/,"").replace(/\//g,"-").replace(/@/g,"")),_.uniq(o)},includesCustomElement=e=>{return cheerio.load(e)('[html-custom-element="true"]').length},_decodeURIComponent=e=>decodeURIComponent(e.replace(/\+/g," ")),getCustomWidgetPageContents=async(e,t)=>{try{jsonObject=e[t],styles=_decodeURIComponent(jsonObject.styles),variables=_decodeURIComponent(jsonObject.variables),markup=_decodeURIComponent(jsonObject.markup),script=_decodeURIComponent(jsonObject.script),configJson=_decodeURIComponent(jsonObject.config);let o=require("../dependencies/transpilation-web.cjs");const r=o.transpile(markup);return{markup:r.markup,script:script,styles:o.scopeComponentStyles(t,"WIDGET",styles),variables:variables,requiredWMComponents:r.requiredWMComponents.filter(e=>!e.platformType||"APPLICATION"===e.platformType),config:configJson}}catch(e){throw console.error(`error occurred in transpilation of ${t}`,e),e}},getPageContents=async(e,t,o,r,s,n,i)=>{try{const a=`${t}/${o}`,l=await readFile(`${a}.html`,"utf8");let d,u,c,p="{}";"LAYOUT"!==s&&(d=await readFile(`${a}.js`,"utf8"),u=await readFile(`${a}.css`,"utf8"),p=await readFile(`${a}.variables.json`,"utf8")),global._WM_APP_PROPERTIES=e,window=window||{},window._WM_APP_PROPERTIES=e;const m=(c=isMobileProject(e)?require("../dependencies/transpilation-mobile.cjs"):require("../dependencies/transpilation-web.cjs")).transpile(l),g=cheerio.load(m.markup),j=getRequiredScripts(g);return j.length>0&&(m.markup=m.markup.replace(">",` scripts-to-load="${j.join(",")}">`)),{markup:m.markup,script:d,styles:c.scopeComponentStyles(r,s,u),variables:p,expressions:i?generatePageExpressions(m.markup,p,n):"",requiredWMComponents:m.requiredWMComponents.filter(t=>!t.platformType||t.platformType===e.platformType),hasCustomElement:includesCustomElement(l)}}catch(e){throw console.error(`error occurred in transpilation of ${o}`,e),e}};module.exports={getPageContents:getPageContents,getCustomWidgetPageContents:getCustomWidgetPageContents};
|
@@ -5,7 +5,6 @@ import { UserDefinedExecutionContext } from '@wm/core';
|
|
5
5
|
import { initScript } from './{{name}}.component.script';
|
6
6
|
import { getVariables } from './{{name}}.component.variables';
|
7
7
|
import { AppRef, BaseCustomWidgetComponent } from '@wm/runtime/base';
|
8
|
-
import { initCustomWidgetConfig } from '../customwidget-config'
|
9
8
|
{{WMComponentsImportStmts requiredWMComponents}}
|
10
9
|
|
11
10
|
@Component({
|
@@ -31,7 +30,6 @@ export class {{componentName}} extends BaseCustomWidgetComponent {
|
|
31
30
|
constructor() {
|
32
31
|
super();
|
33
32
|
super.init();
|
34
|
-
initCustomWidgetConfig();
|
35
33
|
}
|
36
34
|
|
37
35
|
getVariables() {
|
@@ -5,6 +5,11 @@ import { Routes, RouterModule } from '@angular/router';
|
|
5
5
|
import { RuntimeBaseModule, CanDeactivateNgPageGuard } from '@wm/runtime/base';
|
6
6
|
{{WMComponentsImportStmts requiredWMComponents}}
|
7
7
|
{{WMCustomComponentsImportStmts requireCustomComponents}}
|
8
|
+
{{#if
|
9
|
+
requireCustomComponents}}
|
10
|
+
import { initCustomWidgetConfig } from '../../customwidgets/customwidget-config';
|
11
|
+
initCustomWidgetConfig();
|
12
|
+
{{/if}}
|
8
13
|
|
9
14
|
import { AppCodeGenModule } from '../../app-codegen.module';
|
10
15
|
|
File without changes
|
@@ -1,38 +0,0 @@
|
|
1
|
-
/*
|
2
|
-
* Use App.getDependency for Dependency Injection
|
3
|
-
* eg: var DialogService = App.getDependency('DialogService');
|
4
|
-
*/
|
5
|
-
/* perform any action on widgets/variables within this block */
|
6
|
-
Widget.onReady = function () {
|
7
|
-
/*
|
8
|
-
* variables can be accessed through 'Widget.Variables' property here
|
9
|
-
* e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
|
10
|
-
* Widget.Variables.loggedInUser.getData()
|
11
|
-
*
|
12
|
-
* widgets can be accessed through 'Widget.Widgets' property here
|
13
|
-
* e.g. to get value of text widget named 'username' use following script
|
14
|
-
* 'Widget.Widgets.username.datavalue'
|
15
|
-
*/
|
16
|
-
if (Widget.props.show_intermediate.toString().toLowerCase() === 'true') {
|
17
|
-
Widget.Widgets.checkboxset.class += ' intermediate-checkbox';
|
18
|
-
}
|
19
|
-
if (Widget.props.layout === "horizontal") {
|
20
|
-
Widget.Widgets.checkboxset.class += ' horizontal';
|
21
|
-
}
|
22
|
-
else {
|
23
|
-
Widget.Widgets.checkboxset.class += ' vertical';
|
24
|
-
}
|
25
|
-
if (Widget.props.label_placement === "top") {
|
26
|
-
Widget.Widgets.checkboxset.class += ' top-placement';
|
27
|
-
}
|
28
|
-
else if (Widget.props.label_placement === "bottom") {
|
29
|
-
Widget.Widgets.checkboxset.class += ' bottom-placement';
|
30
|
-
}
|
31
|
-
else if (Widget.props.label_placement === "start") {
|
32
|
-
Widget.Widgets.checkboxset.class += ' start-placement';
|
33
|
-
}
|
34
|
-
else {
|
35
|
-
Widget.Widgets.checkboxset.class += '';
|
36
|
-
}
|
37
|
-
Widget.Widgets.composite.required = Widget.props.required;
|
38
|
-
};
|
@@ -1,7 +0,0 @@
|
|
1
|
-
export var checkbox_set = {
|
2
|
-
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22%3E%0A++++++++%3Cwm-label+class%3D%22+control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22%3E%0A++++++++++++%3Cwm-checkboxset+height%3D%22auto%22+name%3D%22checkboxset%22+dataset%3D%22bind%3Aprops.data_set%22+datafield%3D%22All+Fields%22+disabled%3D%22bind%3Aprops.state+%3D%3D+%26quot%3BDisabled%26quot%3B%22+required%3D%22bind%3Aprops.required%22+datavalue%3D%22bind%3Aprops.default_value%22%3E%3C%2Fwm-checkboxset%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
3
|
-
script: "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A++++if+%28Widget.props.show_intermediate.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+intermediate-checkbox%27%3B%0A++++%7D%0A%0A++++if+%28Widget.props.layout+%3D%3D%3D+%22horizontal%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+horizontal%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+vertical%27%3B%0A++++%7D%0A++++if+%28Widget.props.label_placement+%3D%3D%3D+%22top%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+top-placement%27%3B%0A++++%7D+else+if+%28Widget.props.label_placement+%3D%3D%3D+%22bottom%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+bottom-placement%27%3B%0A++++%7D+else+if+%28Widget.props.label_placement+%3D%3D%3D+%22start%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+start-placement%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27%27%3B%0A++++%7D%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A%7D%3B",
|
4
|
-
styles: ".app-checkboxset.vertical+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-checkboxset.intermediate-checkbox+.app-checkboxset-label%3E.caption%3A%3Aafter+%7B%0A++++top%3A+calc%28100%25+-+25px%29%3B%0A++++height%3A+0px%3B%0A++++transform%3A+translate%283px%2C+4px%29+rotate%280deg%29+%21important%3B%0A%7D%0A%0A%0A%2F*+start+label+placement+styles++*%2F%0A%0A.app-checkboxset.horizontal.start-placement+.app-checkboxset-label%3E.caption%2C%0A.app-checkboxset.vertical.start-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-right%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.checkbox%3Elabel+.caption%3Abefore%2C%0A.app-checkboxset.vertical.start-placement+.checkbox%3Elabel+.caption%3Abefore+%7B%0A++++left%3A+unset%3B%0A++++right%3A+1px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.checkbox%3Elabel+.caption%3Aafter%2C%0A.app-checkboxset.vertical.start-placement+.checkbox%3Elabel+.caption%3Aafter+%7B%0A++++left%3A+unset%3B%0A++++right%3A+7px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2C%0A.app-checkboxset.vertical.start-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+unset%3B%0A++++right%3A+-10px%3B%0A%7D%0A%0A%0A%2F*+top+label+placement+styles++*%2F%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+32px%3B%0A++++min-width%3A+20px%3B%0A++++justify-content%3A+center%3B%0A++++display%3A+inline-flex%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A++++top%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+32px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+21px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+%7B%0A++++display%3A+flex%3B%0A++++min-width%3A+40px%3B%0A++++max-width%3A+max-content%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-checkboxset.vertical.top-placement%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A%7D%0A%0A%0A%2F*+bottom+label+placement+style++*%2F%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-top%3A+32px%3B%0A++++min-width%3A+20px%3B%0A++++justify-content%3A+center%3B%0A++++display%3A+inline-flex%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A++++top%3A+8px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+8px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+-2px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+%7B%0A++++display%3A+flex%3B%0A++++min-width%3A+40px%3B%0A++++max-width%3A+max-content%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-checkboxset.vertical.bottom-placement%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.horizontal.intermediate-checkbox+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.vertical+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.vertical.intermediate-checkbox+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3A%3Abefore+%7B%0A++++border-color%3A+var%28--wm-checkbox-border-color%29%3B%0A++++background-color%3A+var%28--wm-checkbox-border-color%29%3B%0A%7D",
|
5
|
-
variables: "%7B+%7D",
|
6
|
-
config: "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Layout%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20orientation%20of%20the%20element.%20%27horizontal%27%20indicates%20that%20the%20element%27s%20layout%20or%20behavior%20is%20aligned%20along%20the%20horizontal%20axis%20(left%20to%20right)%2C%20while%20%27vertical%27%20means%20the%20element%20is%20aligned%20along%20the%20vertical%20axis%20(top%20to%20bottom)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%22%2C%20%22vertical%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_intermediate%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Intermediate%20checkbox%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Controls%20whether%20the%20checkbox%20shows%20an%20indeterminate%20state.%20True%20displays%20the%20intermediate%20state%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_placement%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20placement%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20label%27s%20position%20relative%20to%20the%20component%2C%20with%20options%3A%20%27top%27%20(Label%20appears%20above%20the%20component)%2C%20%27bottom%27%20(Label%20appears%20below%20the%20component)%2C%20%27start%27%20(Label%20appears%20left%20of%20the%20component)%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22top%22%2C%20%22bottom%22%2C%20%22start%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22top%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20checkboxSet%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22data_set%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Data%20Set%20values%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20list%20of%20labels%20such%20as%20%27yes%27%2C%20%27no%27%2C%20%27maybe%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22default_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20%27yes%27%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20checkboxSet%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A",
|
7
|
-
};
|
@@ -1,25 +0,0 @@
|
|
1
|
-
declare function initializeSlider(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any, required: any): void;
|
2
|
-
declare function updateSlider(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
|
3
|
-
declare function updateSliderStep(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
|
4
|
-
declare function setRequired(widgetMap: any, required: any): void;
|
5
|
-
declare function appendSliderIndicator(slider: any): void;
|
6
|
-
declare function configureSliderAndSetStyles(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
|
7
|
-
declare function updateSliderStyles(slider: any, value: any, minValue: any, maxValue: any): void;
|
8
|
-
declare function setupStepsAndLabels(widgetMap: any): void;
|
9
|
-
declare function createStepLabel(labelValue: any, minValue: any, maxValue: any): HTMLParagraphElement;
|
10
|
-
declare function updateLabelVisibility(widgetMap: any): void;
|
11
|
-
declare function getSliderPercentage(value: any, minValue: any, maxValue: any): number;
|
12
|
-
declare function getSliderPercentage(value: any): number;
|
13
|
-
declare function clamp(value: any, minValue: any, maxValue: any): number;
|
14
|
-
declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
|
15
|
-
declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
|
16
|
-
declare function toggleIconsVisibility(showIconsBool: any, iconActionsBool: any, widgetMap: any): void;
|
17
|
-
declare function toggleIconsVisibility(showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any, widgetMap: any): void;
|
18
|
-
declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
|
19
|
-
declare function updateStartIconVisibility(iconActionsBool: any, widgetMap: any): void;
|
20
|
-
declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
|
21
|
-
declare function updateEndIconVisibility(iconActionsBool: any, widgetMap: any): void;
|
22
|
-
declare function moveSlider(direction: any, widgetMap: any): void;
|
23
|
-
declare function moveSlider(direction: any, widgetMap: any): void;
|
24
|
-
declare function convertToBoolean(value: any): boolean;
|
25
|
-
declare function convertToBoolean(value: any): boolean;
|
@@ -1,208 +0,0 @@
|
|
1
|
-
Widget.onPropertyChange = function (propName, newValue, oldValue) {
|
2
|
-
var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions, start_icon = _a.start_icon, end_icon = _a.end_icon;
|
3
|
-
var widgetMap = Widget.Widgets;
|
4
|
-
var showIconsBool = convertToBoolean(show_icons);
|
5
|
-
var showLabelsBool = convertToBoolean(show_labels);
|
6
|
-
var iconActionsBool = convertToBoolean(icon_actions);
|
7
|
-
switch (propName) {
|
8
|
-
case 'prop-value':
|
9
|
-
case 'prop-min_value':
|
10
|
-
case 'prop-max_value':
|
11
|
-
updateSlider(widgetMap, value, min_value, max_value, step_value);
|
12
|
-
break;
|
13
|
-
case 'prop-step_value':
|
14
|
-
updateSliderStep(widgetMap, value, min_value, max_value, step_value);
|
15
|
-
break;
|
16
|
-
case 'prop-required':
|
17
|
-
setRequired(widgetMap, required);
|
18
|
-
break;
|
19
|
-
case "prop-show_labels":
|
20
|
-
toggleLabelVisibilty(showLabelsBool, widgetMap);
|
21
|
-
break;
|
22
|
-
case "prop-show_icons":
|
23
|
-
toggleIconsVisibility(showIconsBool, iconActionsBool, widgetMap);
|
24
|
-
break;
|
25
|
-
case "prop-start_icon":
|
26
|
-
updateStartIconVisibility(iconActionsBool, widgetMap);
|
27
|
-
break;
|
28
|
-
case "prop-end_icon":
|
29
|
-
updateEndIconVisibility(iconActionsBool, widgetMap);
|
30
|
-
break;
|
31
|
-
}
|
32
|
-
};
|
33
|
-
Widget.onReady = function () {
|
34
|
-
var _a = Widget.props, value = _a.value, step_value = _a.step_value, required = _a.required, min_value = _a.min_value, max_value = _a.max_value, show_labels = _a.show_labels, show_icons = _a.show_icons, icon_actions = _a.icon_actions, start_icon = _a.start_icon, end_icon = _a.end_icon;
|
35
|
-
var widgetMap = Widget.Widgets;
|
36
|
-
var showIconsBool = convertToBoolean(show_icons);
|
37
|
-
var showLabelsBool = convertToBoolean(show_labels);
|
38
|
-
var iconActionsBool = convertToBoolean(icon_actions);
|
39
|
-
widgetMap.sliderContainer.nativeElement.classList.add('filled-slider', 'discrete-slider');
|
40
|
-
initializeSlider(widgetMap, value, min_value, max_value, step_value, required);
|
41
|
-
toggleLabelVisibilty(showLabelsBool, widgetMap);
|
42
|
-
toggleIconsVisibility(showIconsBool, iconActionsBool, widgetMap);
|
43
|
-
};
|
44
|
-
function initializeSlider(widgetMap, value, minValue, maxValue, stepValue, required) {
|
45
|
-
updateSlider(widgetMap, value, minValue, maxValue, stepValue);
|
46
|
-
setRequired(widgetMap, required);
|
47
|
-
appendSliderIndicator(widgetMap.slider);
|
48
|
-
}
|
49
|
-
function updateSlider(widgetMap, value, minValue, maxValue, stepValue) {
|
50
|
-
if (value !== undefined) {
|
51
|
-
widgetMap.slider.datavalue = Number(value);
|
52
|
-
}
|
53
|
-
configureSliderAndSetStyles(widgetMap, value, minValue, maxValue, stepValue);
|
54
|
-
setupStepsAndLabels(widgetMap);
|
55
|
-
}
|
56
|
-
function updateSliderStep(widgetMap, value, minValue, maxValue, stepValue) {
|
57
|
-
updateSlider(widgetMap, value, minValue, maxValue, stepValue);
|
58
|
-
}
|
59
|
-
function setRequired(widgetMap, required) {
|
60
|
-
widgetMap.composite.required = required;
|
61
|
-
}
|
62
|
-
function appendSliderIndicator(slider) {
|
63
|
-
var sliderElement = slider.nativeElement;
|
64
|
-
if (sliderElement) {
|
65
|
-
var indicator = document.createElement('p');
|
66
|
-
var labelContainer = document.createElement('div');
|
67
|
-
labelContainer.className = 'stop-indicator';
|
68
|
-
indicator.className = 'active-slider';
|
69
|
-
sliderElement.appendChild(indicator);
|
70
|
-
sliderElement.appendChild(labelContainer);
|
71
|
-
}
|
72
|
-
}
|
73
|
-
function configureSliderAndSetStyles(widgetMap, value, minValue, maxValue, stepValue) {
|
74
|
-
var slider = widgetMap.slider;
|
75
|
-
minValue = parseInt(minValue, 10);
|
76
|
-
maxValue = parseInt(maxValue, 10);
|
77
|
-
stepValue = parseInt(stepValue, 10);
|
78
|
-
if (isNaN(minValue) || isNaN(maxValue) || isNaN(stepValue) || stepValue <= 0) {
|
79
|
-
console.error("Invalid min, max, or step values");
|
80
|
-
return;
|
81
|
-
}
|
82
|
-
slider.min = minValue;
|
83
|
-
slider.max = maxValue;
|
84
|
-
slider.step = stepValue;
|
85
|
-
slider.datavalue = clamp(slider.datavalue, minValue, maxValue);
|
86
|
-
updateSliderStyles(slider, slider.datavalue, minValue, maxValue);
|
87
|
-
}
|
88
|
-
function updateSliderStyles(slider, value, minValue, maxValue) {
|
89
|
-
var percentage = getSliderPercentage(value, minValue, maxValue);
|
90
|
-
slider.nativeElement.style.setProperty("--end", "".concat(100 - percentage, "%"));
|
91
|
-
}
|
92
|
-
function setupStepsAndLabels(widgetMap) {
|
93
|
-
var slider = widgetMap.slider;
|
94
|
-
var labelContainer = widgetMap.labelsContainer;
|
95
|
-
var minValue = parseInt(slider.min, 10);
|
96
|
-
var maxValue = parseInt(slider.max, 10);
|
97
|
-
var stepValue = parseInt(slider.step, 10);
|
98
|
-
if (!labelContainer)
|
99
|
-
return;
|
100
|
-
var numSteps = Math.ceil((maxValue - minValue) / stepValue);
|
101
|
-
labelContainer.$element[0].innerHTML = ''; // Clear existing labels
|
102
|
-
for (var i = 0; i <= numSteps; i++) {
|
103
|
-
var labelValue = minValue + i * stepValue;
|
104
|
-
if (labelValue > maxValue)
|
105
|
-
break;
|
106
|
-
var stepLabel = createStepLabel(labelValue, minValue, maxValue);
|
107
|
-
labelContainer.$element[0].appendChild(stepLabel);
|
108
|
-
}
|
109
|
-
slider.$element[0].addEventListener('input', function () { return updateLabelVisibility(widgetMap); });
|
110
|
-
updateLabelVisibility(widgetMap);
|
111
|
-
}
|
112
|
-
function createStepLabel(labelValue, minValue, maxValue) {
|
113
|
-
var stepLabel = document.createElement('p');
|
114
|
-
stepLabel.className = 'step-label';
|
115
|
-
stepLabel.textContent = labelValue;
|
116
|
-
var position = ((labelValue - minValue) / (maxValue - minValue)) * 100;
|
117
|
-
stepLabel.style.setProperty('--position', "".concat(position - 1, "%"));
|
118
|
-
stepLabel.setAttribute('data-position', position);
|
119
|
-
return stepLabel;
|
120
|
-
}
|
121
|
-
function updateLabelVisibility(widgetMap) {
|
122
|
-
var slider = widgetMap.slider;
|
123
|
-
var labels = widgetMap.labelsContainer.nativeElement.getElementsByClassName('step-label');
|
124
|
-
var sliderValue = slider.datavalue;
|
125
|
-
var minValue = slider.min;
|
126
|
-
var maxValue = slider.max;
|
127
|
-
var stepValue = slider.step;
|
128
|
-
var validValues = Array.from({
|
129
|
-
length: Math.ceil((maxValue - minValue) / stepValue) + 1
|
130
|
-
}, function (_, i) { return minValue + i * stepValue; })
|
131
|
-
.filter(function (value) { return value <= maxValue; });
|
132
|
-
for (var _i = 0, labels_1 = labels; _i < labels_1.length; _i++) {
|
133
|
-
var label = labels_1[_i];
|
134
|
-
var labelValue = parseInt(label.textContent, 10);
|
135
|
-
label.classList.remove('hidden', 'inactive', 'active');
|
136
|
-
if (validValues.includes(labelValue)) {
|
137
|
-
if (labelValue === sliderValue) {
|
138
|
-
label.classList.add('hidden');
|
139
|
-
}
|
140
|
-
else if (labelValue < sliderValue) {
|
141
|
-
label.classList.add('inactive');
|
142
|
-
}
|
143
|
-
else {
|
144
|
-
label.classList.add('active');
|
145
|
-
}
|
146
|
-
}
|
147
|
-
label.style.display = 'block';
|
148
|
-
}
|
149
|
-
}
|
150
|
-
function getSliderPercentage(value, minValue, maxValue) {
|
151
|
-
return ((value - minValue) / (maxValue - minValue)) * 100;
|
152
|
-
}
|
153
|
-
function clamp(value, minValue, maxValue) {
|
154
|
-
return Math.min(Math.max(value, minValue), maxValue);
|
155
|
-
}
|
156
|
-
function toggleLabelVisibilty(showLabelsBool, widgetMap) {
|
157
|
-
if (showLabelsBool) {
|
158
|
-
widgetMap.slider.nativeElement.classList.remove("hide-labels");
|
159
|
-
}
|
160
|
-
else {
|
161
|
-
widgetMap.slider.nativeElement.classList.add("hide-labels");
|
162
|
-
}
|
163
|
-
}
|
164
|
-
function toggleIconsVisibility(showIconsBool, iconActionsBool, widgetMap) {
|
165
|
-
var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
|
166
|
-
if (showIconsBool) {
|
167
|
-
updateStartIconVisibility(iconActionsBool, widgetMap);
|
168
|
-
updateEndIconVisibility(iconActionsBool, widgetMap);
|
169
|
-
}
|
170
|
-
else {
|
171
|
-
decrementButton.show = false;
|
172
|
-
incrementButton.show = false;
|
173
|
-
}
|
174
|
-
}
|
175
|
-
function updateStartIconVisibility(iconActionsBool, widgetMap) {
|
176
|
-
var decrementButton = widgetMap.decrementButton;
|
177
|
-
decrementButton.show = true;
|
178
|
-
decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
179
|
-
"auto" :
|
180
|
-
"none";
|
181
|
-
}
|
182
|
-
function updateEndIconVisibility(iconActionsBool, widgetMap) {
|
183
|
-
var incrementButton = widgetMap.incrementButton;
|
184
|
-
incrementButton.show = true;
|
185
|
-
incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
|
186
|
-
"auto" :
|
187
|
-
"none";
|
188
|
-
}
|
189
|
-
function moveSlider(direction, widgetMap) {
|
190
|
-
var slider = widgetMap.slider;
|
191
|
-
var newValue = Number(slider.datavalue) + (direction * slider.step);
|
192
|
-
newValue = Math.max(Math.min(newValue, slider.maxvalue), slider.minvalue);
|
193
|
-
slider.datavalue = newValue;
|
194
|
-
Widget.sliderChange(null, slider, newValue);
|
195
|
-
}
|
196
|
-
function convertToBoolean(value) {
|
197
|
-
return value === true || value === "true";
|
198
|
-
}
|
199
|
-
Widget.sliderChange = function ($event, widget, newVal) {
|
200
|
-
updateSliderStyles(widget, newVal, widget.min, widget.max);
|
201
|
-
updateLabelVisibility(Widget.Widgets);
|
202
|
-
};
|
203
|
-
Widget.decrementButtonClick = function ($event, widget) {
|
204
|
-
moveSlider(-1, Widget.Widgets);
|
205
|
-
};
|
206
|
-
Widget.incrementButtonClick = function ($event, widget) {
|
207
|
-
moveSlider(1, Widget.Widgets);
|
208
|
-
};
|
@@ -1,7 +0,0 @@
|
|
1
|
-
export var discrete_slider = {
|
2
|
-
"markup": "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22+class%3D%22slider-composite%22%3E%0A++++++++%3Cwm-label+class%3D%22control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22sliderContainer%22+class%3D%22filled-slider+discrete-slider%22%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22decrementButton%22+iconclass%3D%22bind%3Aprops.start_icon%22+on-click%3D%22decrementButtonClick%28%24event%2C+widget%29%22+show%3D%22false%22%3E%3C%2Fwm-button%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider%22+class%3D%22cst-slider%22+datavalue%3D%22bind%3Aprops.value%22+on-change%3D%22sliderChange%28%24event%2C+widget%2C+newVal%2C+oldVal%29%22+disabled%3D%22bind%3Aprops.state%3D%3D%26quot%3BDisabled%26quot%3B%22+minvalue%3D%22bind%3Aprops.min_value%22+maxvalue%3D%22bind%3Aprops.max_value%22%3E%3C%2Fwm-slider%3E%0A++++++++++++%3Cwm-button+class%3D%22btn-icon%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22incrementButton%22+iconclass%3D%22bind%3Aprops.end_icon%22+on-click%3D%22incrementButtonClick%28%24event%2C+widget%29%22%3E%3C%2Fwm-button%3E%0A++++++++%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+name%3D%22labelsContainer%22+class%3D%22stop-indicator%22%3E%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
3
|
-
"script": "Widget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++value%2C%0A++++++++step_value%2C%0A++++++++required%2C%0A++++++++min_value%2C%0A++++++++max_value%2C%0A++++++++show_labels%2C%0A++++++++show_icons%2C%0A++++++++icon_actions%2C%0A++++++++start_icon%2C%0A++++++++end_icon%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+showIconsBool+%3D+convertToBoolean%28show_icons%29%3B%0A++++const+showLabelsBool+%3D+convertToBoolean%28show_labels%29%3B%0A++++const+iconActionsBool+%3D+convertToBoolean%28icon_actions%29%3B%0A%0A%0A++++switch+%28propName%29+%7B%0A++++++++case+%27prop-value%27%3A%0A++++++++case+%27prop-min_value%27%3A%0A++++++++case+%27prop-max_value%27%3A%0A++++++++++++updateSlider%28widgetMap%2C+value%2C+min_value%2C+max_value%2C+step_value%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-step_value%27%3A%0A++++++++++++updateSliderStep%28widgetMap%2C+value%2C+min_value%2C+max_value%2C+step_value%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++setRequired%28widgetMap%2C+required%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-show_labels%22%3A%0A++++++++++++toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-show_icons%22%3A%0A++++++++++++toggleIconsVisibility%28%0A++++++++++++++++showIconsBool%2C%0A++++++++++++++++iconActionsBool%2C%0A++++++++++++++++widgetMap%0A++++++++++++%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-start_icon%22%3A%0A++++++++++++updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++++++case+%22prop-end_icon%22%3A%0A++++++++++++updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++value%2C%0A++++++++step_value%2C%0A++++++++required%2C%0A++++++++min_value%2C%0A++++++++max_value%2C%0A++++++++show_labels%2C%0A++++++++show_icons%2C%0A++++++++icon_actions%2C%0A++++++++start_icon%2C%0A++++++++end_icon%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++const+showIconsBool+%3D+convertToBoolean%28show_icons%29%3B%0A++++const+showLabelsBool+%3D+convertToBoolean%28show_labels%29%3B%0A++++const+iconActionsBool+%3D+convertToBoolean%28icon_actions%29%3B%0A++++widgetMap.sliderContainer.nativeElement.classList.add%28%27filled-slider%27%2C+%27discrete-slider%27%29%3B%0A++++initializeSlider%28widgetMap%2C+value%2C+min_value%2C+max_value%2C+step_value%2C+required%29%3B%0A++++toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29%3B%0A++++toggleIconsVisibility%28%0A++++++++showIconsBool%2C%0A++++++++iconActionsBool%2C%0A++++++++widgetMap%0A++++%29%3B%0A%0A%7D%3B%0A%0Afunction+initializeSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%2C+required%29+%7B%0A++++updateSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29%3B%0A++++setRequired%28widgetMap%2C+required%29%3B%0A++++appendSliderIndicator%28widgetMap.slider%29%3B%0A%7D%0A%0Afunction+updateSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29+%7B%0A++++if+%28value+%21%3D%3D+undefined%29+%7B%0A++++++++widgetMap.slider.datavalue+%3D+Number%28value%29%3B%0A++++%7D%0A++++configureSliderAndSetStyles%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29%3B%0A++++setupStepsAndLabels%28widgetMap%29%3B%0A%7D%0A%0Afunction+updateSliderStep%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29+%7B%0A++++updateSlider%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29%3B%0A%7D%0A%0Afunction+setRequired%28widgetMap%2C+required%29+%7B%0A++++widgetMap.composite.required+%3D+required%3B%0A%7D%0A%0Afunction+appendSliderIndicator%28slider%29+%7B%0A++++const+sliderElement+%3D+slider.nativeElement%3B%0A++++if+%28sliderElement%29+%7B%0A++++++++const+indicator+%3D+document.createElement%28%27p%27%29%3B%0A++++++++const+labelContainer+%3D+document.createElement%28%27div%27%29%3B%0A++++++++labelContainer.className+%3D+%27stop-indicator%27%3B%0A++++++++indicator.className+%3D+%27active-slider%27%3B%0A++++++++sliderElement.appendChild%28indicator%29%3B%0A++++++++sliderElement.appendChild%28labelContainer%29%3B%0A%0A++++%7D%0A%7D%0A%0Afunction+configureSliderAndSetStyles%28widgetMap%2C+value%2C+minValue%2C+maxValue%2C+stepValue%29+%7B%0A++++const+slider+%3D+widgetMap.slider%3B%0A++++minValue+%3D+parseInt%28minValue%2C+10%29%3B%0A++++maxValue+%3D+parseInt%28maxValue%2C+10%29%3B%0A++++stepValue+%3D+parseInt%28stepValue%2C+10%29%3B%0A%0A++++if+%28isNaN%28minValue%29+%7C%7C+isNaN%28maxValue%29+%7C%7C+isNaN%28stepValue%29+%7C%7C+stepValue+%3C%3D+0%29+%7B%0A++++++++console.error%28%22Invalid+min%2C+max%2C+or+step+values%22%29%3B%0A++++++++return%3B%0A++++%7D%0A%0A++++slider.min+%3D+minValue%3B%0A++++slider.max+%3D+maxValue%3B%0A++++slider.step+%3D+stepValue%3B%0A++++slider.datavalue+%3D+clamp%28slider.datavalue%2C+minValue%2C+maxValue%29%3B%0A++++updateSliderStyles%28slider%2C+slider.datavalue%2C+minValue%2C+maxValue%29%3B%0A%7D%0A%0Afunction+updateSliderStyles%28slider%2C+value%2C+minValue%2C+maxValue%29+%7B%0A++++const+percentage+%3D+getSliderPercentage%28value%2C+minValue%2C+maxValue%29%3B%0A++++slider.nativeElement.style.setProperty%28%22--end%22%2C+%60%24%7B100+-+percentage%7D%25%60%29%0A%7D%0A%0Afunction+setupStepsAndLabels%28widgetMap%29+%7B%0A++++const+slider+%3D+widgetMap.slider%3B%0A++++const+labelContainer+%3D+widgetMap.labelsContainer%3B%0A++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++const+stepValue+%3D+parseInt%28slider.step%2C+10%29%3B%0A%0A++++if+%28%21labelContainer%29+return%3B%0A%0A++++const+numSteps+%3D+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29%3B%0A++++labelContainer.%24element%5B0%5D.innerHTML+%3D+%27%27%3B+%2F%2F+Clear+existing+labels%0A%0A++++for+%28let+i+%3D+0%3B+i+%3C%3D+numSteps%3B+i%2B%2B%29+%7B%0A++++++++const+labelValue+%3D+minValue+%2B+i+*+stepValue%3B%0A++++++++if+%28labelValue+%3E+maxValue%29+break%3B%0A%0A++++++++const+stepLabel+%3D+createStepLabel%28labelValue%2C+minValue%2C+maxValue%29%3B%0A++++++++labelContainer.%24element%5B0%5D.appendChild%28stepLabel%29%3B%0A++++%7D%0A%0A++++slider.%24element%5B0%5D.addEventListener%28%27input%27%2C+%28%29+%3D%3E+updateLabelVisibility%28widgetMap%29%29%3B%0A++++updateLabelVisibility%28widgetMap%29%3B%0A%7D%0A%0Afunction+createStepLabel%28labelValue%2C+minValue%2C+maxValue%29+%7B%0A++++const+stepLabel+%3D+document.createElement%28%27p%27%29%3B%0A++++stepLabel.className+%3D+%27step-label%27%3B%0A++++stepLabel.textContent+%3D+labelValue%3B%0A%0A++++const+position+%3D+%28%28labelValue+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A++++stepLabel.style.setProperty%28%27--position%27%2C+%60%24%7Bposition+-+1%7D%25%60%29%3B%0A++++stepLabel.setAttribute%28%27data-position%27%2C+position%29%3B%0A%0A++++return+stepLabel%3B%0A%7D%0A%0Afunction+updateLabelVisibility%28widgetMap%29+%7B%0A++++const+slider+%3D+widgetMap.slider%3B%0A++++const+labels+%3D+widgetMap.labelsContainer.nativeElement.getElementsByClassName%28%27step-label%27%29%3B%0A++++const+sliderValue+%3D+slider.datavalue%3B%0A++++const+minValue+%3D+slider.min%3B%0A++++const+maxValue+%3D+slider.max%3B%0A++++const+stepValue+%3D+slider.step%3B%0A%0A++++const+validValues+%3D+Array.from%28%7B%0A++++++++++++length%3A+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29+%2B+1%0A++++++++%7D%2C+%28_%2C+i%29+%3D%3E+minValue+%2B+i+*+stepValue%29%0A++++++++.filter%28value+%3D%3E+value+%3C%3D+maxValue%29%3B%0A%0A++++for+%28const+label+of+labels%29+%7B%0A++++++++const+labelValue+%3D+parseInt%28label.textContent%2C+10%29%3B%0A++++++++label.classList.remove%28%27hidden%27%2C+%27inactive%27%2C+%27active%27%29%3B%0A%0A++++++++if+%28validValues.includes%28labelValue%29%29+%7B%0A++++++++++++if+%28labelValue+%3D%3D%3D+sliderValue%29+%7B%0A++++++++++++++++label.classList.add%28%27hidden%27%29%3B%0A++++++++++++%7D+else+if+%28labelValue+%3C+sliderValue%29+%7B%0A++++++++++++++++label.classList.add%28%27inactive%27%29%3B%0A++++++++++++%7D+else+%7B%0A++++++++++++++++label.classList.add%28%27active%27%29%3B%0A++++++++++++%7D%0A++++++++%7D%0A%0A++++++++label.style.display+%3D+%27block%27%3B%0A++++%7D%0A%7D%0A%0Afunction+getSliderPercentage%28value%2C+minValue%2C+maxValue%29+%7B%0A++++return+%28%28value+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A%7D%0A%0Afunction+clamp%28value%2C+minValue%2C+maxValue%29+%7B%0A++++return+Math.min%28Math.max%28value%2C+minValue%29%2C+maxValue%29%3B%0A%7D%0A%0Afunction+toggleLabelVisibilty%28showLabelsBool%2C+widgetMap%29+%7B%0A++++if+%28showLabelsBool%29+%7B%0A++++++++widgetMap.slider.nativeElement.classList.remove%28%22hide-labels%22%29%3B%0A++++%7D+else+%7B%0A++++++++widgetMap.slider.nativeElement.classList.add%28%22hide-labels%22%29%3B%0A++++%7D%0A%7D%0A%0Afunction+toggleIconsVisibility%28%0A++++showIconsBool%2C%0A++++iconActionsBool%2C%0A++++widgetMap%0A%29+%7B%0A++++const+%7B%0A++++++++decrementButton%2C%0A++++++++incrementButton%0A++++%7D+%3D+widgetMap%3B%0A%0A++++if+%28showIconsBool%29+%7B%0A++++++++updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++++++updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29%3B%0A++++%7D+else+%7B%0A++++++++decrementButton.show+%3D+false%3B%0A++++++++incrementButton.show+%3D+false%3B%0A++++%7D%0A%7D%0A%0Afunction+updateStartIconVisibility%28iconActionsBool%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++decrementButton%0A++++%7D+%3D+widgetMap%3B%0A++++decrementButton.show+%3D+true%3B%0A++++decrementButton.nativeElement.style.pointerEvents+%3D+iconActionsBool+%3F%0A++++++++%22auto%22+%3A%0A++++++++%22none%22%3B%0A%7D%0A%0Afunction+updateEndIconVisibility%28iconActionsBool%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++incrementButton%0A++++%7D+%3D+widgetMap%3B%0A++++incrementButton.show+%3D+true%3B%0A++++incrementButton.nativeElement.style.pointerEvents+%3D+iconActionsBool+%3F%0A++++++++%22auto%22+%3A%0A++++++++%22none%22%3B%0A%7D%0A%0Afunction+moveSlider%28direction%2C+widgetMap%29+%7B%0A++++const+%7B%0A++++++++slider%0A++++%7D+%3D+widgetMap%3B%0A++++let+newValue+%3D+Number%28slider.datavalue%29+%2B+%28direction+*+slider.step%29%3B%0A++++newValue+%3D+Math.max%28Math.min%28newValue%2C+slider.maxvalue%29%2C+slider.minvalue%29%3B%0A++++slider.datavalue+%3D+newValue%3B%0A++++Widget.sliderChange%28null%2C+slider%2C+newValue%29%3B%0A%7D%0A%0Afunction+convertToBoolean%28value%29+%7B%0A++++return+value+%3D%3D%3D+true+%7C%7C+value+%3D%3D%3D+%22true%22%3B%0A%7D%0A%0A%0AWidget.sliderChange+%3D+function%28%24event%2C+widget%2C+newVal%29+%7B%0A++++updateSliderStyles%28widget%2C+newVal%2C+widget.min%2C+widget.max%29%3B%0A++++updateLabelVisibility%28Widget.Widgets%29%3B%0A%7D%3B%0A%0AWidget.decrementButtonClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++moveSlider%28-1%2C+Widget.Widgets%29%3B%0A%7D%3B%0A%0AWidget.incrementButtonClick+%3D+function%28%24event%2C+widget%29+%7B%0A++++moveSlider%281%2C+Widget.Widgets%29%3B%0A%7D%3B",
|
4
|
-
"styles": ".app-composite-widget.form-group%3Ahas%28.filled-slider%29+%7B%0A++++flex-direction%3A+column%3B%0A++++align-items%3A+start%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+%7B%0A++++display%3A+flex%3B%0A++++gap%3A+12px%3B%0A++++position%3A+relative%3B%0A++++width%3A+100%25%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++--start%3A+0%25%3B%0A++++--end%3A+100%25%3B%0A++++display%3A+flex%3B%0A++++align-items%3A+center+%21important%3B%0A++++inline-size%3A+auto%3B%0A++++block-size%3A+1.25rem%3B%0A++++margin%3A+1.125rem+0%3B%0A++++flex%3A+none%3B%0A++++direction%3A+ltr%3B%0A++++flex-grow%3A+1%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider.vertical+%7B%0A++++flex-direction%3A+row+%21important%3B%0A++++margin%3A+.5rem+auto+%21important%3B%0A++++padding%3A+50%25+0%3B%0A++++transform%3A+rotate%28-90deg%29%3B%0A++++inline-size%3A+100%25%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider.discrete-slider+%7B%0A++++display%3A+flex%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D+.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++transform%3A+scaleX%28-1%29%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+none%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++background%3A+none%3B%0A++++z-index%3A+1%3B%0A++++padding%3A+0%3B%0A++++margin%3A+0%3B%0A++++opacity%3A+unset%3B%0A++++color%3A+unset%3B%0A++++height%3A+unset%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3Aonly-of-type+%7B%0A++++pointer-events%3A+all%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%2Binput+%7B%0A++++position%3A+absolute%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb+%7B%0A++++appearance%3A+none%3B%0A++++box-shadow%3A+none%3B%0A++++border%3A+none%3B%0A++++outline%3A+none%3B%0A++++pointer-events%3A+all%3B%0A++++block-size%3A+2.75rem%3B%0A++++inline-size%3A+0.25rem%3B%0A++++border-radius%3A+0.25rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++cursor%3A+grab%3B%0A++++margin%3A+0%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-webkit-slider-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3A%3A-moz-range-thumb%3Aactive+%7B%0A++++cursor%3A+grabbing%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-webkit-slider-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3Anot%28%3Adisabled%29%3Ais%28%3Afocus%29%3A%3A-moz-range-thumb+%7B%0A++++transform%3A+scaleX%280.6%29%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-moz-range-thumb+%7B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Einput%3Adisabled%3A%3A-webkit-slider-thumb+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++cursor%3A+not-allowed%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3A%3Abefore+%7B%0A++++content%3A+%22%22%3B%0A++++position%3A+absolute%3B%0A++++inline-size%3A+100%25%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem%3B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A++++clip-path%3A+polygon%28calc%28var%28--start%29+-+0.5rem%29+0%2C+0+0%2C+0+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+100%25%2C+calc%28var%28--start%29+-+0.5rem%29+0%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%2C+100%25+0%2C+100%25+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+100%25%2C+calc%28100%25+-+var%28--end%29+%2B+0.5rem%29+0%29%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.active-slider+%7B%0A++++position%3A+absolute%3B%0A++++block-size%3A+1rem%3B%0A++++border-radius%3A+1rem+0+0+1rem%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++z-index%3A+0%3B%0A++++float%3A+unset%3B%0A++++vertical-align%3A+baseline%3B%0A++++inset%3A+calc%2850%25+-+0.5rem%29+var%28--end%29+auto+var%28--start%29%3B%0A++++clip-path%3A+polygon%280+0%2C+calc%28100%25+-+0.5rem%29+0%2C+calc%28100%25+-+0.5rem%29+100%25%2C+0+100%25%29%3B%0A++++display%3A+block%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value+%7B%0A++++position%3A+absolute%3B%0A++++top%3A+36px%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-left+%7B%0A++++left%3A+0%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3E.app-slider-value.pull-right+%7B%0A++++right%3A+0%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3A%3Abefore+%7B%0A++++background%3A+var%28+--wm-color-on-surface-focus%29%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider%3Ahas%28input%3Adisabled%29%3Ep.active-slider+%7B%0A++++background%3A+var%28--wm-color-on-surface%29%3B%0A++++opacity%3A+0.38%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider+input%5Btype%3Drange%5D%3A%3A-webkit-slider-runnable-track+%7B%0A++++background%3A+unset%3B%0A++++height%3A+unset%3B%0A++++position%3A+relative%3B%0A%7D%0A%0A%0A%2F*+Ensure+the+container+is+positioned+relatively+to+contain+absolutely+positioned+children+*%2F%0A%0A.app-container.stop-indicator+%7B%0A++++position%3A+relative%3B%0A++++box-sizing%3A+border-box%3B%0A++++width%3A+calc%28100%25+-+48px%29%3B%0A++++margin-inline%3A+auto%3B%0A%7D%0A%0A.app-composite-widget%3Ahas%28.discrete-slider+%3E+.btn-icon.btn%29+.app-container.stop-indicator+%7B%0A++++width%3A+calc%28100%25+-+168px%29%3B%0A%7D%0A%0A.app-composite-widget%3Ahas%28.discrete-slider+%3E+.btn-icon.btn%5Bhidden%5D%29+.app-container.stop-indicator+%7B%0A++++width%3A+calc%28100%25+-+48px%29%3B%0A%7D%0A%0A%0A%2F*+Style+for+individual+step+labels+*%2F%0A%0A.app-container.stop-indicator+.step-label+%7B%0A++++position%3A+absolute%3B%0A++++text-align%3A+center%3B%0A++++white-space%3A+nowrap%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++visibility%3A+hidden%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.hidden+%7B%0A++++display%3A+none+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.inactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-primary-container%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label.active%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%5Bdata-position%3D%2299%22%5D+%7B%0A++++--position%3A+98.5%25+%21important%3B%0A%7D%0A%0A.app-container.stop-indicator+.step-label%3A%3Abefore+%7B%0A++++position%3A+absolute%3B%0A++++height%3A+4px%3B%0A++++width%3A+4px%3B%0A++++left%3A+var%28--position%2C+0%25%29%3B%0A++++content%3A+%27%27%3B%0A++++top%3A+-30px%3B%0A++++visibility%3A+visible%3B%0A++++background%3A+var%28--wm-color-surface-tint%29%3B%0A++++border-radius%3A+50%25%3B%0A++++display%3A+block%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-left+%7B%0A++++display%3A+none%3B%0A%7D%0A%0A.app-container.discrete-slider.filled-slider+.app-slider.slider.cst-slider.hide-labels%3E.app-slider-value.pull-right+%7B%0A++++display%3A+none%3B%0A%7D",
|
5
|
-
"variables": "%7B+%7D",
|
6
|
-
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20interactivity%20of%20the%20widget.%20%27Enabled%27%20allows%20interaction%20with%20the%20widget%2C%20while%20%27Disabled%27%20makes%20the%20widget%20non-interactive%20and%20inactive.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Enabled%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20text%20that%20appears%20on%20the%20widget%E2%80%99s%20label.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_labels%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Show%20Labels%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20labels%20should%20be%20displayed%20on%20the%20widget.%20When%20set%20to%20true%2C%20lables%20will%20be%20shown.%20When%20false%2C%20labels%20will%20be%20hidden.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_icons%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Show%20Icons%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20icons%20should%20be%20displayed%20on%20the%20widget.%20When%20set%20to%20true%2C%20icons%20will%20be%20shown.%20When%20false%2C%20icons%20will%20be%20hidden.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22start_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Start%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20start%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22end_icon%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22End%20Icon%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22The%20icon%20to%20be%20displayed%20at%20the%20end%20of%20the%20widget.%20Select%20an%20appropriate%20icon%20from%20the%20available%20options.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22widget%22%20%3A%20%22select-icon%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22icon_actions%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Icon%20Actions%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20whether%20the%20icons%20on%20the%20widget%20are%20interactive.%20When%20set%20to%20true%2C%20icons%20will%20respond%20to%20user%20actions%20(e.g.%2C%20clicks).%20When%20false%2C%20icons%20will%20be%20displayed%20but%20not%20interactive.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Sets%20the%20initial%20value%20of%20the%20slider%20when%20the%20widget%20is%20first%20displayed.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2250%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22step_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Step%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20increment%20or%20decrement%20steps%20for%20the%20slider.%20This%20value%20controls%20the%20amount%20by%20which%20the%20slider%E2%80%99s%20value%20changes%20with%20each%20step.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%2210%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22min_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Minimum%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20smallest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%220%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22max_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Maximum%20Value%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20largest%20value%20the%20slider%20can%20be%20set%20to.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22100%22%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%22onChange%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22function%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22On%20Change%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Triggered%20when%20the%20slider%E2%80%99s%20value%20changes.%20The%20function%20receives%20parameters%20including%20the%20event%2C%20the%20widget%2C%20the%20new%20value%2C%20and%20the%20previous%20value.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22sliderChange(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22onDecrement%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22function%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22On%20Decrement%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20decreased.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22decrementButtonClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22onIncrement%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22function%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22On%20Increment%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Function%20to%20be%20called%20when%20the%20value%20of%20the%20slider%20increased.%20This%20function%20receives%20parameters%20such%20as%20the%20event%2C%20widget.%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22incrementButtonClick(%24event%2C%20widget)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
7
|
-
};
|
@@ -1,4 +0,0 @@
|
|
1
|
-
declare function updateDivider(divider: any, orientation_prop: any, vertical_height: any): void;
|
2
|
-
declare function resetAndUpdateDividerClasses(divider: any, orientation: any, length: any): void;
|
3
|
-
declare function calculateHeight(length: any, vertical_height: any): any;
|
4
|
-
declare function setDividerHeight(divider: any, height: any): void;
|
@@ -1,42 +0,0 @@
|
|
1
|
-
Widget.onPropertyChange = function (propName, newValue, oldValue) {
|
2
|
-
var _a = Widget.props, orientation = _a.orientation, vertical_height = _a.vertical_height;
|
3
|
-
var widgetMap = Widget.Widgets;
|
4
|
-
var relevantProps = ["prop-vertical_height", "prop-orientation"];
|
5
|
-
if (relevantProps.includes(propName)) {
|
6
|
-
updateDivider(widgetMap.divider1, orientation, vertical_height);
|
7
|
-
}
|
8
|
-
};
|
9
|
-
Widget.onReady = function () {
|
10
|
-
var _a = Widget.props, orientation = _a.orientation, vertical_height = _a.vertical_height;
|
11
|
-
var widgetMap = Widget.Widgets;
|
12
|
-
updateDivider(widgetMap.divider1, orientation, vertical_height);
|
13
|
-
};
|
14
|
-
function updateDivider(divider, orientation_prop, vertical_height) {
|
15
|
-
var orientationArray = orientation_prop.toLowerCase().split("/");
|
16
|
-
var orientation = orientationArray[0]; // Vertical or Horizontal
|
17
|
-
var length = orientationArray[1];
|
18
|
-
resetAndUpdateDividerClasses(divider, orientation, length);
|
19
|
-
if (orientation === "vertical") {
|
20
|
-
var height = calculateHeight(length, vertical_height);
|
21
|
-
setDividerHeight(divider, height);
|
22
|
-
}
|
23
|
-
}
|
24
|
-
function resetAndUpdateDividerClasses(divider, orientation, length) {
|
25
|
-
divider.nativeElement.classList.remove("full-width", "middle-inset", "horizontal-divider", "vertical-divider", "inset");
|
26
|
-
divider.nativeElement.classList.add("".concat(orientation, "-divider"), length);
|
27
|
-
}
|
28
|
-
function calculateHeight(length, vertical_height) {
|
29
|
-
switch (length) {
|
30
|
-
case "full-width":
|
31
|
-
return vertical_height;
|
32
|
-
case "inset":
|
33
|
-
return vertical_height - 16;
|
34
|
-
case "middle-inset":
|
35
|
-
return vertical_height - 32;
|
36
|
-
default:
|
37
|
-
return vertical_height;
|
38
|
-
}
|
39
|
-
}
|
40
|
-
function setDividerHeight(divider, height) {
|
41
|
-
divider.nativeElement.style.setProperty("height", "".concat(height, "px"));
|
42
|
-
}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
export var divider = {
|
2
|
-
"markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-container+name%3D%22divider1%22+class%3D%22divider%22%3E%3C%2Fwm-container%3E%0A++++%3C%21--+Height+of+vertical+divider+will+be+supplied+using+inline+styles+and+the+value+can+be+picked+up+from+node+css.+%0A++++A+minimum+height+has+been+defined+in+the+event+that+the+user+uses+a+custom+widget+divider.+--%3E%0A%3C%2Fwm-custom-widget-container%3E",
|
3
|
-
"script": "Widget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++orientation%2C%0A++++++++vertical_height%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++const+relevantProps+%3D+%5B%22prop-vertical_height%22%2C+%22prop-orientation%22%5D%3B%0A++++if+%28relevantProps.includes%28propName%29%29+%7B%0A++++++++updateDivider%28widgetMap.divider1%2C+orientation%2C+vertical_height%29%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++orientation%2C%0A++++++++vertical_height%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A++++updateDivider%28widgetMap.divider1%2C+orientation%2C+vertical_height%29%3B%0A%7D%3B%0A%0Afunction+updateDivider%28divider%2C+orientation_prop%2C+vertical_height%29+%7B%0A++++const+orientationArray+%3D+orientation_prop.toLowerCase%28%29.split%28%22%2F%22%29%3B%0A++++const+orientation+%3D+orientationArray%5B0%5D%3B+%2F%2F+Vertical+or+Horizontal%0A++++const+length+%3D+orientationArray%5B1%5D%3B%0A++++resetAndUpdateDividerClasses%28divider%2C+orientation%2C+length%29%3B%0A%0A++++if+%28orientation+%3D%3D%3D+%22vertical%22%29+%7B%0A++++++++const+height+%3D+calculateHeight%28length%2C+vertical_height%29%3B%0A++++++++setDividerHeight%28divider%2C+height%29%3B%0A++++%7D%0A%7D%0A%0Afunction+resetAndUpdateDividerClasses%28divider%2C+orientation%2C+length%29+%7B%0A++++divider.nativeElement.classList.remove%28%0A++++++++%22full-width%22%2C%0A++++++++%22middle-inset%22%2C%0A++++++++%22horizontal-divider%22%2C%0A++++++++%22vertical-divider%22%2C%0A++++++++%22inset%22%0A++++%29%3B%0A%0A++++divider.nativeElement.classList.add%28%60%24%7Borientation%7D-divider%60%2C+length%29%3B%0A%7D%0A%0Afunction+calculateHeight%28length%2C+vertical_height%29+%7B%0A++++switch+%28length%29+%7B%0A++++++++case+%22full-width%22%3A%0A++++++++++++return+vertical_height%3B%0A++++++++case+%22inset%22%3A%0A++++++++++++return+vertical_height+-+16%3B%0A++++++++case+%22middle-inset%22%3A%0A++++++++++++return+vertical_height+-+32%3B%0A++++++++default%3A%0A++++++++++++return+vertical_height%3B%0A++++%7D%0A%7D%0A%0Afunction+setDividerHeight%28divider%2C+height%29+%7B%0A++++divider.nativeElement.style.setProperty%28%22height%22%2C+%60%24%7Bheight%7Dpx%60%29%3B%0A%7D",
|
4
|
-
"styles": ".divider+%7B%0A++++--wm-divider-border-width%3A+var%28--wm-border-width%29%3B%0A++++--wm-divider-border-style%3A+var%28--wm-border-style%29%3B%0A++++--wm-divider-border-color%3A+var%28--wm-color-outline-variant%29%3B%0A++++--wm-divider-inset-width%3A+var%28--wm-space-4%29%3B%0A++++--wm-vertical-divider-width%3A+1px%3B%0A%7D%0A%0A.divider+%7B%0A++++display%3A+flex%3B%0A++++border-top%3A+var%28--wm-divider-border-width%29+var%28--wm-divider-border-style%29+var%28--wm-divider-border-color%29%3B%0A++++height%3A+1px%3B%0A++++margin-block%3A+8px%3B%0A%7D%0A%0A.app-container%3E.divider.full-width+%7B%0A++++width%3A+100%25%3B%0A++++margin%3A+auto%3B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.divider.inset+%7B%0A++++margin-left%3A+var%28--wm-divider-inset-width%29%3B%0A%7D%0A%0A.divider.middle-inset+%7B%0A++++display%3A+flex%3B%0A++++margin-inline%3A+var%28--wm-divider-inset-width%29%3B%0A%7D%0A%0A.vertical-divider+%7B%0A++++width%3A+var%28--wm-vertical-divider-width%29%3B%0A++++border-left%3A+var%28--wm-divider-border-width%29+var%28--wm-divider-border-style%29+var%28--wm-divider-border-color%29%3B%0A++++min-height%3A+1px%3B%0A++++margin-inline%3A+8px%3B%0A%7D%0A%0A.vertical-divider.full-width+%7B%0A++++margin-top%3A+0%3B%0A++++margin-bottom%3A+0%3B%0A%7D%0A%0A.vertical-divider.inset+%7B%0A++++margin-top%3A+var%28--wm-divider-inset-width%29%3B%0A%7D%0A%0A.vertical-divider.middle-inset+%7B%0A++++margin-block%3A+var%28--wm-divider-inset-width%29%3B%0A%7D",
|
5
|
-
"variables": "%7B+%7D",
|
6
|
-
"config": "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22orientation%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Orientation%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20style%20of%20the%20M3%20divider%20being%20used.%20Default%20value%20is%20horizontal%2Ffull-width.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%2Ffull-width%22%2C%20%22horizontal%2Fmiddle-inset%22%2C%20%22horizontal%2Finset%22%2C%20%22vertical%2Ffull-width%22%2C%20%22vertical%2Fmiddle-inset%22%2C%20%22vertical%2Finset%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%2Ffull-width%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22vertical_height%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Height%20(only%20for%20vertical)%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20height%20of%20the%20vertical%20divider%20(in%20px)%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%202%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%22onRender%22%20%3A%20%7B%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Callback%20action%20to%20test%20event%20in%20the%20properties%20panel%22%2C%0A%20%20%20%20%20%20%22eventData%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Render%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D"
|
7
|
-
};
|
File without changes
|
@@ -1,24 +0,0 @@
|
|
1
|
-
/*
|
2
|
-
* Use App.getDependency for Dependency Injection
|
3
|
-
* eg: var DialogService = App.getDependency('DialogService');
|
4
|
-
*/
|
5
|
-
/* perform any action on widgets/variables within this block */
|
6
|
-
Widget.onReady = function () {
|
7
|
-
/*
|
8
|
-
* variables can be accessed through 'Widget.Variables' property here
|
9
|
-
* e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
|
10
|
-
* Widget.Variables.loggedInUser.getData()
|
11
|
-
*
|
12
|
-
* widgets can be accessed through 'Widget.Widgets' property here
|
13
|
-
* e.g. to get value of text widget named 'username' use following script
|
14
|
-
* 'Widget.Widgets.username.datavalue'
|
15
|
-
*/
|
16
|
-
Widget.Widgets.iconButton.class += " " + Widget.props.style;
|
17
|
-
Widget.Widgets.iconButton.class += " " + Widget.props.tonal;
|
18
|
-
if (Widget.props.button_size == "small") {
|
19
|
-
Widget.Widgets.iconButton.class += " " + "icon-btn-sm";
|
20
|
-
}
|
21
|
-
else if (Widget.props.button_size == "large") {
|
22
|
-
Widget.Widgets.iconButton.class += " " + "icon-btn-lg";
|
23
|
-
}
|
24
|
-
};
|