@wavemaker/custom-widgets-m3 12.0.0-next.141130

custom-widgets-m3/index.d.ts

@@ -0,0 +1,11 @@
+export * from './src/textfield/page.min';
+export * from './src/checkbox_set/page.min';
+export * from './src/divider/page.min';
+export * from './src/icon_button/page.min';
+export * from './src/input_chip/page.min';
+export * from './src/radio_set/page.min';
+export * from './src/switch_button/page.min';
+export * from './src/slider/page.min';
+export * from './src/progressbar/page.min';
+export * from './src/discrete_slider/page.min';
+export * from './src/widget-registry';

custom-widgets-m3/index.js

@@ -0,0 +1,11 @@
+export * from './src/textfield/page.min';
+export * from './src/checkbox_set/page.min';
+export * from './src/divider/page.min';
+export * from './src/icon_button/page.min';
+export * from './src/input_chip/page.min';
+export * from './src/radio_set/page.min';
+export * from './src/switch_button/page.min';
+export * from './src/slider/page.min';
+export * from './src/progressbar/page.min';
+export * from './src/discrete_slider/page.min';
+export * from './src/widget-registry';

custom-widgets-m3/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@wavemaker/custom-widgets-m3",
+  "version": "12.0.0-next.141130",
+  "description": "A collection of custom widgets",
+  "module": "index",
+  "main": "index",
+  "scripts": {
+    "build:cjs": "webpack --config webpack.config.cjs.js --mode development",
+    "build:esm": "webpack --config webpack.config.js --mode development",
+    "build": "tsc && npm run build:cjs && npm run build:esm && node ./scripts/build.js post-build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "widgets",
+    "custom-widgets"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "execa": "^5.0.0",
+    "fs-extra": "^11.2.0",
+    "html-loader": "^5.1.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.5.4",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "yargs": "^16.2.0",
+    "tar": "^6.1.0"
+  },
+  "exports": {
+    "import": "./index",
+    "require": "./dist/custom-widgets-bundle.cjs.js"
+  }
+}

custom-widgets-m3/scripts/build.d.ts

@@ -0,0 +1 @@
+export {};

custom-widgets-m3/scripts/build.js

@@ -0,0 +1,133 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var fs = require('fs-extra');
+var path = require('path');
+var projectDir = '.';
+var execa = require('execa');
+var yargs = require('yargs');
+var hideBin = require('yargs/helpers').hideBin;
+var tar = require('tar');
+function updatePackageVersion(packagePath, key, version) {
+    return __awaiter(this, void 0, void 0, function () {
+        var content;
+        return __generator(this, function (_a) {
+            content = fs.readFileSync(packagePath, 'utf8');
+            content = content.replace(new RegExp("\"".concat(key, "\"\\s*:\\s*\"[^\"]*\"")), "\"".concat(key, "\": \"").concat(version, "\""));
+            fs.writeFileSync(packagePath, content);
+            return [2 /*return*/];
+        });
+    });
+}
+function postBuild(runtimeVersion) {
+    return __awaiter(this, void 0, void 0, function () {
+        var packageData;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    fs.copySync("".concat(projectDir, "/package.json"), "".concat(projectDir, "/dist/es2015/package.json"));
+                    packageData = fs.readJSONSync("".concat(projectDir, "/package.json"), {
+                        encoding: "utf8"
+                    });
+                    packageData.main = 'index';
+                    packageData.module = 'index';
+                    packageData.exports = {
+                        "import": "./index",
+                        "require": "./dist/custom-widgets-bundle.cjs.js"
+                    };
+                    delete packageData['files'];
+                    fs.writeFileSync("".concat(projectDir, "/dist/es2015/package.json"), JSON.stringify(packageData, null, 2));
+                    return [4 /*yield*/, updatePackageVersion("".concat(projectDir, "/dist/es2015/package.json"), 'version', runtimeVersion)];
+                case 1:
+                    _a.sent();
+                    console.log('Post Build successful!!!');
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function prepareNpmPackages() {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    fs.copySync("".concat(projectDir, "/dist/es2015"), "".concat(projectDir, "/dist/npm-packages/custom-widgets-m3"), {
+                        filter: function (p) { return !p.startsWith('/node_modules/'); }
+                    });
+                    return [4 /*yield*/, execa('tar', ['-czf', 'dist/npm-packages/custom-widgets-m3.tar.gz', '-C', 'dist/npm-packages', 'custom-widgets-m3'])];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function pushToLocalRepo() {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    fs.writeFileSync("".concat(projectDir, "/dist/new-build"), '' + Date.now);
+                    return [4 /*yield*/, execa('yalc', ['publish', '--no-sig', '--push'], {
+                            'cwd': "".concat(projectDir, "/dist/es2015")
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+yargs(hideBin(process.argv)).command('post-build', 'to run post processing after project build', function (yargs) {
+    yargs.option('runtimeVersion', {
+        describe: 'version number',
+        type: 'string',
+        default: '1.0.0-dev'
+    }).option('production', {
+        describe: 'to perform a production build',
+        type: 'boolean',
+        default: false
+    });
+}, function (argv) {
+    postBuild(argv.runtimeVersion).then(function () {
+        if (argv.production) {
+            return prepareNpmPackages();
+        }
+        else {
+            return pushToLocalRepo();
+        }
+    });
+}).showHelpOnFail().argv;

custom-widgets-m3/scripts/update-version.d.ts

@@ -0,0 +1 @@
+export {};

custom-widgets-m3/scripts/update-version.js

@@ -0,0 +1,19 @@
+'use strict';
+var fs = require('fs');
+var yargs = require('yargs');
+var argv = yargs(process.argv).argv;
+var updateCustomeWidgetsPackage = function (path) {
+    if (fs.existsSync(path)) {
+        var packageJSON = require('../' + path);
+        packageJSON['dependencies']['@wavemaker/custom-widgets-m3'] = argv["publish-version"];
+        fs.writeFileSync(path, JSON.stringify(packageJSON, null, 4));
+    }
+    else {
+        console.log('package.json not found at ' + path);
+    }
+};
+var init = function () {
+    updateCustomeWidgetsPackage('../wavemaker-ng-runtime/package.json');
+    updateCustomeWidgetsPackage('../wavemaker-ng-studio/package.json');
+};
+init();

custom-widgets-m3/src/checkbox_set/checkbox_set.d.ts

@@ -0,0 +1,10 @@
+declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
+declare function handleLabelPlacementChange(widgetMap: any, label_placement: any): void;
+declare function updateClasses(element: any, classMap: any): void;
+declare function updateClasses(element: any, classMap: any): void;
+declare function handleIntermediateChange(widgetMap: any, show_intermediate: any): void;
+declare function handleLayoutChange(widgetMap: any, layout: any): void;
+declare function handleLayoutChange(widgetMap: any, layout: any): void;
+declare function handleRequiredChange(widgetMap: any, required: any): void;
+declare function handleRequiredChange(widgetMap: any, required: any): void;
+declare function handleRequiredChange(required: any, widgetMap: any): void;

custom-widgets-m3/src/checkbox_set/checkbox_set.js

@@ -0,0 +1,52 @@
+/*
+ * Use App.getDependency for Dependency Injection
+ * eg: var DialogService = App.getDependency('DialogService');
+ */
+Widget.onPropertyChange = function (propName, newValue, oldValue) {
+    var _a = Widget.props, show_intermediate = _a.show_intermediate, required = _a.required, layout = _a.layout, label_placement = _a.label_placement;
+    var widgetMap = Widget.Widgets;
+    var propertyHandlers = {
+        'prop-required': function () { return handleRequiredChange(widgetMap, required); },
+        'prop-layout': function () { return handleLayoutChange(widgetMap, layout); },
+        'prop-show_intermediate': function () { return handleIntermediateChange(widgetMap, show_intermediate); },
+        'prop-label_placement': function () { return handleLabelPlacementChange(widgetMap, label_placement); }
+    };
+    if (propertyHandlers[propName]) {
+        propertyHandlers[propName]();
+    }
+};
+Widget.onReady = function () {
+    var _a = Widget.props, show_intermediate = _a.show_intermediate, required = _a.required, layout = _a.layout, label_placement = _a.label_placement;
+    var widgetMap = Widget.Widgets;
+    handleLayoutChange(widgetMap, layout);
+    handleLabelPlacementChange(widgetMap, label_placement);
+    handleIntermediateChange(widgetMap, show_intermediate);
+    handleRequiredChange(widgetMap, required);
+};
+function handleLabelPlacementChange(widgetMap, label_placement) {
+    updateClasses(widgetMap.checkboxset.nativeElement, {
+        'top-placement': label_placement === "top",
+        'bottom-placement': label_placement === "bottom",
+        'start-placement': label_placement === "start"
+    });
+}
+// Utility function to manage class additions and removals
+function updateClasses(element, classMap) {
+    Object.keys(classMap).forEach(function (className) {
+        element.classList.toggle(className, classMap[className]);
+    });
+}
+function handleIntermediateChange(widgetMap, show_intermediate) {
+    updateClasses(widgetMap.checkboxset.nativeElement, {
+        'intermediate-checkbox': show_intermediate.toString().toLowerCase() === 'true'
+    });
+}
+function handleLayoutChange(widgetMap, layout) {
+    updateClasses(widgetMap.checkboxset.nativeElement, {
+        'horizontal': layout === "horizontal",
+        'vertical': layout === "vertical"
+    });
+}
+function handleRequiredChange(widgetMap, required) {
+    widgetMap.composite1.required = required;
+}

custom-widgets-m3/src/checkbox_set/page.min.d.ts

@@ -0,0 +1,7 @@
+export namespace checkbox_set {
+    let markup: string;
+    let script: string;
+    let styles: string;
+    let variables: string;
+    let config: string;
+}

custom-widgets-m3/src/checkbox_set/page.min.js

@@ -0,0 +1,7 @@
+export var checkbox_set = {
+    "markup": "%3Cwm-custom-widget-container+name%3D%22partial1%22%3E%0A++++%3Cwm-composite+name%3D%22composite1%22+captionposition%3D%22top%22+required%3D%22false%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",
+    "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%0AWidget.onPropertyChange+%3D+function%28propName%2C+newValue%2C+oldValue%29+%7B%0A++++const+%7B%0A++++++++show_intermediate%2C%0A++++++++required%2C%0A++++++++layout%2C%0A++++++++label_placement%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++const+propertyHandlers+%3D+%7B%0A++++++++%27prop-required%27%3A+%28%29+%3D%3E+handleRequiredChange%28widgetMap%2C+required%29%2C%0A++++++++%27prop-layout%27%3A+%28%29+%3D%3E+handleLayoutChange%28widgetMap%2C+layout%29%2C%0A++++++++%27prop-show_intermediate%27%3A+%28%29+%3D%3E+handleIntermediateChange%28widgetMap%2C+show_intermediate%29%2C%0A++++++++%27prop-label_placement%27%3A+%28%29+%3D%3E+handleLabelPlacementChange%28widgetMap%2C+label_placement%29%0A++++%7D%3B%0A%0A++++if+%28propertyHandlers%5BpropName%5D%29+%7B%0A++++++++propertyHandlers%5BpropName%5D%28%29%3B%0A++++%7D%0A%7D%3B%0A%0AWidget.onReady+%3D+function%28%29+%7B%0A++++const+%7B%0A++++++++show_intermediate%2C%0A++++++++required%2C%0A++++++++layout%2C%0A++++++++label_placement%0A++++%7D+%3D+Widget.props%3B%0A++++const+widgetMap+%3D+Widget.Widgets%3B%0A%0A++++handleLayoutChange%28widgetMap%2C+layout%29%3B%0A++++handleLabelPlacementChange%28widgetMap%2C+label_placement%29%0A++++handleIntermediateChange%28widgetMap%2C+show_intermediate%29%3B%0A++++handleRequiredChange%28widgetMap%2C+required%29%3B%0A%7D%3B%0A%0Afunction+handleLabelPlacementChange%28widgetMap%2C+label_placement%29+%7B%0A++++updateClasses%28widgetMap.checkboxset.nativeElement%2C+%7B%0A++++++++%27top-placement%27%3A+label_placement+%3D%3D%3D+%22top%22%2C%0A++++++++%27bottom-placement%27%3A+label_placement+%3D%3D%3D+%22bottom%22%2C%0A++++++++%27start-placement%27%3A+label_placement+%3D%3D%3D+%22start%22%0A++++%7D%29%3B%0A%7D%0A%0A%2F%2F+Utility+function+to+manage+class+additions+and+removals%0Afunction+updateClasses%28element%2C+classMap%29+%7B%0A++++Object.keys%28classMap%29.forEach%28%28className%29+%3D%3E+%7B%0A++++++++element.classList.toggle%28className%2C+classMap%5BclassName%5D%29%3B%0A++++%7D%29%3B%0A%7D%0A%0Afunction+handleIntermediateChange%28widgetMap%2C+show_intermediate%29+%7B%0A++++updateClasses%28widgetMap.checkboxset.nativeElement%2C+%7B%0A++++++++%27intermediate-checkbox%27%3A+show_intermediate.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%0A++++%7D%29%3B%0A%7D%0A%0A%0Afunction+handleLayoutChange%28widgetMap%2C+layout%29+%7B%0A++++updateClasses%28widgetMap.checkboxset.nativeElement%2C+%7B%0A++++++++%27horizontal%27%3A+layout+%3D%3D%3D+%22horizontal%22%2C%0A++++++++%27vertical%27%3A+layout+%3D%3D%3D+%22vertical%22%0A++++%7D%29%3B%0A%7D%0A%0Afunction+handleRequiredChange%28widgetMap%2C+required%29+%7B%0A++++widgetMap.composite1.required+%3D+required%3B%0A%7D",
+    "styles": ".app-checkboxset.list-group.inline%2C%0A.app-checkboxset.list-group+%7B%0A++++flex-direction%3A+column%3B%0A++++display%3A+inline-flex%3B%0A%7D%0A%0A.app-checkboxset.list-group.inline.horizontal%2C%0A.app-checkboxset.list-group.horizontal+%7B%0A++++flex-direction%3A+row%3B%0A++++display%3A+inline-flex%3B%0A%7D%0A%0A.app-checkboxset+.checkbox%3Elabel+.caption%3Aafter+%7B%0A++++box-sizing%3A+unset%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+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-gap%29%29%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+calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29%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+calc%28calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29+%2B+6px%29%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+0px%3B%0A%7D%0A%0A%0A%2F*+top+label+placement+styles++*%2F%0A%0A.app-checkboxset.top-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-gap%29%29%3B%0A++++min-width%3A+20px%3B%0A++++padding-top%3A+unset%3B%0A%7D%0A%0A.app-checkboxset.top-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+%2B+calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29%29%3B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-checkboxset.top-placement%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+%2B+calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29%29%3B%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.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-gap%29%29%3B%0A%7D%0A%0A.app-checkboxset.bottom-placement+%7B%0A++++display%3A+inline-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.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.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.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.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-top%3A+calc%28var%28--wm-checkbox-state-layer-size%29+%2B+var%28--wm-checkbox-gap%29%29%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++++top%3A+calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++top%3A+calc%28%28var%28--wm-checkbox-state-layer-size%29+-+var%28--wm-checkbox-size%29%29+%2F+2%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++top%3A+0px%3B%0A%7D%0A%0A.app-checkboxset+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.intermediate-checkbox+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3A%3Abefore%2C%0A.app-checkboxset+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.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%0A%0A.app-checkboxset.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Anot%28%3Achecked%29%2B.caption%3Aafter%2C%0A.app-checkboxset.top-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Anot%28%3Achecked%29%2B.caption%3Aafter%2C%0A.app-checkboxset.bottom-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Anot%28%3Achecked%29%2B.caption%3Aafter%2C%0A.app-checkboxset.start-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Anot%28%3Achecked%29%2B.caption%3Aafter+%7B%0A++++border%3A+0px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter%2C%0A.app-checkboxset.vertical.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-state-layer-size%29%2F2%29+-+1px%29%3B%0A++++height%3A+0px%3B%0A++++transform%3A+translate%283px%2C+0px%29+rotate%280deg%29+scale%281%29%3B%0A%7D%0A%0A.app-checkboxset.top-placement.horizontal.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter%2C%0A.app-checkboxset.top-placement.vertical.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+%2B+calc%28var%28--wm-checkbox-state-layer-size%29%2F2%29+-+1px%29%3B%0A++++height%3A+0px%3B%0A++++transform%3A+translate%28-6px%2C+0px%29+rotate%280deg%29+scale%281%29%3B%0A++++left%3A+50%25%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter%2C%0A.app-checkboxset.vertical.bottom-placement.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+-+calc%28var%28--wm-checkbox-state-layer-size%29%2F2%29+%2B+7px%29%3B%0A++++height%3A+0px%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%280deg%29+scale%281%29%3B%0A++++left%3A+50%25%3B%0A%7D%0A%0A.app-checkboxset.start-placement.horizontal.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter%2C%0A.app-checkboxset.start-placement.vertical.intermediate-checkbox%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3Aafter+%7B%0A++++top%3A+calc%28calc%28var%28--wm-checkbox-caption-line-height%29+%2B+var%28--wm-checkbox-gap%29%29+-+calc%28var%28--wm-checkbox-state-layer-size%29%2F2%29%29%3B%0A++++height%3A+0px%3B%0A++++left%3A+unset%3B%0A++++transform%3A+translate%283px%2C+11px%29+rotate%280deg%29+scale%281%29%3B%0A%7D",
+    "variables": "%7B+%7D",
+    "config": "%7B%0A%09%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%09%22properties%22%20%3A%20%7B%0A%09%20%20%22layout%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22Layout%22%2C%0A%09%09%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%09%09%22options%22%20%3A%20%5B%20%22horizontal%22%2C%20%22vertical%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22horizontal%22%0A%09%20%20%7D%2C%0A%09%20%20%22show_intermediate%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22boolean%22%2C%0A%09%09%22displayName%22%20%3A%20%22Intermediate%20checkbox%22%2C%0A%09%09%22description%22%20%3A%20%22Controls%20whether%20the%20checkbox%20shows%20an%20indeterminate%20state.%20True%20displays%20the%20intermediate%20state%22%2C%0A%09%09%22value%22%20%3A%20false%0A%09%20%20%7D%2C%0A%09%20%20%22state%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22State%22%2C%0A%09%09%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%09%09%22options%22%20%3A%20%5B%20%22Enabled%22%2C%20%22Disabled%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22Enabled%22%0A%09%20%20%7D%2C%0A%09%20%20%22label_placement%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22list%22%2C%0A%09%09%22displayName%22%20%3A%20%22Label%20placement%22%2C%0A%09%09%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%09%09%22options%22%20%3A%20%5B%20%22top%22%2C%20%22bottom%22%2C%20%22start%22%2C%20%22end%22%20%5D%2C%0A%09%09%22value%22%20%3A%20%22end%22%0A%09%20%20%7D%2C%0A%09%20%20%22label_text%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Label%20text%22%2C%0A%09%09%22description%22%20%3A%20%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20checkboxSet%22%2C%0A%09%09%22value%22%20%3A%20%22Label%20Text%22%0A%09%20%20%7D%2C%0A%09%20%20%22data_set%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Data%20Set%20values%22%2C%0A%09%09%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20list%20of%20labels%20such%20as%20%27Option1%27%2C%20%27Option2%27%2C%20%27Option3%27%22%2C%0A%09%09%22value%22%20%3A%20%22Option1%2COption2%2COption3%22%0A%09%20%20%7D%2C%0A%09%20%20%22default_value%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22string%22%2C%0A%09%09%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%09%09%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20%27Option1%27%22%2C%0A%09%09%22value%22%20%3A%20%22%22%0A%09%20%20%7D%2C%0A%09%20%20%22required%22%20%3A%20%7B%0A%09%09%22type%22%20%3A%20%22boolean%22%2C%0A%09%09%22displayName%22%20%3A%20%22Required%22%2C%0A%09%09%22description%22%20%3A%20%22Indicates%20whether%20the%20checkboxSet%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%09%09%22value%22%20%3A%20false%0A%09%20%20%7D%0A%09%7D%2C%0A%09%22events%22%20%3A%20%7B%20%7D%0A%20%20%7D%0A%20%20"
+};

custom-widgets-m3/src/discrete_slider/discrete_slider.d.ts

@@ -0,0 +1,25 @@
+declare function initializeSlider(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any, required: any): void;
+declare function updateSlider(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
+declare function updateSliderStep(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
+declare function setRequired(widgetMap: any, required: any): void;
+declare function appendSliderIndicator(slider: any): void;
+declare function configureSliderAndSetStyles(widgetMap: any, value: any, minValue: any, maxValue: any, stepValue: any): void;
+declare function updateSliderStyles(slider: any, value: any, minValue: any, maxValue: any): void;
+declare function setupStepsAndLabels(widgetMap: any): void;
+declare function createStepLabel(labelValue: any, minValue: any, maxValue: any): HTMLParagraphElement;
+declare function updateLabelVisibility(widgetMap: any): void;
+declare function getSliderPercentage(value: any, minValue: any, maxValue: any): number;
+declare function getSliderPercentage(value: any): number;
+declare function clamp(value: any, minValue: any, maxValue: any): number;
+declare function toggleLabelVisibilty(showLabelsBool: any, widgetMap: any): void;
+declare function toggleLabelVisibilty(widgetMap: any, showLabelsBool: any): void;
+declare function toggleIconsVisibility(widgetMap: any, showIconsBool: any, iconActionsBool: any): void;
+declare function toggleIconsVisibility(widgetMap: any, showIconsBool: any, startIcon: any, endIcon: any, iconActionsBool: any): void;
+declare function updateStartIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
+declare function updateStartIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
+declare function updateEndIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
+declare function updateEndIconVisibility(widgetMap: any, iconActionsBool: any, showIconsBool: any): void;
+declare function moveSlider(direction: any, widgetMap: any): void;
+declare function moveSlider(widgetMap: any, direction: any): void;
+declare function convertToBoolean(value: any): boolean;
+declare function convertToBoolean(value: any): boolean;

custom-widgets-m3/src/discrete_slider/discrete_slider.js

@@ -0,0 +1,218 @@
+Widget.onPropertyChange = function (propName, newValue, oldValue) {
+    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;
+    var widgetMap = Widget.Widgets;
+    var showIconsBool = convertToBoolean(show_icons);
+    var showLabelsBool = convertToBoolean(show_labels);
+    var iconActionsBool = convertToBoolean(icon_actions);
+    switch (propName) {
+        case 'prop-value':
+        case 'prop-min_value':
+        case 'prop-max_value':
+            updateSlider(widgetMap, value, min_value, max_value, step_value);
+            break;
+        case 'prop-step_value':
+            updateSliderStep(widgetMap, value, min_value, max_value, step_value);
+            break;
+        case 'prop-required':
+            setRequired(widgetMap, required);
+            break;
+        case "prop-show_labels":
+            toggleLabelVisibilty(showLabelsBool, widgetMap);
+            break;
+        case "prop-show_icons":
+            toggleIconsVisibility(widgetMap, showIconsBool, iconActionsBool);
+            break;
+        case "prop-start_icon":
+            updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+            break;
+        case "prop-end_icon":
+            updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+            break;
+    }
+};
+Widget.onReady = function () {
+    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;
+    var widgetMap = Widget.Widgets;
+    var showIconsBool = convertToBoolean(show_icons);
+    var showLabelsBool = convertToBoolean(show_labels);
+    var iconActionsBool = convertToBoolean(icon_actions);
+    widgetMap.sliderContainer.nativeElement.classList.add('filled-slider', 'discrete-slider');
+    initializeSlider(widgetMap, value, min_value, max_value, step_value, required);
+    toggleLabelVisibilty(showLabelsBool, widgetMap);
+    toggleIconsVisibility(widgetMap, showIconsBool, iconActionsBool);
+};
+function initializeSlider(widgetMap, value, minValue, maxValue, stepValue, required) {
+    updateSlider(widgetMap, value, minValue, maxValue, stepValue);
+    setRequired(widgetMap, required);
+    appendSliderIndicator(widgetMap.slider);
+}
+function updateSlider(widgetMap, value, minValue, maxValue, stepValue) {
+    if (value !== undefined) {
+        widgetMap.slider.datavalue = Number(value);
+    }
+    configureSliderAndSetStyles(widgetMap, value, minValue, maxValue, stepValue);
+    setupStepsAndLabels(widgetMap);
+}
+function updateSliderStep(widgetMap, value, minValue, maxValue, stepValue) {
+    updateSlider(widgetMap, value, minValue, maxValue, stepValue);
+}
+function setRequired(widgetMap, required) {
+    widgetMap.composite.required = required;
+}
+function appendSliderIndicator(slider) {
+    var sliderElement = slider.nativeElement;
+    if (sliderElement) {
+        var indicator = document.createElement('p');
+        var labelContainer = document.createElement('div');
+        labelContainer.className = 'stop-indicator';
+        indicator.className = 'active-slider';
+        sliderElement.appendChild(indicator);
+        sliderElement.appendChild(labelContainer);
+    }
+}
+function configureSliderAndSetStyles(widgetMap, value, minValue, maxValue, stepValue) {
+    var slider = widgetMap.slider;
+    minValue = parseInt(minValue, 10);
+    maxValue = parseInt(maxValue, 10);
+    stepValue = parseInt(stepValue, 10);
+    if (isNaN(minValue) || isNaN(maxValue) || isNaN(stepValue) || stepValue <= 0) {
+        console.error("Invalid min, max, or step values");
+        return;
+    }
+    slider.min = minValue;
+    slider.max = maxValue;
+    slider.step = stepValue;
+    slider.datavalue = clamp(slider.datavalue, minValue, maxValue);
+    updateSliderStyles(slider, slider.datavalue, minValue, maxValue);
+}
+function updateSliderStyles(slider, value, minValue, maxValue) {
+    var percentage = getSliderPercentage(value, minValue, maxValue);
+    slider.nativeElement.style.setProperty("--end", "".concat(100 - percentage, "%"));
+}
+function setupStepsAndLabels(widgetMap) {
+    var slider = widgetMap.slider;
+    var labelContainer = widgetMap.labelsContainer;
+    var minValue = parseInt(slider.min, 10);
+    var maxValue = parseInt(slider.max, 10);
+    var stepValue = parseInt(slider.step, 10);
+    if (!labelContainer)
+        return;
+    var numSteps = Math.ceil((maxValue - minValue) / stepValue);
+    labelContainer.$element[0].innerHTML = ''; // Clear existing labels
+    for (var i = 0; i <= numSteps; i++) {
+        var labelValue = minValue + i * stepValue;
+        if (labelValue > maxValue)
+            break;
+        var stepLabel = createStepLabel(labelValue, minValue, maxValue);
+        labelContainer.$element[0].appendChild(stepLabel);
+    }
+    slider.$element[0].addEventListener('input', function () { return updateLabelVisibility(widgetMap); });
+    updateLabelVisibility(widgetMap);
+}
+function createStepLabel(labelValue, minValue, maxValue) {
+    var stepLabel = document.createElement('p');
+    stepLabel.className = 'step-label';
+    stepLabel.textContent = labelValue;
+    var position = ((labelValue - minValue) / (maxValue - minValue)) * 100;
+    stepLabel.style.setProperty('--position', "".concat(position - 1, "%"));
+    stepLabel.setAttribute('data-position', position);
+    return stepLabel;
+}
+function updateLabelVisibility(widgetMap) {
+    var slider = widgetMap.slider;
+    var labels = widgetMap.labelsContainer.nativeElement.getElementsByClassName('step-label');
+    var sliderValue = slider.datavalue;
+    var minValue = slider.min;
+    var maxValue = slider.max;
+    var stepValue = slider.step;
+    var validValues = Array.from({
+        length: Math.ceil((maxValue - minValue) / stepValue) + 1
+    }, function (_, i) { return minValue + i * stepValue; })
+        .filter(function (value) { return value <= maxValue; });
+    for (var _i = 0, labels_1 = labels; _i < labels_1.length; _i++) {
+        var label = labels_1[_i];
+        var labelValue = parseInt(label.textContent, 10);
+        label.classList.remove('hidden', 'inactive', 'active');
+        if (validValues.includes(labelValue)) {
+            if (labelValue === sliderValue) {
+                label.classList.add('hidden');
+            }
+            else if (labelValue < sliderValue) {
+                label.classList.add('inactive');
+            }
+            else {
+                label.classList.add('active');
+            }
+        }
+        label.style.display = 'block';
+    }
+}
+function getSliderPercentage(value, minValue, maxValue) {
+    return ((value - minValue) / (maxValue - minValue)) * 100;
+}
+function clamp(value, minValue, maxValue) {
+    return Math.min(Math.max(value, minValue), maxValue);
+}
+function toggleLabelVisibilty(showLabelsBool, widgetMap) {
+    if (showLabelsBool) {
+        widgetMap.slider.nativeElement.classList.remove("hide-labels");
+    }
+    else {
+        widgetMap.slider.nativeElement.classList.add("hide-labels");
+    }
+}
+function toggleIconsVisibility(widgetMap, showIconsBool, iconActionsBool) {
+    var decrementButton = widgetMap.decrementButton, incrementButton = widgetMap.incrementButton;
+    if (showIconsBool) {
+        updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+        updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool);
+    }
+    else {
+        decrementButton.show = false;
+        incrementButton.show = false;
+    }
+}
+function updateStartIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
+    var decrementButton = widgetMap.decrementButton;
+    if (showIconsBool) {
+        decrementButton.show = true;
+        decrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
+            "auto" :
+            "none";
+    }
+    else {
+        decrementButton.show = false;
+    }
+}
+function updateEndIconVisibility(widgetMap, iconActionsBool, showIconsBool) {
+    var incrementButton = widgetMap.incrementButton;
+    if (showIconsBool) {
+        incrementButton.show = true;
+        incrementButton.nativeElement.style.pointerEvents = iconActionsBool ?
+            "auto" :
+            "none";
+    }
+    else {
+        incrementButton.show = false;
+    }
+}
+function moveSlider(direction, widgetMap) {
+    var slider = widgetMap.slider;
+    var newValue = Number(slider.datavalue) + (direction * slider.step);
+    newValue = Math.max(Math.min(newValue, slider.maxvalue), slider.minvalue);
+    slider.datavalue = newValue;
+    Widget.sliderChange(null, slider, newValue);
+}
+function convertToBoolean(value) {
+    return value === true || value === "true";
+}
+Widget.sliderChange = function ($event, widget, newVal) {
+    updateSliderStyles(widget, newVal, widget.min, widget.max);
+    updateLabelVisibility(Widget.Widgets);
+};
+Widget.decrementButtonClick = function ($event, widget) {
+    moveSlider(-1, Widget.Widgets);
+};
+Widget.incrementButtonClick = function ($event, widget) {
+    moveSlider(1, Widget.Widgets);
+};

custom-widgets-m3/src/discrete_slider/page.min.d.ts

@@ -0,0 +1,7 @@
+export namespace discrete_slider {
+    let markup: string;
+    let script: string;
+    let styles: string;
+    let variables: string;
+    let config: string;
+}