@wavemaker/angular-codegen 12.0.0-next.45064 → 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 -10
- angular-codegen/dependencies/custom-widgets-m3/src/discrete_slider/discrete_slider.js +0 -171
- 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 -0
- angular-codegen/dependencies/custom-widgets-m3/src/divider/divider.js +0 -28
- 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 -11
- 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 -0
- angular-codegen/dependencies/custom-widgets-m3/src/switch_button/switch_button.js +0 -33
- 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,10 +0,0 @@
|
|
1
|
-
declare function handleValueChange(): void;
|
2
|
-
declare function handleStepValueChange(): void;
|
3
|
-
declare function handleRequiredChange(): void;
|
4
|
-
declare function activeSliderElement(): void;
|
5
|
-
declare function activeSliderElement(widgetMap: any): void;
|
6
|
-
declare function configureDiscreteSlider(): void;
|
7
|
-
declare function updateSteps(): void;
|
8
|
-
declare function updateLabelVisibility(): void;
|
9
|
-
declare function getSliderPercentage(value: any): number;
|
10
|
-
declare function getSliderPercentage(value: any): number;
|
@@ -1,171 +0,0 @@
|
|
1
|
-
function handleValueChange() {
|
2
|
-
var initialValue = Number(Widget.props.value); // Use props.value for initial value
|
3
|
-
Widget.Widgets.slider1.$element[0].style.setProperty("--end", (100 - getSliderPercentage(initialValue)) + '%');
|
4
|
-
updateSteps();
|
5
|
-
configureDiscreteSlider();
|
6
|
-
updateLabelVisibility();
|
7
|
-
}
|
8
|
-
function handleStepValueChange() {
|
9
|
-
Widget.Widgets.slider1.step = Widget.props.step_value;
|
10
|
-
updateSteps();
|
11
|
-
configureDiscreteSlider();
|
12
|
-
updateLabelVisibility();
|
13
|
-
}
|
14
|
-
function handleRequiredChange() {
|
15
|
-
Widget.Widgets.composite.required = Widget.props.required;
|
16
|
-
}
|
17
|
-
Widget.onPropertyChange = function (propname, newvalue, oldvalue) {
|
18
|
-
switch (propname) {
|
19
|
-
case 'prop-value':
|
20
|
-
case 'prop-min_value':
|
21
|
-
case 'prop-max_value':
|
22
|
-
handleValueChange();
|
23
|
-
break;
|
24
|
-
case 'prop-step_value':
|
25
|
-
handleStepValueChange();
|
26
|
-
break;
|
27
|
-
case 'prop-required':
|
28
|
-
handleRequiredChange();
|
29
|
-
break;
|
30
|
-
}
|
31
|
-
};
|
32
|
-
Widget.onReady = function () {
|
33
|
-
Widget.Widgets.container1.class += ' filled-slider discrete-slider';
|
34
|
-
handleValueChange();
|
35
|
-
handleRequiredChange();
|
36
|
-
configureDiscreteSlider();
|
37
|
-
handleStepValueChange();
|
38
|
-
updateSteps();
|
39
|
-
activeSliderElement();
|
40
|
-
updateLabelVisibility(); // Update label visibility based on initial value
|
41
|
-
};
|
42
|
-
function activeSliderElement() {
|
43
|
-
var activeSlider = Widget.Widgets.slider1.$element[0]; // Get the slider element
|
44
|
-
if (activeSlider) {
|
45
|
-
// Create a new div element
|
46
|
-
var newDiv = document.createElement('p');
|
47
|
-
newDiv.className = 'active-slider'; // Set a class for styling
|
48
|
-
// Append the new element to slider container
|
49
|
-
activeSlider.appendChild(newDiv);
|
50
|
-
}
|
51
|
-
}
|
52
|
-
/*
|
53
|
-
* Configure the slider for discrete steps.
|
54
|
-
*/
|
55
|
-
function configureDiscreteSlider() {
|
56
|
-
var slider = Widget.Widgets.slider1; // Slider widget
|
57
|
-
var minValue = parseInt(Widget.props.min_value, 10);
|
58
|
-
var maxValue = parseInt(Widget.props.max_value, 10);
|
59
|
-
var stepValueParam = Widget.props.step_value;
|
60
|
-
var initialValue = Number(Widget.props.value); // Use props.value for initial value
|
61
|
-
var stepValue = parseInt(stepValueParam, 10);
|
62
|
-
if (isNaN(minValue) || isNaN(maxValue) || isNaN(stepValue) || stepValue <= 0) {
|
63
|
-
console.error("Invalid min, max, or step values");
|
64
|
-
return;
|
65
|
-
}
|
66
|
-
// Set slider's min, max, and step attributes
|
67
|
-
slider.min = minValue;
|
68
|
-
slider.max = maxValue;
|
69
|
-
slider.step = stepValue;
|
70
|
-
// Ensure slider value is within the range
|
71
|
-
if (isNaN(initialValue) || initialValue < minValue || initialValue > maxValue) {
|
72
|
-
console.error("Slider value is out of range");
|
73
|
-
slider.datavalue = minValue; // Default to minValue if the provided value is invalid
|
74
|
-
}
|
75
|
-
else {
|
76
|
-
slider.datavalue = initialValue; // Set the slider to the provided value
|
77
|
-
}
|
78
|
-
// Set initial position
|
79
|
-
Widget.Widgets.slider1.$element[0].style.setProperty("--end", (100 - getSliderPercentage(slider.datavalue)) + '%');
|
80
|
-
}
|
81
|
-
/*
|
82
|
-
* Update the labels displayed on the slider.
|
83
|
-
*/
|
84
|
-
function updateSteps() {
|
85
|
-
var slider = Widget.Widgets.slider1;
|
86
|
-
var labelContainer = Widget.Widgets.container2;
|
87
|
-
if (slider && labelContainer) {
|
88
|
-
var minValue = parseInt(slider.min, 10);
|
89
|
-
var maxValue = parseInt(slider.max, 10);
|
90
|
-
var stepValue = parseInt(slider.step, 10);
|
91
|
-
// Calculate the number of steps
|
92
|
-
var numSteps = Math.ceil((maxValue - minValue) / stepValue);
|
93
|
-
// Clear existing labels
|
94
|
-
labelContainer.$element[0].innerHTML = '';
|
95
|
-
// Create and position labels for each step
|
96
|
-
for (var i = 0; i <= numSteps; i++) {
|
97
|
-
var stepLabel = document.createElement('p');
|
98
|
-
stepLabel.className = 'step-label';
|
99
|
-
var labelValue = minValue + (i * stepValue);
|
100
|
-
// Ensure labelValue does not exceed maxValue
|
101
|
-
if (labelValue > maxValue)
|
102
|
-
break;
|
103
|
-
stepLabel.textContent = labelValue;
|
104
|
-
// Calculate and set label position
|
105
|
-
var leftPosition = Math.round(((labelValue - minValue) / (maxValue - minValue)) * 100 * 100) / 100; // Rounded to two decimal places
|
106
|
-
var adjustedPosition = leftPosition - 1;
|
107
|
-
stepLabel.style.setProperty('--position', "".concat(adjustedPosition, "%"));
|
108
|
-
stepLabel.setAttribute('data-position', adjustedPosition);
|
109
|
-
// Append label to the container
|
110
|
-
labelContainer.$element[0].appendChild(stepLabel);
|
111
|
-
}
|
112
|
-
// Set container positioning and add event listener for updating label visibility
|
113
|
-
labelContainer.$element[0].style.position = 'relative';
|
114
|
-
Widget.Widgets.slider1.$element[0].addEventListener('input', updateLabelVisibility);
|
115
|
-
// Initial update of label visibility
|
116
|
-
updateLabelVisibility();
|
117
|
-
}
|
118
|
-
}
|
119
|
-
function updateLabelVisibility() {
|
120
|
-
var slider = Widget.Widgets.slider1;
|
121
|
-
var labels = Widget.Widgets.container2.$element[0].getElementsByClassName('step-label');
|
122
|
-
if (slider) {
|
123
|
-
var sliderValue = Number(slider.datavalue); // Get the current slider value
|
124
|
-
var minValue_1 = parseInt(slider.min, 10);
|
125
|
-
var maxValue_1 = parseInt(slider.max, 10);
|
126
|
-
var stepValue_1 = parseInt(slider.step, 10);
|
127
|
-
// Calculate the number of steps
|
128
|
-
var targets = Array.from({
|
129
|
-
length: Math.ceil((maxValue_1 - minValue_1) / stepValue_1) + 1
|
130
|
-
}, function (_, i) { return minValue_1 + i * stepValue_1; }).filter(function (value) { return value <= maxValue_1; });
|
131
|
-
// Update label states based on slider value and targets
|
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
|
-
// Remove existing classes
|
136
|
-
label.classList.remove('hidden', 'inactive', 'active');
|
137
|
-
// Determine the label's state based on the slider value
|
138
|
-
if (targets.includes(labelValue)) {
|
139
|
-
if (labelValue === sliderValue) {
|
140
|
-
label.classList.add('hidden'); // Hide label if it matches the slider value
|
141
|
-
}
|
142
|
-
else if (labelValue < sliderValue) {
|
143
|
-
label.classList.add('inactive'); // Label is inactive if it is less than the slider value
|
144
|
-
}
|
145
|
-
else {
|
146
|
-
label.classList.add('active'); // Label is active if it is greater than the slider value
|
147
|
-
}
|
148
|
-
}
|
149
|
-
// Ensure that labels are visible based on their state
|
150
|
-
label.style.display = 'block';
|
151
|
-
}
|
152
|
-
}
|
153
|
-
}
|
154
|
-
/*
|
155
|
-
* Convert slider value to percentage based on min and max
|
156
|
-
*/
|
157
|
-
function getSliderPercentage(value) {
|
158
|
-
var slider = Widget.Widgets.slider1;
|
159
|
-
var minValue = parseInt(slider.min, 10);
|
160
|
-
var maxValue = parseInt(slider.max, 10);
|
161
|
-
return ((value - minValue) / (maxValue - minValue)) * 100;
|
162
|
-
}
|
163
|
-
/*
|
164
|
-
* Handle slider value changes.
|
165
|
-
*/
|
166
|
-
Widget.slider1Change = function ($event, widget, newVal, oldVal) {
|
167
|
-
var sliderValue = newVal; // Use the new slider value
|
168
|
-
widget.$element[0].style.setProperty("--end", (100 - getSliderPercentage(sliderValue)) + '%');
|
169
|
-
// Update label visibility on slider change
|
170
|
-
updateLabelVisibility();
|
171
|
-
};
|
@@ -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%22container1%22+class%3D%22filled-slider%22%3E%0A++++++++++++%3Cwm-slider+name%3D%22slider1%22+class%3D%22cst-slider%22+datavalue%3D%22bind%3Aprops.value%22+on-change%3D%22slider1Change%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++++++++%3C%2Fwm-container%3E%0A++++++++%3Cwm-container+name%3D%22container2%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": "function+handleValueChange%28%29+%7B%0A++++const+initialValue+%3D+Number%28Widget.props.value%29%3B+%2F%2F+Use+props.value+for+initial+value%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28initialValue%29%29+%2B+%27%25%27%29%3B%0A++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleStepValueChange%28%29+%7B%0A++++Widget.Widgets.slider1.step+%3D+Widget.props.step_value%3B%0A++++updateSteps%28%29%3B%0A++++configureDiscreteSlider%28%29%3B%0A++++updateLabelVisibility%28%29%3B%0A%7D%0A%0Afunction+handleRequiredChange%28%29+%7B%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A%7D%0A%0AWidget.onPropertyChange+%3D+function%28propname%2C+newvalue%2C+oldvalue%29+%7B%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++++++++++++handleValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-step_value%27%3A%0A++++++++++++handleStepValueChange%28%29%3B%0A++++++++++++break%3B%0A++++++++case+%27prop-required%27%3A%0A++++++++++++handleRequiredChange%28%29%3B%0A++++++++++++break%3B%0A++++%7D%0A%7D%0A%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++Widget.Widgets.container1.class+%2B%3D+%27+filled-slider+discrete-slider%27%3B%0A++++handleValueChange%28%29%0A++++handleRequiredChange%28%29%0A++++configureDiscreteSlider%28%29%3B%0A++++handleStepValueChange%28%29%3B%0A++++updateSteps%28%29%3B%0A++++activeSliderElement%28%29%3B%0A++++updateLabelVisibility%28%29%3B+%2F%2F+Update+label+visibility+based+on+initial+value%0A%7D%3B%0A%0A%0A%0Afunction+activeSliderElement%28%29+%7B%0A++++const+activeSlider+%3D+Widget.Widgets.slider1.%24element%5B0%5D%3B+%2F%2F+Get+the+slider+element%0A%0A++++if+%28activeSlider%29+%7B%0A++++++++%2F%2F+Create+a+new+div+element%0A++++++++const+newDiv+%3D+document.createElement%28%27p%27%29%3B%0A++++++++newDiv.className+%3D+%27active-slider%27%3B+%2F%2F+Set+a+class+for+styling%0A++++++++%2F%2F+Append+the+new+element+to+slider+container%0A++++++++activeSlider.appendChild%28newDiv%29%3B%0A++++%7D%0A%7D%0A%0A%2F*+%0A+*+Configure+the+slider+for+discrete+steps.%0A+*%2F%0Afunction+configureDiscreteSlider%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B+%2F%2F+Slider+widget%0A++++const+minValue+%3D+parseInt%28Widget.props.min_value%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28Widget.props.max_value%2C+10%29%3B%0A++++const+stepValueParam+%3D+Widget.props.step_value%3B%0A++++const+initialValue+%3D+Number%28Widget.props.value%29%3B+%2F%2F+Use+props.value+for+initial+value%0A%0A++++const+stepValue+%3D+parseInt%28stepValueParam%2C+10%29%3B%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++++%2F%2F+Set+slider%27s+min%2C+max%2C+and+step+attributes%0A++++slider.min+%3D+minValue%3B%0A++++slider.max+%3D+maxValue%3B%0A++++slider.step+%3D+stepValue%3B%0A%0A++++%2F%2F+Ensure+slider+value+is+within+the+range%0A++++if+%28isNaN%28initialValue%29+%7C%7C+initialValue+%3C+minValue+%7C%7C+initialValue+%3E+maxValue%29+%7B%0A++++++++console.error%28%22Slider+value+is+out+of+range%22%29%3B%0A++++++++slider.datavalue+%3D+minValue%3B+%2F%2F+Default+to+minValue+if+the+provided+value+is+invalid%0A++++%7D+else+%7B%0A++++++++slider.datavalue+%3D+initialValue%3B+%2F%2F+Set+the+slider+to+the+provided+value%0A++++%7D%0A%0A++++%2F%2F+Set+initial+position%0A++++Widget.Widgets.slider1.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28slider.datavalue%29%29+%2B+%27%25%27%29%3B%0A%7D%0A%0A%2F*%0A+*+Update+the+labels+displayed+on+the+slider.%0A+*%2F%0Afunction+updateSteps%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+labelContainer+%3D+Widget.Widgets.container2%3B%0A%0A++++if+%28slider+%26%26+labelContainer%29+%7B%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++++++++%2F%2F+Calculate+the+number+of+steps%0A++++++++const+numSteps+%3D+Math.ceil%28%28maxValue+-+minValue%29+%2F+stepValue%29%3B%0A%0A++++++++%2F%2F+Clear+existing+labels%0A++++++++labelContainer.%24element%5B0%5D.innerHTML+%3D+%27%27%3B%0A%0A++++++++%2F%2F+Create+and+position+labels+for+each+step%0A++++++++for+%28let+i+%3D+0%3B+i+%3C%3D+numSteps%3B+i%2B%2B%29+%7B%0A++++++++++++const+stepLabel+%3D+document.createElement%28%27p%27%29%3B%0A++++++++++++stepLabel.className+%3D+%27step-label%27%3B%0A++++++++++++const+labelValue+%3D+minValue+%2B+%28i+*+stepValue%29%3B%0A%0A++++++++++++%2F%2F+Ensure+labelValue+does+not+exceed+maxValue%0A++++++++++++if+%28labelValue+%3E+maxValue%29+break%3B%0A%0A++++++++++++stepLabel.textContent+%3D+labelValue%3B%0A%0A++++++++++++%2F%2F+Calculate+and+set+label+position%0A++++++++++++const+leftPosition+%3D+Math.round%28%28%28labelValue+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100+*+100%29+%2F+100%3B+%2F%2F+Rounded+to+two+decimal+places%0A++++++++++++const+adjustedPosition+%3D+leftPosition+-+1%3B%0A++++++++++++stepLabel.style.setProperty%28%27--position%27%2C+%60%24%7BadjustedPosition%7D%25%60%29%3B%0A%0A++++++++++++stepLabel.setAttribute%28%27data-position%27%2C+adjustedPosition%29%3B%0A%0A++++++++++++%2F%2F+Append+label+to+the+container%0A++++++++++++labelContainer.%24element%5B0%5D.appendChild%28stepLabel%29%3B%0A++++++++%7D%0A%0A++++++++%2F%2F+Set+container+positioning+and+add+event+listener+for+updating+label+visibility%0A++++++++labelContainer.%24element%5B0%5D.style.position+%3D+%27relative%27%3B%0A++++++++Widget.Widgets.slider1.%24element%5B0%5D.addEventListener%28%27input%27%2C+updateLabelVisibility%29%3B%0A%0A++++++++%2F%2F+Initial+update+of+label+visibility%0A++++++++updateLabelVisibility%28%29%3B%0A++++%7D%0A%7D%0A%0Afunction+updateLabelVisibility%28%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+labels+%3D+Widget.Widgets.container2.%24element%5B0%5D.getElementsByClassName%28%27step-label%27%29%3B%0A%0A++++if+%28slider%29+%7B%0A++++++++const+sliderValue+%3D+Number%28slider.datavalue%29%3B+%2F%2F+Get+the+current+slider+value%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++++++++%2F%2F+Calculate+the+number+of+steps%0A++++++++const+targets+%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.filter%28value+%3D%3E+value+%3C%3D+maxValue%29%3B%0A++++++++%2F%2F+Update+label+states+based+on+slider+value+and+targets%0A++++++++for+%28const+label+of+labels%29+%7B%0A++++++++++++const+labelValue+%3D+parseInt%28label.textContent%2C+10%29%3B%0A%0A++++++++++++%2F%2F+Remove+existing+classes%0A++++++++++++label.classList.remove%28%27hidden%27%2C+%27inactive%27%2C+%27active%27%29%3B%0A%0A++++++++++++%2F%2F+Determine+the+label%27s+state+based+on+the+slider+value%0A++++++++++++if+%28targets.includes%28labelValue%29%29+%7B%0A++++++++++++++++if+%28labelValue+%3D%3D%3D+sliderValue%29+%7B%0A++++++++++++++++++++label.classList.add%28%27hidden%27%29%3B+%2F%2F+Hide+label+if+it+matches+the+slider+value%0A++++++++++++++++%7D+else+if+%28labelValue+%3C+sliderValue%29+%7B%0A++++++++++++++++++++label.classList.add%28%27inactive%27%29%3B+%2F%2F+Label+is+inactive+if+it+is+less+than+the+slider+value%0A++++++++++++++++%7D+else+%7B%0A++++++++++++++++++++label.classList.add%28%27active%27%29%3B+%2F%2F+Label+is+active+if+it+is+greater+than+the+slider+value%0A++++++++++++++++%7D%0A++++++++++++%7D%0A%0A++++++++++++%2F%2F+Ensure+that+labels+are+visible+based+on+their+state%0A++++++++++++label.style.display+%3D+%27block%27%3B%0A++++++++%7D%0A++++%7D%0A%7D%0A%0A%2F*%0A+*+Convert+slider+value+to+percentage+based+on+min+and+max%0A+*%2F%0Afunction+getSliderPercentage%28value%29+%7B%0A++++const+slider+%3D+Widget.Widgets.slider1%3B%0A++++const+minValue+%3D+parseInt%28slider.min%2C+10%29%3B%0A++++const+maxValue+%3D+parseInt%28slider.max%2C+10%29%3B%0A++++return+%28%28value+-+minValue%29+%2F+%28maxValue+-+minValue%29%29+*+100%3B%0A%7D%0A%0A%2F*%0A+*+Handle+slider+value+changes.%0A+*%2F%0AWidget.slider1Change+%3D+function%28%24event%2C+widget%2C+newVal%2C+oldVal%29+%7B%0A++++const+sliderValue+%3D+newVal%3B+%2F%2F+Use+the+new+slider+value%0A++++widget.%24element%5B0%5D.style.setProperty%28%22--end%22%2C+%28100+-+getSliderPercentage%28sliderValue%29%29+%2B+%27%25%27%29%3B%0A%0A++++%2F%2F+Update+label+visibility+on+slider+change%0A++++updateLabelVisibility%28%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.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.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++++width%3A+100%25%3B%0A%7D%0A%0A.app-container.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.filled-slider%3Ahas%28.app-slider.slider.cst-slider.vertical%29+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-container.filled-slider.discrete-slider+%7B%0A++++display%3A+flex%3B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A%5Bdir%3Drtl%5D+.app-container.filled-slider+.app-slider.slider.cst-slider+%7B%0A++++transform%3A+scaleX%28-1%29%3B%0A%7D%0A%0A.app-container.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.filled-slider+.app-slider.slider.cst-slider%3Einput%3Aonly-of-type+%7B%0A++++pointer-events%3A+all%3B%0A%7D%0A%0A.app-container.filled-slider+.app-slider.slider.cst-slider%3Einput%2Binput+%7B%0A++++position%3A+absolute%3B%0A%7D%0A%0A.app-container.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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%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",
|
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%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%22slider1Change(%24event%2C%20widget%2C%20newVal%2C%20oldVal)%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A"
|
7
|
-
};
|
File without changes
|
@@ -1,28 +0,0 @@
|
|
1
|
-
Widget.onReady = function () {
|
2
|
-
var orientation_array = Widget.props.orientation.toLowerCase().split("/");
|
3
|
-
var orientation = orientation_array[0]; // Vertical or Horizontal
|
4
|
-
var length = orientation_array[1];
|
5
|
-
Widget.Widgets.divider1.class = (" " + orientation + "-divider");
|
6
|
-
Widget.Widgets.divider1.class += (" " + length);
|
7
|
-
var divider1 = Widget.Widgets.divider1;
|
8
|
-
if (orientation === "vertical" && length === "full-width") {
|
9
|
-
var vertical_height = "".concat(Widget.props.vertical_height, "px");
|
10
|
-
divider1.$element.css({
|
11
|
-
'height': "".concat(vertical_height),
|
12
|
-
});
|
13
|
-
}
|
14
|
-
else if (orientation === "vertical" && length === "inset") {
|
15
|
-
var vertical_height = Widget.props.vertical_height - 16;
|
16
|
-
vertical_height = "".concat(vertical_height, "px");
|
17
|
-
divider1.$element.css({
|
18
|
-
'height': "".concat(vertical_height),
|
19
|
-
});
|
20
|
-
}
|
21
|
-
else if (orientation === "vertical" && length === "middle-inset") {
|
22
|
-
var vertical_height = Widget.props.vertical_height - 32;
|
23
|
-
vertical_height = "".concat(vertical_height, "px");
|
24
|
-
divider1.$element.css({
|
25
|
-
'height': "".concat(vertical_height),
|
26
|
-
});
|
27
|
-
}
|
28
|
-
};
|
@@ -1,7 +0,0 @@
|
|
1
|
-
export var divider = {
|
2
|
-
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22divider1%22+class%3D%22horizontal-divider+full-width%22+style%3D%22+%22%3E%3C%2Fwm-container%3E%0A%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.onReady+%3D+function%28%29+%7B%0A++++const+orientation_array+%3D+Widget.props.orientation.toLowerCase%28%29.split%28%22%2F%22%29%3B%0A++++const+orientation+%3D+orientation_array%5B0%5D%3B+%2F%2F+Vertical+or+Horizontal%0A++++const+length+%3D+orientation_array%5B1%5D%3B%0A%0A++++Widget.Widgets.divider1.class+%3D+%28%22+%22+%2B+orientation+%2B+%22-divider%22%29%3B%0A++++Widget.Widgets.divider1.class+%2B%3D+%28%22+%22+%2B+length%29%3B%0A++++let+divider1+%3D+Widget.Widgets.divider1%3B%0A%0A++++if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22full-width%22%29+%7B%0A++++++++let+vertical_height+%3D+%60%24%7BWidget.props.vertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D+else+if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22inset%22%29+%7B%0A++++++++let+vertical_height+%3D+Widget.props.vertical_height+-+16%3B%0A++++++++vertical_height+%3D+%60%24%7Bvertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D+else+if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22middle-inset%22%29+%7B%0A++++++++let+vertical_height+%3D+Widget.props.vertical_height+-+32%3B%0A++++++++vertical_height+%3D+%60%24%7Bvertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D%0A%0A%7D",
|
4
|
-
styles: ".horizontal-divider+%7B%0A++++display%3A+flex%3B%0A++++border-top%3A+1px+solid+%23CAC4D0%3B%0A++++height%3A+1px+%21important%3B%0A%7D%0A%0A.app-container%3E.horizontal-divider.full-width+%7B%0A++++width%3A+100%25%3B%0A++++margin%3A+auto%3B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.horizontal-divider.inset+%7B%0A++++margin-left%3A+16px%3B%0A%7D%0A%0A.horizontal-divider.middle-inset+%7B%0A++++display%3A+flex%3B%0A++++margin-left%3A+16px%3B%0A++++margin-right%3A+16px%3B%0A%7D%0A%0A.vertical-divider+%7B%0A++++width%3A+1px%3B%0A++++border-left%3A+1px+solid+%23CAC4D0%3B%0A++++min-height%3A+1px%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+16px%3B%0A++++box-sizing%3A+border-box%3B%0A%7D%0A%0A.vertical-divider.middle-inset+%7B%0A++++margin-top%3A+16px%3B%0A++++margin-bottom%3A+16px%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
|
-
};
|
@@ -1,7 +0,0 @@
|
|
1
|
-
export var icon_button = {
|
2
|
-
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-button+class%3D%22icon-btn%22+caption%3D%22%22+type%3D%22button%22+margin%3D%22unset%22+name%3D%22iconButton%22+iconclass%3D%22bind%3Aprops.icon_class%22+disabled%3D%22bind%3Aprops.state+%3D%3D+%26quot%3BDisabled%26quot%3B%22%3E%3C%2Fwm-button%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%0A++++Widget.Widgets.iconButton.class+%2B%3D+%22+%22+%2B+Widget.props.style.toLowerCase%28%29%3B%0A%0A++++if+%28Widget.props.tonal+%21%3D%3D+%22None%22%29+%7B%0A++++++++Widget.Widgets.iconButton.class+%2B%3D+%22+%22+%2B+Widget.props.tonal.toLowerCase%28%29%3B%0A++++%7D+else+%7B%0A++++++++if+%28Widget.Widgets.iconButton.class.includes%28%22success%22%29%29+%7B%0A++++++++++++Widget.Widgets.iconButton.class.remove%28%22success%22%29%3B%0A++++++++%7D+else+if+%28Widget.Widgets.iconButton.class.includes%28%22error%22%29%29+%7B%0A++++++++++++Widget.Widgets.iconButton.class.remove%28%22error%22%29%3B%0A++++++++%7D+else+if+%28Widget.Widgets.iconButton.class.includes%28%22warning%22%29%29+%7B%0A++++++++++++Widget.Widgets.iconButton.class.remove%28%22warning%22%29%3B%0A++++++++%7D+else+if+%28Widget.Widgets.iconButton.class.includes%28%22info%22%29%29+%7B%0A++++++++++++Widget.Widgets.iconButton.class.remove%28%22info%22%29%3B%0A++++++++%7D%0A++++%7D%0A++++if+%28Widget.props.button_size+%3D%3D+%22Small%22%29+%7B%0A++++++++Widget.Widgets.iconButton.class+%2B%3D+%22+%22+%2B+%22icon-btn-sm%22%3B%0A++++%7D+else+if+%28Widget.props.button_size+%3D%3D+%22Large%22%29+%7B%0A++++++++Widget.Widgets.iconButton.class+%2B%3D+%22+%22+%2B+%22icon-btn-lg%22%3B%0A++++%7D+else+if+%28Widget.props.button_size+%3D%3D+%22Regular%22%29+%7B%0A++++++++if+%28Widget.Widgets.iconButton.class.includes%28%22icon-btn-sm%22%29%29+%7B%0A++++++++++++Widget.Widgets.iconButton.class.remove%28%22icon-btn-sm%22%29%3B%0A++++++++%7D+else+if+%28Widget.Widgets.iconButton.class.includes%28%22icon-btn-lg%22%29%29+%7B%0A++++++++++++Widget.Widgets.iconButton.class.remove%28%22icon-btn-lg%22%29%3B%0A++++++++%7D%0A++++%7D%0A%7D%3B",
|
4
|
-
styles: ".app-button.icon-btn+.app-icon+%7B%0A++++padding%3A+0%3B%0A++++font-size%3A+24px%3B%0A%7D%0A%0A.app-button.icon-btn+%7B%0A++++display%3A+inline-flex%3B%0A++++justify-content%3A+center%3B%0A++++align-items%3A+center%3B%0A++++padding%3A+8px%3B%0A++++min-height%3A+40px%3B%0A++++min-width%3A+40px%3B%0A++++border-radius%3A+100%25%3B%0A++++box-shadow%3A+none%3B%0A++++border-color%3A+transparent%3B%0A++++background-color%3A+transparent%3B%0A%7D%0A%0A.app-button.icon-btn%3A%3Abefore+%7B%0A++++content%3A+%27%27%3B%0A++++position%3A+absolute%3B%0A++++opacity%3A+0%3B%0A++++height%3A+100%25%3B%0A++++width%3A+100%25%3B%0A++++border-radius%3A+100%25%3B%0A%7D%0A%0A.app-button.icon-btn%3Ahover%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-surface-variant-hover%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn%3Aactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-surface-variant-active%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn%3Afocus%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-surface-variant-focus%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.filled+%7B%0A++++background%3A+var%28--wm-color-primary%29%3B%0A++++color%3A+var%28--wm-color-on-primary%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled%3Ahover%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-primary-hover%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.filled%3Afocus%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-primary-focus%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.filled%3Aactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-on-primary-active%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.outlined+%7B%0A++++color%3A+var%28--wm-color-on-surface-variant%29%3B%0A++++border%3A+1px+solid+var%28--wm-color-outline%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled%3Adisabled%2C%0A.app-button.icon-btn.filled.success%3Adisabled%2C%0A.app-button.icon-btn.filled.danger%3Adisabled%2C%0A.app-button.icon-btn.filled.info%3Adisabled%2C%0A.app-button.icon-btn.filled.warning%3Adisabled+%7B%0A++++background%3A+var%28--wm-state-on-surface-focus%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.outlined%3Adisabled%2C%0A.app-button.icon-btn.outlined.success%3Adisabled%2C%0A.app-button.icon-btn.outlined.danger%3Adisabled%2C%0A.app-button.icon-btn.outlined.info%3Adisabled%2C%0A.app-button.icon-btn.outlined.warning%3Adisabled+%7B%0A++++border-color%3A+var%28--wm-state-on-surface-focus%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.outlined%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.standard%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.filled.success%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.filled.danger%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.filled.info%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.filled.warning%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.outlined.success%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.outlined.danger%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.outlined.warning%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.outlined.info%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.standard.success%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.standard.danger%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.standard.warning%3Adisabled+.app-icon%2C%0A.app-button.icon-btn.standard.info%3Adisabled+.app-icon+%7B%0A++++opacity%3A+0.38%3B%0A++++color%3A+var%28--wm-color-on-surface%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled.icon-btn-sm%2C%0A.app-button.icon-btn.standard.icon-btn-sm%2C%0A.app-button.icon-btn.outlined.icon-btn-sm+%7B%0A++++display%3A+inline-flex%3B%0A++++justify-content%3A+center%3B%0A++++align-items%3A+center%3B%0A++++min-height%3A+32px%3B%0A++++min-width%3A+32px%3B%0A++++padding%3A+4px%3B%0A%7D%0A%0A.app-button.icon-btn.filled.icon-btn-sm+.app-icon%2C%0A.app-button.icon-btn.standard.icon-btn-sm+.app-icon%2C%0A.app-button.icon-btn.outlined.icon-btn-sm+.app-icon+%7B%0A++++font-size%3A+18px%3B%0A%7D%0A%0A.app-button.icon-btn.filled.icon-btn-lg%2C%0A.app-button.icon-btn.standard.icon-btn-lg%2C%0A.app-button.icon-btn.outlined.icon-btn-lg+%7B%0A++++display%3A+inline-flex%3B%0A++++justify-content%3A+center%3B%0A++++align-items%3A+center%3B%0A++++min-height%3A+48px%3B%0A++++min-width%3A+48px%3B%0A++++padding%3A+4px%3B%0A%7D%0A%0A.app-button.icon-btn.filled.icon-btn-lg+.app-icon%2C%0A.app-button.icon-btn.standard.icon-btn-lg+.app-icon%2C%0A.app-button.icon-btn.outlined.icon-btn-lg+.app-icon+%7B%0A++++font-size%3A+32px%3B%0A%7D%0A%0A.app-button.icon-btn.standard.success+.app-icon%2C%0A.app-button.icon-btn.outlined.success+.app-icon+%7B%0A++++color%3A+var%28--wm-color-success%29%3B%0A%7D%0A%0A.app-button.icon-btn.standard.success%3Ahover%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.success%3Ahover%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-success-hover%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.success%3Afocus%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.success%3Afocus%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-success-focus%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.success%3Aactive%3A%3Abefore%2C%0A.app-button.icon-btn.outlied.success%3Aactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-success-active%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.outlined.success+%7B%0A++++border%3A+1px+solid+var%28--wm-color-success%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled.success+%7B%0A++++background%3A+var%28--wm-color-success%29%3B%0A++++color%3A+var%28--wm-color-on-success%29%3B%0A%7D%0A%0A.app-button.icon-btn.standard.info+.app-icon%2C%0A.app-button.icon-btn.outlined.info+.app-icon+%7B%0A++++color%3A+var%28--wm-color-info%29%3B%0A%7D%0A%0A.app-button.icon-btn.standard.info%3Ahover%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.info%3Ahover%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-info-hover%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.info%3Afocus%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.info%3Afocus%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-info-focus%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.info%3Aactive%3A%3Abefore%2C%0A.app-button.icon-btn.outlied.info%3Aactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-info-active%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.outlined.info+%7B%0A++++border%3A+1px+solid+var%28--wm-color-info%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled.info+%7B%0A++++background%3A+var%28--wm-color-info%29%3B%0A++++color%3A+var%28--wm-color-on-info%29%3B%0A%7D%0A%0A.app-button.icon-btn.standard.error+.app-icon%2C%0A.app-button.icon-btn.outlined.error+.app-icon+%7B%0A++++color%3A+var%28--wm-color-error%29%3B%0A%7D%0A%0A.app-button.icon-btn.standard.error%3Ahover%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.error%3Ahover%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-error-hover%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.error%3Afocus%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.error%3Afocus%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-error-focus%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.error%3Aactive%3A%3Abefore%2C%0A.app-button.icon-btn.outlied.error%3Aactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-error-active%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.outlined.error+%7B%0A++++border%3A+1px+solid+var%28--wm-color-error%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled.error+%7B%0A++++background%3A+var%28--wm-color-error%29%3B%0A++++color%3A+var%28--wm-color-on-error%29%3B%0A%7D%0A%0A.app-button.icon-btn.standard.warning+.app-icon%2C%0A.app-button.icon-btn.outlined.warning+.app-icon+%7B%0A++++color%3A+var%28--wm-color-warning%29%3B%0A%7D%0A%0A.app-button.icon-btn.standard.warning%3Ahover%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.warning%3Ahover%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-warning-hover%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.warning%3Afocus%3A%3Abefore%2C%0A.app-button.icon-btn.outlined.warning%3Afocus%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-warning-focus%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.standard.warning%3Aactive%3A%3Abefore%2C%0A.app-button.icon-btn.outlied.warning%3Aactive%3A%3Abefore+%7B%0A++++background%3A+var%28--wm-state-warning-active%29%3B%0A++++opacity%3A+1%3B%0A%7D%0A%0A.app-button.icon-btn.outlined.warning+%7B%0A++++border%3A+1px+solid+var%28--wm-color-warning%29%3B%0A%7D%0A%0A.app-button.icon-btn.filled.warning+%7B%0A++++background%3A+var%28--wm-color-warning%29%3B%0A++++color%3A+var%28--wm-color-on-warning%29%3B%0A%7D",
|
5
|
-
variables: "%7B+%7D",
|
6
|
-
config: "%7B%0A%09%22widgetType%22%3A%20%22wm-custom-widget%22%2C%0A%09%22properties%22%3A%20%7B%0A%09%09%22style%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22Style%22%2C%0A%09%09%09%22description%22%3A%20%22%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Filled%22%2C%20%22Outlined%22%2C%20%22Standard%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Standard%22%0A%09%09%7D%2C%0A%09%09%22state%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22State%22%2C%0A%09%09%09%22description%22%3A%20%22%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Enabled%22%2C%20%22Disabled%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Enabled%22%0A%09%09%7D%2C%0A%09%09%22icon_class%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22string%22%2C%0A%09%09%09%22displayName%22%3A%20%22Icon%20class%22%2C%0A%09%09%09%22description%22%3A%20%22%22%2C%0A%09%09%09%22value%22%3A%20%22fa%20fa-gear%22%2C%0A%09%09%09%22widget%22%3A%20%22select-icon%22%0A%09%09%7D%2C%0A%09%09%22button_size%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22Button%20size%22%2C%0A%09%09%09%22description%22%3A%20%22This%20is%20an%20optinal%20property.%20the%20value%20for%20this%20property%20must%20be%20either%20small%20or%20large%22%2C%0A%09%09%09%22options%22%3A%20%5B%22Small%22%2C%20%22Regular%22%2C%20%22Large%22%5D%2C%0A%09%09%09%22value%22%3A%20%22Regular%22%0A%09%09%7D%2C%0A%09%09%22tonal%22%3A%20%7B%0A%09%09%09%22type%22%3A%20%22list%22%2C%0A%09%09%09%22displayName%22%3A%20%22Tonal%22%2C%0A%09%09%09%22description%22%3A%20%22This%20is%20an%20optinal%20property.%20The%20value%20for%20this%20property%20must%20be%20either%20success%2C%20error%2C%20info%20or%20warning%22%2C%0A%09%09%09%22options%22%3A%20%5B%22None%22%2C%20%22Success%22%2C%20%22Error%22%2C%20%22Info%22%2C%20%22Warning%22%5D%2C%0A%09%09%09%22value%22%3A%20%22None%22%0A%09%09%7D%0A%09%7D%2C%0A%09%22events%22%3A%20%7B%0A%09%09%22onRender%22%3A%20%7B%0A%09%09%09%22description%22%3A%20%22Callback%20action%20to%20test%20event%20in%20the%20properties%20panel%22%2C%0A%09%09%09%22eventData%22%3A%20%22%22%2C%0A%09%09%09%22displayName%22%3A%20%22Render%22%0A%09%09%7D%0A%09%7D%0A%7D%0A",
|
7
|
-
};
|
File without changes
|
@@ -1,34 +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
|
-
if (Widget.props.selected.toString().toLowerCase() === "true") {
|
8
|
-
Widget.Widgets.chip.class += " selected";
|
9
|
-
}
|
10
|
-
if (Widget.props.configuration.toString().toLowerCase().includes("avatar")) {
|
11
|
-
Widget.Widgets.chip.class += " rounded";
|
12
|
-
}
|
13
|
-
/*
|
14
|
-
* variables can be accessed through 'Widget.Variables' property here
|
15
|
-
* e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
|
16
|
-
* Widget.Variables.loggedInUser.getData()
|
17
|
-
*
|
18
|
-
* widgets can be accessed through 'Widget.Widgets' property here
|
19
|
-
* e.g. to get value of text widget named 'username' use following script
|
20
|
-
* 'Widget.Widgets.username.datavalue'
|
21
|
-
*/
|
22
|
-
};
|
23
|
-
Widget.button1Click = function ($event, widget) {
|
24
|
-
Widget.Widgets.chip.class += " clear";
|
25
|
-
};
|
26
|
-
Widget.chipClick = function ($event, widget) {
|
27
|
-
var isSelected = Widget.Widgets.chip.class.split(" ").includes("selected");
|
28
|
-
if (!isSelected) {
|
29
|
-
Widget.Widgets.chip.class += " selected";
|
30
|
-
}
|
31
|
-
else {
|
32
|
-
Widget.Widgets.chip.class = Widget.Widgets.chip.class.split(" ").filter(function (val) { return val !== "selected"; }).join(" ");
|
33
|
-
}
|
34
|
-
};
|
File without changes
|
@@ -1 +0,0 @@
|
|
1
|
-
{ }
|