Browse Source

merge with feature/lts-4.3-angular-20

pull/14963/head
Igor Kulikov 3 days ago
parent
commit
1bcbbe0d3b
  1. 17
      ui-ngx/.browserslistrc
  2. 5
      ui-ngx/angular.json
  3. 4
      ui-ngx/eslint.config.mjs
  4. 73
      ui-ngx/package.json
  5. 31
      ui-ngx/patches/@angular+build+20.3.15.patch
  6. 66
      ui-ngx/patches/@angular+common+18.2.13.patch
  7. 97
      ui-ngx/patches/@angular+compiler+18.2.13.patch
  8. 20
      ui-ngx/patches/@angular+core+18.2.13.patch
  9. 20
      ui-ngx/patches/@angular+core+20.3.16.patch
  10. 61
      ui-ngx/patches/@angular+material+18.2.14.patch
  11. 97
      ui-ngx/patches/@iplab+ngx-color-picker+18.0.1.patch
  12. 46
      ui-ngx/patches/@iplab+ngx-color-picker+20.0.0.patch
  13. 92
      ui-ngx/patches/@mat-datetimepicker+core+14.0.0.patch
  14. 44
      ui-ngx/patches/@mat-datetimepicker+core+16.0.1.patch
  15. 4
      ui-ngx/patches/angular-gridster2+20.2.4.patch
  16. 15
      ui-ngx/patches/echarts+5.5.1-TB.patch
  17. 27
      ui-ngx/patches/jquery.terminal+2.44.1.patch
  18. 2
      ui-ngx/src/app/app.component.ts
  19. 19
      ui-ngx/src/app/core/services/resources.service.ts
  20. 8
      ui-ngx/src/app/core/translate/missing-translate-handler.ts
  21. 6
      ui-ngx/src/app/core/translate/translate-default-loader.ts
  22. 10
      ui-ngx/src/app/core/translate/translate-default-parser.ts
  23. 28
      ui-ngx/src/app/modules/common/modules-map.ts
  24. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts
  25. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts
  26. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts
  27. 4
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
  28. 3
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
  29. 3
      ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
  30. 3
      ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
  31. 4
      ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts
  32. 1
      ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts
  33. 8
      ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
  34. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts
  35. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts
  36. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts
  37. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts
  38. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts
  39. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts
  40. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts
  41. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts
  42. 4
      ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts
  43. 4
      ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts
  44. 6
      ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts
  45. 7
      ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
  46. 12
      ui-ngx/src/app/shared/components/fab-toolbar.component.ts
  47. 4
      ui-ngx/src/app/shared/components/file-input.component.ts
  48. 35
      ui-ngx/src/app/shared/components/icon.component.ts
  49. 4
      ui-ngx/src/app/shared/components/image-input.component.ts
  50. 2
      ui-ngx/src/app/shared/components/markdown.component.ts
  51. 69
      ui-ngx/src/app/shared/components/marked-options.service.ts
  52. 6
      ui-ngx/src/app/shared/components/multiple-image-input.component.ts
  53. 36
      ui-ngx/src/app/shared/components/popover.component.ts
  54. 4
      ui-ngx/src/app/shared/components/popover.service.ts
  55. 3
      ui-ngx/src/app/shared/components/time/datetime.component.ts
  56. 8
      ui-ngx/src/app/shared/shared.module.ts
  57. 2
      ui-ngx/src/form.scss
  58. 37
      ui-ngx/src/theme.scss
  59. 3309
      ui-ngx/yarn.lock

17
ui-ngx/.browserslistrc

@ -2,18 +2,17 @@
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# For Angular's browser support policy, please see:
# https://angular.dev/reference/versions#browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
>0.5%
not dead
last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
last 2 Android major versions
Chrome >= 107
ChromeAndroid >= 107
Edge >= 107
Firefox >= 104
FirefoxAndroid >= 104
Safari >= 16
iOS >= 16
Firefox ESR

5
ui-ngx/angular.json

@ -114,7 +114,10 @@
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
],
"sass": {
"silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
}
},
"scripts": [
"node_modules/tinycolor2/dist/tinycolor-min.js",

4
ui-ngx/eslint.config.mjs

@ -64,7 +64,9 @@ export default tsEslint.config(
"@typescript-eslint/ban-ts-comment": "off",
"no-case-declarations": "off",
"no-prototype-builtins": "off",
"@typescript-eslint/consistent-type-definitions": "off"
"@typescript-eslint/consistent-type-definitions": "off",
"@angular-eslint/prefer-standalone": "off",
"@angular-eslint/prefer-inject": "off"
},
},
{

73
ui-ngx/package.json

@ -35,25 +35,25 @@
"@ngrx/store": "^20.1.0",
"@ngrx/store-devtools": "^20.1.0",
"@ngx-translate/core": "^17.0.0",
"@svgdotjs/svg.filter.js": "^3.0.8",
"@svgdotjs/svg.js": "^3.2.4",
"@svgdotjs/svg.filter.js": "^3.0.9",
"@svgdotjs/svg.js": "3.2.4",
"@svgdotjs/svg.panzoom.js": "^2.1.2",
"@tinymce/tinymce-angular": "^8.0.1",
"ace-builds": "1.36.5",
"ace-diff": "^3.0.3",
"ace-builds": "1.43.6",
"ace-diff": "^3.3.0",
"angular-gridster2": "~20.2.4",
"angular2-hotkeys": "^16.0.1",
"canvas-gauges": "^2.1.7",
"core-js": "^3.39.0",
"dayjs": "1.11.13",
"core-js": "^3.48.0",
"dayjs": "1.11.19",
"echarts": "https://github.com/thingsboard/echarts/archive/5.5.1-TB.tar.gz",
"flot": "https://github.com/thingsboard/flot.git#0.9-work",
"flot.curvedlines": "https://github.com/MichaelZinsmaier/CurvedLines.git#master",
"font-awesome": "^4.7.0",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
"jquery.terminal": "^2.44.1",
"js-beautify": "1.15.1",
"jquery.terminal": "^2.45.2",
"js-beautify": "1.15.4",
"json-schema-defaults": "^0.4.0",
"jstree": "^3.3.17",
"jstree-bootstrap-theme": "^1.0.1",
@ -63,32 +63,32 @@
"leaflet-providers": "2.0.0",
"leaflet.gridlayer.googlemutant": "0.15.0",
"leaflet.markercluster": "1.5.3",
"libphonenumber-js": "^1.11.15",
"maplibre-gl": "^5.2.0",
"marked": "~15.0.12",
"libphonenumber-js": "^1.12.35",
"maplibre-gl": "5.2.0",
"marked": "~16.4.2",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"moment-timezone": "^0.6.0",
"ngx-clipboard": "^16.0.0",
"ngx-daterangepicker-material": "^6.0.4",
"ngx-drag-drop": "^20.0.1",
"ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/3.0.0",
"ngx-hm-carousel": "^19.0.0",
"ngx-markdown": "^20.1.0",
"ngx-sharebuttons": "^15.0.6",
"ngx-sharebuttons": "^17.0.0",
"ngx-translate-messageformat-compiler": "^7.2.0",
"objectpath": "^2.0.0",
"qrcode": "^1.5.4",
"raphael": "^2.3.0",
"rxjs": "~7.8.1",
"rxjs": "~7.8.2",
"schema-inspector": "^2.1.0",
"screenfull": "^6.0.2",
"sorted-btree": "^1.8.1",
"split.js": "^1.6.5",
"systemjs": "6.15.1",
"tinycolor2": "^1.6.0",
"tinymce": "~6.8.5",
"tinymce": "~6.8.6",
"tooltipster": "^4.2.8",
"tslib": "^2.7.0",
"tslib": "^2.8.1",
"typeface-roboto": "^1.1.13",
"zone.js": "~0.15.1"
},
@ -105,45 +105,40 @@
"@types/canvas-gauges": "^2.1.8",
"@types/flot": "^0.0.36",
"@types/flowjs": "^2.13.14",
"@types/jquery": "^3.5.32",
"@types/jquery": "^3.5.33",
"@types/js-beautify": "^1.14.3",
"@types/leaflet": "1.9.14",
"@types/leaflet-polylinedecorator": "1.6.4",
"@types/leaflet-providers": "1.2.4",
"@types/leaflet.gridlayer.googlemutant": "0.4.9",
"@types/leaflet.markercluster": "1.5.5",
"@types/lodash": "^4.17.13",
"@types/node": "~20.17.8",
"@types/lodash": "^4.17.22",
"@types/node": "~22.18.13",
"@types/raphael": "^2.3.9",
"@types/systemjs": "6.15.1",
"@types/systemjs": "6.15.3",
"@types/tinycolor2": "^1.4.6",
"@types/tooltipster": "^0.0.35",
"angular-eslint": "~18.4.3",
"autoprefixer": "^10.4.20",
"angular-eslint": "~20.7.0",
"autoprefixer": "^10.4.23",
"directory-tree": "^3.5.2",
"eslint": "~9.17.0",
"eslint-plugin-import": "latest",
"eslint-plugin-jsdoc": "^50.6.0",
"eslint-plugin-prefer-arrow": "latest",
"eslint-plugin-tailwindcss": "^3.17.5",
"eslint": "~9.39.2",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-jsdoc": "^62.4.1",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-tailwindcss": "^3.18.2",
"ngrx-store-freeze": "^0.2.4",
"patch-package": "^8.0.0",
"postcss": "^8.4.49",
"patch-package": "^8.0.1",
"postcss": "^8.5.6",
"postinstall-prepare": "^2.0.0",
"tailwindcss": "^3.4.15",
"tailwindcss": "^3.4.19",
"ts-node": "^10.9.2",
"typescript": "~5.9.3",
"typescript-eslint": "^8.54.0"
},
"resolutions": {
"ace-builds": "1.36.5",
"tinymce": "6.8.5",
"rollup": "4.22.4",
"@babel/core": "7.25.2",
"esbuild": "0.23.0",
"jquery.terminal/coveralls-next/form-data": "4.0.4",
"node-forge": "1.3.3",
"glob": "10.5.0",
"path-to-regexp": "0.1.12"
"ace-builds": "1.43.6",
"tinymce": "6.8.6",
"@babel/core": "7.28.3",
"esbuild": "0.25.9"
}
}

31
ui-ngx/patches/@angular+build+18.2.12.patch → ui-ngx/patches/@angular+build+20.3.15.patch

@ -1,30 +1,30 @@
diff --git a/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js b/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js
index 625c621..4fc8bd8 100755
index 53168ea..f07c80a 100755
--- a/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js
+++ b/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js
@@ -68,8 +68,6 @@ class AngularCompilation {
@@ -78,8 +78,6 @@ class AngularCompilation {
allowEmptyCodegenFiles: false,
annotationsAs: 'decorators',
enableResourceInlining: false,
- supportTestBed: false,
- supportJitMode: false,
}));
}
async diagnoseFiles(modes = DiagnosticModes.All) {
// Disable removing of comments as TS is quite aggressive with these and can
// remove important annotations, such as /* @__PURE__ */ and comments like /* vite-ignore */.
removeComments: false,
diff --git a/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js b/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js
index b03875c..8c48101 100755
index ee68408..ac15cbf 100755
--- a/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js
+++ b/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js
@@ -79,7 +79,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
@@ -90,7 +90,7 @@ function createCompilerPlugin(pluginOptions, compilationOrFactory, stylesheetBun
sourcemap: !!pluginOptions.sourcemap,
thirdPartySourcemaps: pluginOptions.thirdPartySourcemaps,
advancedOptimizations: pluginOptions.advancedOptimizations,
- jit: pluginOptions.jit,
+ jit: true, // pluginOptions.jit,
- jit: pluginOptions.jit || pluginOptions.includeTestMetadata,
+ jit: true, //pluginOptions.jit || pluginOptions.includeTestMetadata,
}, environment_options_1.maxWorkers, cacheStore?.createCache('jstransformer'));
// Setup defines based on the values used by the Angular compiler-cli
build.initialOptions.define ??= {};
@@ -385,12 +385,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
@@ -448,12 +448,14 @@ function createCompilerPlugin(pluginOptions, compilationOrFactory, stylesheetBun
async function hasSideEffects(path) {
if (!pluginOptions.advancedOptimizations) {
return undefined;
@ -41,3 +41,14 @@ index b03875c..8c48101 100755
}
},
};
@@ -554,9 +556,7 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
sourceRoot: undefined,
preserveSymlinks,
externalRuntimeStyles: pluginOptions.externalRuntimeStyles,
- _enableHmr: !!pluginOptions.templateUpdates,
- supportTestBed: !!pluginOptions.includeTestMetadata,
- supportJitMode: !!pluginOptions.includeTestMetadata,
+ _enableHmr: !!pluginOptions.templateUpdates
};
};
}

66
ui-ngx/patches/@angular+common+18.2.13.patch

@ -1,66 +0,0 @@
diff --git a/node_modules/@angular/common/esm2022/http/src/xsrf.mjs b/node_modules/@angular/common/esm2022/http/src/xsrf.mjs
index da69c17..d17f6ad 100755
--- a/node_modules/@angular/common/esm2022/http/src/xsrf.mjs
+++ b/node_modules/@angular/common/esm2022/http/src/xsrf.mjs
@@ -19,6 +19,10 @@ export const XSRF_HEADER_NAME = new InjectionToken(ngDevMode ? 'XSRF_HEADER_NAME
providedIn: 'root',
factory: () => XSRF_DEFAULT_HEADER_NAME,
});
+/**
+ * Regex to match absolute URLs, including protocol-relative URLs.
+ */
+const ABSOLUTE_URL_REGEX = /^(?:https?:)?\/\//i;
/**
* Retrieves the current XSRF token to use with the next outgoing request.
*
@@ -69,7 +73,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
args: [XSRF_COOKIE_NAME]
}] }] });
export function xsrfInterceptorFn(req, next) {
- const lcUrl = req.url.toLowerCase();
// Skip both non-mutating requests and absolute URLs.
// Non-mutating requests don't require a token, and absolute URLs require special handling
// anyway as the cookie set
@@ -77,8 +80,7 @@ export function xsrfInterceptorFn(req, next) {
if (!inject(XSRF_ENABLED) ||
req.method === 'GET' ||
req.method === 'HEAD' ||
- lcUrl.startsWith('http://') ||
- lcUrl.startsWith('https://')) {
+ ABSOLUTE_URL_REGEX.test(req.url)) {
return next(req);
}
const token = inject(HttpXsrfTokenExtractor).getToken();
diff --git a/node_modules/@angular/common/fesm2022/http.mjs b/node_modules/@angular/common/fesm2022/http.mjs
index 1655480..d1dbb38 100755
--- a/node_modules/@angular/common/fesm2022/http.mjs
+++ b/node_modules/@angular/common/fesm2022/http.mjs
@@ -2352,6 +2352,10 @@ const XSRF_HEADER_NAME = new InjectionToken(ngDevMode ? 'XSRF_HEADER_NAME' : '',
providedIn: 'root',
factory: () => XSRF_DEFAULT_HEADER_NAME,
});
+/**
+ * Regex to match absolute URLs, including protocol-relative URLs.
+ */
+const ABSOLUTE_URL_REGEX = /^(?:https?:)?\/\//i;
/**
* Retrieves the current XSRF token to use with the next outgoing request.
*
@@ -2402,7 +2406,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
args: [XSRF_COOKIE_NAME]
}] }] });
function xsrfInterceptorFn(req, next) {
- const lcUrl = req.url.toLowerCase();
// Skip both non-mutating requests and absolute URLs.
// Non-mutating requests don't require a token, and absolute URLs require special handling
// anyway as the cookie set
@@ -2410,8 +2413,7 @@ function xsrfInterceptorFn(req, next) {
if (!inject(XSRF_ENABLED) ||
req.method === 'GET' ||
req.method === 'HEAD' ||
- lcUrl.startsWith('http://') ||
- lcUrl.startsWith('https://')) {
+ ABSOLUTE_URL_REGEX.test(req.url)) {
return next(req);
}
const token = inject(HttpXsrfTokenExtractor).getToken();

97
ui-ngx/patches/@angular+compiler+18.2.13.patch

@ -1,97 +0,0 @@
diff --git a/node_modules/@angular/compiler/fesm2022/compiler.mjs b/node_modules/@angular/compiler/fesm2022/compiler.mjs
index a00b189..58896de 100755
--- a/node_modules/@angular/compiler/fesm2022/compiler.mjs
+++ b/node_modules/@angular/compiler/fesm2022/compiler.mjs
@@ -18631,6 +18631,7 @@ function SECURITY_SCHEMA() {
'area|ping',
'audio|src',
'a|href',
+ 'a|xlink:href',
'a|ping',
'blockquote|cite',
'body|background',
@@ -18644,6 +18645,75 @@ function SECURITY_SCHEMA() {
'track|src',
'video|poster',
'video|src',
+
+ // MathML namespace
+ // https://crsrc.org/c/third_party/blink/renderer/core/sanitizer/sanitizer.cc;l=753-768;drc=b3eb16372dcd3317d65e9e0265015e322494edcd;bpv=1;bpt=1
+ 'annotation|href',
+ 'annotation|xlink:href',
+ 'annotation-xml|href',
+ 'annotation-xml|xlink:href',
+ 'maction|href',
+ 'maction|xlink:href',
+ 'malignmark|href',
+ 'malignmark|xlink:href',
+ 'math|href',
+ 'math|xlink:href',
+ 'mroot|href',
+ 'mroot|xlink:href',
+ 'msqrt|href',
+ 'msqrt|xlink:href',
+ 'merror|href',
+ 'merror|xlink:href',
+ 'mfrac|href',
+ 'mfrac|xlink:href',
+ 'mglyph|href',
+ 'mglyph|xlink:href',
+ 'msub|href',
+ 'msub|xlink:href',
+ 'msup|href',
+ 'msup|xlink:href',
+ 'msubsup|href',
+ 'msubsup|xlink:href',
+ 'mmultiscripts|href',
+ 'mmultiscripts|xlink:href',
+ 'mprescripts|href',
+ 'mprescripts|xlink:href',
+ 'mi|href',
+ 'mi|xlink:href',
+ 'mn|href',
+ 'mn|xlink:href',
+ 'mo|href',
+ 'mo|xlink:href',
+ 'mpadded|href',
+ 'mpadded|xlink:href',
+ 'mphantom|href',
+ 'mphantom|xlink:href',
+ 'mrow|href',
+ 'mrow|xlink:href',
+ 'ms|href',
+ 'ms|xlink:href',
+ 'mspace|href',
+ 'mspace|xlink:href',
+ 'mstyle|href',
+ 'mstyle|xlink:href',
+ 'mtable|href',
+ 'mtable|xlink:href',
+ 'mtd|href',
+ 'mtd|xlink:href',
+ 'mtr|href',
+ 'mtr|xlink:href',
+ 'mtext|href',
+ 'mtext|xlink:href',
+ 'mover|href',
+ 'mover|xlink:href',
+ 'munder|href',
+ 'munder|xlink:href',
+ 'munderover|href',
+ 'munderover|xlink:href',
+ 'semantics|href',
+ 'semantics|xlink:href',
+ 'none|href',
+ 'none|xlink:href',
]);
registerContext(SecurityContext.RESOURCE_URL, [
'applet|code',
@@ -18659,6 +18729,8 @@ function SECURITY_SCHEMA() {
'object|codebase',
'object|data',
'script|src',
+ 'script|href',
+ 'script|xlink:href',
]);
}
return _SECURITY_SCHEMA;

20
ui-ngx/patches/@angular+core+18.2.13.patch

@ -1,20 +0,0 @@
diff --git a/node_modules/@angular/core/fesm2022/core.mjs b/node_modules/@angular/core/fesm2022/core.mjs
index 7d9d345..b4d21c6 100755
--- a/node_modules/@angular/core/fesm2022/core.mjs
+++ b/node_modules/@angular/core/fesm2022/core.mjs
@@ -12859,13 +12859,13 @@ function findDirectiveDefMatches(tView, tNode) {
if (isNodeMatchingSelectorList(tNode, def.selectors, /* isProjectionMode */ false)) {
matches || (matches = []);
if (isComponentDef(def)) {
- if (ngDevMode) {
+ // if (ngDevMode) {
assertTNodeType(tNode, 2 /* TNodeType.Element */, `"${tNode.value}" tags cannot be used as component hosts. ` +
`Please use a different tag to activate the ${stringify(def.type)} component.`);
if (isComponentHost(tNode)) {
throwMultipleComponentError(tNode, matches.find(isComponentDef).type, def.type);
}
- }
+ // }
// Components are inserted at the front of the matches array so that their lifecycle
// hooks run before any directive lifecycle hooks. This appears to be for ViewEngine
// compatibility. This logic doesn't make sense with host directives, because it

20
ui-ngx/patches/@angular+core+20.3.16.patch

@ -0,0 +1,20 @@
diff --git a/node_modules/@angular/core/fesm2022/debug_node.mjs b/node_modules/@angular/core/fesm2022/debug_node.mjs
index cdeef4b..2c8101f 100755
--- a/node_modules/@angular/core/fesm2022/debug_node.mjs
+++ b/node_modules/@angular/core/fesm2022/debug_node.mjs
@@ -9421,13 +9421,13 @@ function findDirectiveDefMatches(tView, tNode) {
if (isNodeMatchingSelectorList(tNode, def.selectors, /* isProjectionMode */ false)) {
matches ??= [];
if (isComponentDef(def)) {
- if (ngDevMode) {
+ //if (ngDevMode) {
assertTNodeType(tNode, 2 /* TNodeType.Element */, `"${tNode.value}" tags cannot be used as component hosts. ` +
`Please use a different tag to activate the ${stringify(def.type)} component.`);
if (matches.length && isComponentDef(matches[0])) {
throwMultipleComponentError(tNode, matches.find(isComponentDef).type, def.type);
}
- }
+ //}
matches.unshift(def);
}
else {

61
ui-ngx/patches/@angular+material+18.2.14.patch

@ -1,61 +0,0 @@
diff --git a/node_modules/@angular/material/autocomplete/index.d.ts b/node_modules/@angular/material/autocomplete/index.d.ts
index 1ebc198..f572ea2 100755
--- a/node_modules/@angular/material/autocomplete/index.d.ts
+++ b/node_modules/@angular/material/autocomplete/index.d.ts
@@ -220,6 +220,10 @@ export declare interface MatAutocompleteDefaultOptions {
requireSelection?: boolean;
/** Class or list of classes to be applied to the autocomplete's overlay panel. */
overlayPanelClass?: string | string[];
+
+ backdropClass?: string;
+
+ hasBackdrop?: boolean;
/** Wheter icon indicators should be hidden for single-selection. */
hideSingleSelectionIndicator?: boolean;
}
diff --git a/node_modules/@angular/material/esm2022/autocomplete/autocomplete-trigger.mjs b/node_modules/@angular/material/esm2022/autocomplete/autocomplete-trigger.mjs
index 193f5e4..833446a 100755
--- a/node_modules/@angular/material/esm2022/autocomplete/autocomplete-trigger.mjs
+++ b/node_modules/@angular/material/esm2022/autocomplete/autocomplete-trigger.mjs
@@ -670,6 +670,8 @@ export class MatAutocompleteTrigger {
scrollStrategy: this._scrollStrategy(),
width: this._getPanelWidth(),
direction: this._dir ?? undefined,
+ hasBackdrop: this._defaults?.hasBackdrop,
+ backdropClass: this._defaults?.backdropClass,
panelClass: this._defaults?.overlayPanelClass,
});
}
diff --git a/node_modules/@angular/material/esm2022/autocomplete/autocomplete.mjs b/node_modules/@angular/material/esm2022/autocomplete/autocomplete.mjs
index 3d919a4..5fd6b4d 100755
--- a/node_modules/@angular/material/esm2022/autocomplete/autocomplete.mjs
+++ b/node_modules/@angular/material/esm2022/autocomplete/autocomplete.mjs
@@ -41,6 +41,7 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
autoSelectActiveOption: false,
hideSingleSelectionIndicator: false,
requireSelection: false,
+ hasBackdrop: false,
};
}
/** Autocomplete component. */
diff --git a/node_modules/@angular/material/fesm2022/autocomplete.mjs b/node_modules/@angular/material/fesm2022/autocomplete.mjs
index e3d0253..36cd6d7 100755
--- a/node_modules/@angular/material/fesm2022/autocomplete.mjs
+++ b/node_modules/@angular/material/fesm2022/autocomplete.mjs
@@ -65,6 +65,7 @@ function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
autoSelectActiveOption: false,
hideSingleSelectionIndicator: false,
requireSelection: false,
+ hasBackdrop: false,
};
}
/** Autocomplete component. */
@@ -926,6 +927,8 @@ class MatAutocompleteTrigger {
scrollStrategy: this._scrollStrategy(),
width: this._getPanelWidth(),
direction: this._dir ?? undefined,
+ hasBackdrop: this._defaults?.hasBackdrop,
+ backdropClass: this._defaults?.backdropClass,
panelClass: this._defaults?.overlayPanelClass,
});
}

97
ui-ngx/patches/@iplab+ngx-color-picker+18.0.1.patch

File diff suppressed because one or more lines are too long

46
ui-ngx/patches/@iplab+ngx-color-picker+20.0.0.patch

@ -0,0 +1,46 @@
diff --git a/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs b/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs
index a372799..a3d709a 100644
--- a/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs
+++ b/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs
@@ -1129,11 +1129,11 @@ class RgbaComponent {
this.color.set(newColor);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RgbaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: RgbaComponent, isStandalone: true, selector: "rgba-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n @if (labelVisible()) {\r\n <span>R</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n @if (labelVisible()) {\r\n <span>G</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n @if (labelVisible()) {\r\n <span>B</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: RgbaComponent, isStandalone: true, selector: "rgba-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n @if (labelVisible()) {\r\n <span>R</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n @if (labelVisible()) {\r\n <span>G</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n @if (labelVisible()) {\r\n <span>B</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RgbaComponent, decorators: [{
type: Component,
- args: [{ selector: `rgba-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n @if (labelVisible()) {\r\n <span>R</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n @if (labelVisible()) {\r\n <span>G</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n @if (labelVisible()) {\r\n <span>B</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
+ args: [{ selector: `rgba-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n @if (labelVisible()) {\r\n <span>R</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n @if (labelVisible()) {\r\n <span>G</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n @if (labelVisible()) {\r\n <span>B</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
}] });
class HslaComponent {
@@ -1155,11 +1155,11 @@ class HslaComponent {
this.color.set(newColor);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HslaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HslaComponent, isStandalone: true, selector: "hsla-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n @if (labelVisible()) {\r\n <span>H</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n @if (labelVisible()) {\r\n <span>S</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n @if (labelVisible()) {\r\n <span>L</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HslaComponent, isStandalone: true, selector: "hsla-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n @if (labelVisible()) {\r\n <span>H</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n @if (labelVisible()) {\r\n <span>S</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n @if (labelVisible()) {\r\n <span>L</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HslaComponent, decorators: [{
type: Component,
- args: [{ selector: `hsla-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n @if (labelVisible()) {\r\n <span>H</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n @if (labelVisible()) {\r\n <span>S</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n @if (labelVisible()) {\r\n <span>L</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
+ args: [{ selector: `hsla-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n @if (labelVisible()) {\r\n <span>H</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n @if (labelVisible()) {\r\n <span>S</span>\r\n }\r\n</div>\r\n<div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n @if (labelVisible()) {\r\n <span>L</span>\r\n }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n <div class=\"column\">\r\n <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n @if (labelVisible()) {\r\n <span>A</span>\r\n }\r\n </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
}] });
class HexComponent {
@@ -1190,11 +1190,11 @@ class HexComponent {
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HexComponent, isStandalone: true, selector: "hex-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, prefixValue: { classPropertyName: "prefixValue", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n <input #elRef type=\"text\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n @if (labelVisible()) {\r\n <span>HEX</span>\r\n }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HexComponent, isStandalone: true, selector: "hex-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, prefixValue: { classPropertyName: "prefixValue", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n <input #elRef type=\"number\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n @if (labelVisible()) {\r\n <span>HEX</span>\r\n }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HexComponent, decorators: [{
type: Component,
- args: [{ selector: `hex-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"column\">\r\n <input #elRef type=\"text\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n @if (labelVisible()) {\r\n <span>HEX</span>\r\n }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
+ args: [{ selector: `hex-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"column\">\r\n <input #elRef type=\"number\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n @if (labelVisible()) {\r\n <span>HEX</span>\r\n }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
}] });
const OpacityAnimation = trigger('opacityAnimation', [

92
ui-ngx/patches/@mat-datetimepicker+core+14.0.0.patch

@ -1,92 +0,0 @@
diff --git a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
index 7ecfae7..08363d3 100644
--- a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
+++ b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
@@ -259,9 +259,9 @@ export class MatDatetimepickerClockComponent {
value = 0;
}
// Don't close the minutes view if an invalid minute is clicked.
- if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
- return;
- }
+ // if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
+ // return;
+ // }
date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
}
this._timeChanged = true;
diff --git a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/datetimepicker.mjs b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/datetimepicker.mjs
index 5b82377..30e35ce 100644
--- a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/datetimepicker.mjs
+++ b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/datetimepicker.mjs
@@ -48,7 +48,7 @@ export class MatDatetimepickerContentComponent {
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: MatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: MatDatetimepickerContentComponent, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i2.MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: MatDatetimepickerContentComponent, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i2.MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: MatDatetimepickerContentComponent, decorators: [{
type: Component,
@@ -56,7 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
class: 'mat-datetimepicker-content',
'[class.mat-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
'(keydown)': '_handleKeydown($event)',
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
}], propDecorators: { _calendar: [{
type: ViewChild,
args: [MatDatetimepickerCalendarComponent, { static: true }]
@@ -301,7 +301,7 @@ export class MatDatetimepickerComponent {
const overlayConfig = new OverlayConfig({
positionStrategy: this._createPopupPositionStrategy(),
hasBackdrop: true,
- backdropClass: 'mat-overlay-transparent-backdrop',
+ backdropClass: 'cdk-overlay-transparent-backdrop',
direction: this._dir ? this._dir.value : 'ltr',
scrollStrategy: this._scrollStrategy(),
panelClass: 'mat-datetimepicker-popup',
diff --git a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
index 00f4a52..99c0ac1 100644
--- a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
+++ b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
@@ -946,9 +946,9 @@ class MatDatetimepickerClockComponent {
value = 0;
}
// Don't close the minutes view if an invalid minute is clicked.
- if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
- return;
- }
+ // if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
+ // return;
+ // }
date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
}
this._timeChanged = true;
@@ -1911,7 +1911,7 @@ class MatDatetimepickerContentComponent {
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: MatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: MatDatetimepickerContentComponent, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.4", type: MatDatetimepickerContentComponent, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: MatDatetimepickerContentComponent, decorators: [{
type: Component,
@@ -1919,7 +1919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImpor
class: 'mat-datetimepicker-content',
'[class.mat-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
'(keydown)': '_handleKeydown($event)',
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
}], propDecorators: { _calendar: [{
type: ViewChild,
args: [MatDatetimepickerCalendarComponent, { static: true }]
@@ -2164,7 +2164,7 @@ class MatDatetimepickerComponent {
const overlayConfig = new OverlayConfig({
positionStrategy: this._createPopupPositionStrategy(),
hasBackdrop: true,
- backdropClass: 'mat-overlay-transparent-backdrop',
+ backdropClass: 'cdk-overlay-transparent-backdrop',
direction: this._dir ? this._dir.value : 'ltr',
scrollStrategy: this._scrollStrategy(),
panelClass: 'mat-datetimepicker-popup',

44
ui-ngx/patches/@mat-datetimepicker+core+16.0.1.patch

@ -0,0 +1,44 @@
diff --git a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
index 83a6413..6ebae81 100644
--- a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
+++ b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
@@ -935,9 +935,9 @@ class MatDatetimepickerClockComponent {
value = 0;
}
// Don't close the minutes view if an invalid minute is clicked.
- if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
- return;
- }
+ // if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
+ // return;
+ // }
date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
}
this._timeChanged = true;
@@ -1889,7 +1889,7 @@ class MatDatetimepickerContentComponent {
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MatDatetimepickerContentComponent, isStandalone: false, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MatDatetimepickerContentComponent, isStandalone: false, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MatDatetimepickerContentComponent, decorators: [{
type: Component,
@@ -1897,7 +1897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
class: 'mat-datetimepicker-content',
'[class.mat-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
'(keydown)': '_handleKeydown($event)',
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-datetimepicker-calendar\n (_userSelection)=\"datetimepicker.close()\"\n (selectedChange)=\"onSelectionChange($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [attr.mode]=\"datetimepicker.mode\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [id]=\"datetimepicker.id\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [selected]=\"datetimepicker._selected\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [type]=\"datetimepicker.type\"\n cdkTrapFocus\n class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
}], propDecorators: { _calendar: [{
type: ViewChild,
args: [MatDatetimepickerCalendarComponent, { static: true }]
@@ -2150,7 +2150,7 @@ class MatDatetimepickerComponent {
const overlayConfig = new OverlayConfig({
positionStrategy: this._createPopupPositionStrategy(),
hasBackdrop: true,
- backdropClass: 'mat-overlay-transparent-backdrop',
+ backdropClass: 'cdk-overlay-transparent-backdrop',
direction: this._dir ? this._dir.value : 'ltr',
scrollStrategy: this._scrollStrategy(),
panelClass: 'mat-datetimepicker-popup',

4
ui-ngx/patches/angular-gridster2+18.0.1.patch → ui-ngx/patches/angular-gridster2+20.2.4.patch

@ -1,8 +1,8 @@
diff --git a/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs b/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
index 0dcd873..e99b602 100644
index 9fbf502..ee1b125 100644
--- a/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
+++ b/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
@@ -666,8 +666,8 @@ class GridsterRenderer {
@@ -777,8 +777,8 @@ class GridsterRenderer {
renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', '');
}
else {

15
ui-ngx/patches/echarts+5.5.1-TB.patch

@ -0,0 +1,15 @@
diff --git a/node_modules/echarts/index.d.ts b/node_modules/echarts/index.d.ts
index 811908a..5f77c60 100644
--- a/node_modules/echarts/index.d.ts
+++ b/node_modules/echarts/index.d.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import * as echarts from './types/dist/echarts';
+// import * as echarts from './types/dist/echarts';
// Export for UMD module.
export as namespace echarts;
-export = echarts;
\ No newline at end of file
+export * from './types/dist/echarts';

27
ui-ngx/patches/jquery.terminal+2.44.1.patch

File diff suppressed because one or more lines are too long

2
ui-ngx/src/app/app.component.ts

@ -88,7 +88,7 @@ export class AppComponent {
if (!env.production) {
console.log(`Default Lang: ${env.defaultLang}`);
}
this.translate.setDefaultLang(env.defaultLang);
this.translate.setFallbackLang(env.defaultLang);
}
setupAuth() {

19
ui-ngx/src/app/core/services/resources.service.ts

@ -32,7 +32,7 @@ import { forkJoin, from, Observable, ReplaySubject, throwError } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { IModulesMap } from '@modules/common/modules-map.models';
import { TbResourceId } from '@shared/models/id/tb-resource-id';
import { camelCase, isObject } from '@core/utils';
import { camelCase, isObject, isUndefined } from '@core/utils';
import { AuthService } from '@core/auth/auth.service';
import { select, Store } from '@ngrx/store';
import { selectIsAuthenticated } from '@core/auth/auth.selectors';
@ -287,6 +287,23 @@ export class ResourcesService {
module: moduleDef,
components: []
}
const declarationsDecl = moduleDef.declarations;
let declarations: Type<any>[];
if (Array.isArray(declarationsDecl)) {
declarations = declarationsDecl;
} else {
declarations = declarationsDecl();
}
if (declarations) {
for (const decl of declarations) {
if (ɵNG_COMP_DEF in decl) {
const component: ɵComponentDef<any> = decl[ɵNG_COMP_DEF];
if (isUndefined(component.standalone) || component.standalone) {
(component as any).standalone = false;
}
}
}
}
modulesWithComponents.modules.push(moduleInfo);
const exportsDecl = moduleDef.exports;
let exports: Type<any>[];

8
ui-ngx/src/app/core/translate/missing-translate-handler.ts

@ -14,11 +14,12 @@
/// limitations under the License.
///
import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core';
import { MissingTranslationHandler, MissingTranslationHandlerParams, StrictTranslation } from '@ngx-translate/core';
import { customTranslationsPrefix } from '@app/shared/models/constants';
import { Observable } from 'rxjs';
export class TbMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
handle(params: MissingTranslationHandlerParams): StrictTranslation | Observable<StrictTranslation> {
if (params.key && !params.key.startsWith(customTranslationsPrefix)) {
console.warn('Translation for \'' + params.key + '\' doesn\'t exist');
let translations: any;
@ -32,7 +33,8 @@ export class TbMissingTranslationHandler implements MissingTranslationHandler {
}
translations = newTranslations;
}
params.translateService.setTranslation(params.translateService.currentLang, translations, true);
params.translateService.setTranslation(params.translateService.getCurrentLang(), translations, true);
}
return undefined;
}
}

6
ui-ngx/src/app/core/translate/translate-default-loader.ts

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { TranslateLoader } from '@ngx-translate/core';
import { TranslateLoader, TranslationObject } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@ -26,7 +26,7 @@ export class TranslateDefaultLoader implements TranslateLoader {
}
getTranslation(lang: string): Observable<object> {
return this.http.get(`/assets/locale/locale.constant-${lang}.json`);
getTranslation(lang: string): Observable<TranslationObject> {
return this.http.get<TranslationObject>(`/assets/locale/locale.constant-${lang}.json`);
}
}

10
ui-ngx/src/app/core/translate/translate-default-parser.ts

@ -15,15 +15,14 @@
///
import { Injectable } from '@angular/core';
import { TranslateParser } from '@ngx-translate/core';
import { InterpolateFunction, InterpolationParameters, TranslateParser } from '@ngx-translate/core';
import { isDefinedAndNotNull } from '@core/utils';
@Injectable({ providedIn: 'root' })
export class TranslateDefaultParser extends TranslateParser {
templateMatcher: RegExp = /{{\s?([^{}\s]*)\s?}}/g;
// eslint-disable-next-line @typescript-eslint/ban-types
public interpolate(expr: string | Function, params?: any): string {
public interpolate(expr: string | InterpolateFunction, params?: InterpolationParameters): string {
let result: string;
if (typeof expr === 'string') {
@ -58,12 +57,11 @@ export class TranslateDefaultParser extends TranslateParser {
return target;
}
// eslint-disable-next-line @typescript-eslint/ban-types
private interpolateFunction(fn: Function, params?: any) {
private interpolateFunction(fn: InterpolateFunction, params?: InterpolationParameters) {
return fn(params);
}
private interpolateString(expr: string, params?: any) {
private interpolateString(expr: string, params?: InterpolationParameters) {
if (!params) {
return expr;
}

28
ui-ngx/src/app/modules/common/modules-map.ts

@ -14,8 +14,6 @@
/// limitations under the License.
///
/* eslint-disable max-len */
import * as AngularAnimations from '@angular/animations';
import * as AngularCore from '@angular/core';
import * as AngularCommon from '@angular/common';
@ -351,7 +349,7 @@ class ModulesMap implements IModulesMap {
private modulesMap: {[key: string]: any} = {
'@angular/animations': AngularAnimations,
'@angular/core': AngularCore,
'@angular/core': this.angularCoreModule20to18Patch(AngularCore),
'@angular/common': AngularCommon,
'@angular/common/http': HttpClientModule,
'@angular/forms': AngularForms,
@ -405,7 +403,7 @@ class ModulesMap implements IModulesMap {
'@ngrx/store': NgrxStore,
rxjs: RxJs,
'rxjs/operators': RxJsOperators,
'@ngx-translate/core': TranslateCore,
'@ngx-translate/core': this.translateModule20to18Patch(TranslateCore),
'@mat-datetimepicker/core': MatDateTimePicker,
moment: _moment,
tslib,
@ -706,6 +704,28 @@ class ModulesMap implements IModulesMap {
}
return of(null);
}
private angularCoreModule20to18Patch(module: typeof AngularCore): typeof AngularCore {
const result = {...module};
(result as any).ɵɵStandaloneFeature = () => {};
(result as any).ɵɵInputTransformsFeature = () => {};
(result as any).ɵɵpropertyInterpolate = (propName: string, v0: any, sanitizer?: any) => {
return result.ɵɵproperty(propName, v0, sanitizer);
};
return result;
}
private translateModule20to18Patch(module: typeof TranslateCore): typeof TranslateCore {
const translateServiceCls = module.TranslateService;
Object.defineProperty(translateServiceCls.prototype, 'translations', {
get: function() {
return this.store.translations;
},
enumerable: true,
configurable: true
});
return module;
}
}
export const modulesMap = new ModulesMap();

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts

@ -47,7 +47,7 @@ import {
import {
CalculatedFieldArgumentPanelComponent
} from '@home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { EntityId } from '@shared/models/id/entity-id';
@ -170,7 +170,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
this.argumentsFormArray.markAsDirty();
}
manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue, readonly: boolean = false): void {
manageArgument($event: Event, matButton: MatIconButton, argument = {} as CalculatedFieldArgumentValue, readonly: boolean = false): void {
$event?.stopPropagation();
if (this.popoverComponent && !this.popoverComponent.tbHidden) {
this.popoverComponent.hide();

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts

@ -40,7 +40,7 @@ import {
CalculatedFieldGeofencingValue,
GeofencingReportStrategyTranslations,
} from '@shared/models/calculated-field.models';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { EntityId } from '@shared/models/id/entity-id';
@ -150,7 +150,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
this.zoneGroupsFormArray.markAsDirty();
}
manageZone($event: Event, matButton: MatButton, zone = {} as CalculatedFieldGeofencingValue, readonly: boolean = false): void {
manageZone($event: Event, matButton: MatIconButton, zone = {} as CalculatedFieldGeofencingValue, readonly: boolean = false): void {
$event?.stopPropagation();
if (this.popoverComponent && !this.popoverComponent.tbHidden) {
this.popoverComponent.hide();

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts

@ -41,7 +41,7 @@ import {
CalculatedFieldAggMetric,
CalculatedFieldAggMetricValue,
} from '@shared/models/calculated-field.models';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { isDefinedAndNotNull, isEqual } from '@core/utils';
@ -154,7 +154,7 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
this.metricsFormArray.markAsDirty();
}
manageMetrics($event: Event, matButton: MatButton, metric = {} as CalculatedFieldAggMetricValue, readonly: boolean = false): void {
manageMetrics($event: Event, matButton: MatIconButton, metric = {} as CalculatedFieldAggMetricValue, readonly: boolean = false): void {
$event?.stopPropagation();
if (this.popoverComponent && !this.popoverComponent.tbHidden) {
this.popoverComponent.hide();

4
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@ -146,7 +146,7 @@ import { SafeUrl } from '@angular/platform-browser';
import cssjs from '@core/css/css';
import { IAliasController } from '@core/api/widget-api.models';
import { MatButton } from '@angular/material/button';
import { MatButton, MatIconButton } from '@angular/material/button';
import { VersionControlComponent } from '@home/components/vc/version-control.component';
import { TbPopoverService } from '@shared/components/popover.service';
import { catchError, distinctUntilChanged, map, skip, tap } from 'rxjs/operators';
@ -1762,7 +1762,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
});
}
toggleVersionControl($event: Event, versionControlButton: MatButton) {
toggleVersionControl($event: Event, versionControlButton: MatButton | MatIconButton) {
if ($event) {
$event.stopPropagation();
}

3
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts

@ -28,7 +28,6 @@ import { IAliasController, IStateController } from '@core/api/widget-api.models'
import { ILayoutController } from './layout/layout.models';
import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models';
import { BehaviorSubject, Observable } from 'rxjs';
import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
import { ElementRef } from '@angular/core';
export declare type DashboardPageScope = 'tenant' | 'customer';
@ -88,7 +87,7 @@ export interface DashboardPageLayoutContext {
ctrl: ILayoutController;
dashboardCtrl: IDashboardController;
ignoreLoading: boolean;
displayGrid: displayGrids;
displayGrid: 'always' | 'onDrag&Resize' | 'none';
}
export interface DashboardPageLayout {

3
ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts

@ -36,7 +36,6 @@ import { TbCheatSheetComponent } from '@shared/components/cheatsheet.component';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { ImagePipe } from '@shared/pipe/image.pipe';
import { map } from 'rxjs/operators';
import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
import { BreakpointId, LayoutType, ViewFormatType } from '@shared/models/dashboard.models';
import { isNotEmptyStr } from '@core/utils';
import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
@ -115,7 +114,7 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
return this.layoutCtx.gridSettings.minColumns || this.layoutCtx.gridSettings.columns || 24;
}
get displayGrid(): displayGrids {
get displayGrid(): 'always' | 'onDrag&Resize' | 'none' {
return this.layoutCtx.displayGrid || 'onDrag&Resize';
}

3
ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@ -58,7 +58,6 @@ import { distinct, take } from 'rxjs/operators';
import { UtilsService } from '@core/services/utils.service';
import { WidgetComponentAction, WidgetComponentActionType } from '@home/components/widget/widget-container.component';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
import { coerceBoolean } from '@shared/decorators/coercion';
import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
@ -102,7 +101,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
outerMargin: boolean;
@Input()
displayGrid: displayGrids = 'onDrag&Resize';
displayGrid: 'always' | 'onDrag&Resize' | 'none' = 'onDrag&Resize';
@Input()
gridType: GridType;

4
ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts

@ -26,7 +26,7 @@ import {
import { NotificationWebsocketService } from '@core/ws/notification-websocket.service';
import { BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';
import { distinctUntilChanged, map, share, skip, tap } from 'rxjs/operators';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component';
import { NotificationSubscriber } from '@shared/models/telemetry/telemetry.models';
@ -74,7 +74,7 @@ export class NotificationBellComponent implements OnDestroy {
this.unsubscribeSubscription();
}
showNotification($event: Event, createVersionButton: MatButton) {
showNotification($event: Event, createVersionButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

1
ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts

@ -126,6 +126,7 @@ export class EntityVersionDiffComponent extends PageComponent implements OnInit,
{
element: this.diffViewerElmRef.nativeElement,
mode: 'ace/mode/json',
lockScrolling: false,
left: {
copyLinkEnabled: false,
editable: false,

8
ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts

@ -47,7 +47,7 @@ import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autoco
import { isNotEmptyStr } from '@core/utils';
import { TbPopoverService } from '@shared/components/popover.service';
import { EntityVersionCreateComponent } from '@home/components/vc/entity-version-create.component';
import { MatButton } from '@angular/material/button';
import { MatButton, MatIconButton } from '@angular/material/button';
import { EntityVersionRestoreComponent } from '@home/components/vc/entity-version-restore.component';
import { EntityVersionDiffComponent } from '@home/components/vc/entity-version-diff.component';
import { ComplexVersionCreateComponent } from '@home/components/vc/complex-version-create.component';
@ -278,7 +278,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
}
toggleShowVersionDiff($event: Event, diffVersionButton: MatButton, entityVersion: EntityVersion) {
toggleShowVersionDiff($event: Event, diffVersionButton: MatIconButton, entityVersion: EntityVersion) {
if ($event) {
$event.stopPropagation();
}
@ -308,7 +308,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
}
toggleRestoreEntityVersion($event: Event, restoreVersionButton: MatButton, entityVersion: EntityVersion) {
toggleRestoreEntityVersion($event: Event, restoreVersionButton: MatIconButton, entityVersion: EntityVersion) {
if ($event) {
$event.stopPropagation();
}
@ -342,7 +342,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
}
toggleRestoreEntitiesVersion($event: Event, restoreEntitiesVersionButton: MatButton, entityVersion: EntityVersion) {
toggleRestoreEntitiesVersion($event: Event, restoreEntitiesVersionButton: MatIconButton, entityVersion: EntityVersion) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings.component.ts

@ -16,7 +16,7 @@
import { Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { deepClone } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion';
@ -93,7 +93,7 @@ export class TimeSeriesChartThresholdSettingsComponent implements OnInit, Contro
this.modelValue = value;
}
openThresholdSettingsPopup($event: Event, matButton: MatButton) {
openThresholdSettingsPopup($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts

@ -33,7 +33,7 @@ import {
timeSeriesAxisPositionTranslations,
TimeSeriesChartYAxisSettings
} from '@home/components/widget/lib/chart/time-series-chart.models';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { coerceBoolean } from '@shared/decorators/coercion';
import {
@ -153,7 +153,7 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O
this.cd.markForCheck();
}
editAxis($event: Event, matButton: MatButton) {
editAxis($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts

@ -35,7 +35,7 @@ import {
} from '@shared/models/widget-settings.models';
import { TranslateService } from '@ngx-translate/core';
import { DatePipe } from '@angular/common';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { deepClone, mergeDeep } from '@core/utils';
import {
@ -63,7 +63,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
@ViewChild('customFormatButton', {static: false})
customFormatButton: MatButton;
customFormatButton: MatIconButton;
@Input()
disabled: boolean;
@ -155,7 +155,7 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
}
}
openDateFormatSettingsPopup($event: Event, matButton: MatButton) {
openDateFormatSettingsPopup($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}
@ -182,7 +182,7 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
}
}
openAutoFormatSettingsPopup($event: Event, matButton: MatButton) {
openAutoFormatSettingsPopup($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/dynamic-form/dynamic-form-property-row.component.ts

@ -41,7 +41,7 @@ import {
Validators
} from '@angular/forms';
import { deepClone } from '@core/utils';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import {
defaultPropertyValue,
@ -83,7 +83,7 @@ export class DynamicFormPropertyRowComponent implements ControlValueAccessor, On
idInput: ElementRef<HTMLInputElement>;
@ViewChild('editButton')
editButton: MatButton;
editButton: MatIconButton;
formPropertyTypes = formPropertyTypes;
formPropertyTypeTranslations = formPropertyTypeTranslations;
@ -161,7 +161,7 @@ export class DynamicFormPropertyRowComponent implements ControlValueAccessor, On
this.cd.markForCheck();
}
editProperty($event: Event, matButton: MatButton, add = false, editCanceled = () => {}) {
editProperty($event: Event, matButton: MatIconButton, add = false, editCanceled = () => {}) {
if ($event) {
$event.stopPropagation();
}

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.ts

@ -64,7 +64,7 @@ import {
import { deepClone, guid, isDefinedAndNotNull, isObject, isUndefined } from '@core/utils';
import { Dashboard } from '@shared/models/dashboard.models';
import { AggregationType } from '@shared/models/time/time.models';
import { DndDropEvent } from 'ngx-drag-drop/lib/dnd-dropzone.directive';
import { DndDropEvent } from 'ngx-drag-drop';
import { moveItemInArray } from '@angular/cdk/drag-drop';
import { coerceBoolean } from '@shared/decorators/coercion';
import { ColorPickerPanelComponent } from '@shared/components/color-picker/color-picker-panel.component';

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts

@ -32,7 +32,7 @@ import {
UntypedFormGroup,
Validators
} from '@angular/forms';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import {
CirclesDataLayerSettings,
@ -257,7 +257,7 @@ export class MapDataLayerRowComponent implements ControlValueAccessor, OnInit {
);
}
editDataLayer($event: Event, matButton: MatButton) {
editDataLayer($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-layer-row.component.ts

@ -34,7 +34,7 @@ import {
UntypedFormGroup,
Validators
} from '@angular/forms';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { TranslateService } from '@ngx-translate/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@ -173,7 +173,7 @@ export class MapLayerRowComponent implements ControlValueAccessor, OnInit {
return this.translate.instant(translationKey);
}
editLayer($event: Event, matButton: MatButton) {
editLayer($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-tooltip-tag-actions.component.ts

@ -32,7 +32,7 @@ import { MapSettingsContext } from '@home/components/widget/lib/settings/common/
import {
WidgetActionSettingsPanelComponent
} from '@home/components/widget/lib/settings/common/action/widget-action-settings-panel.component';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TranslateService } from '@ngx-translate/core';
import { deepClone } from '@core/utils';
@ -109,7 +109,7 @@ export class MapTooltipTagActionsComponent implements ControlValueAccessor, OnIn
}
}
addAction($event: Event, matButton: MatButton): void {
addAction($event: Event, matButton: MatIconButton): void {
if ($event) {
$event.stopPropagation();
}
@ -128,7 +128,7 @@ export class MapTooltipTagActionsComponent implements ControlValueAccessor, OnIn
});
}
editAction($event: Event, matButton: MatButton, index: number): void {
editAction($event: Event, matButton: MatIconButton, index: number): void {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.ts

@ -26,7 +26,7 @@ import { EntityType } from '@shared/models/entity-type.models';
import { MobileApp, MobileAppStatus, mobileAppStatusTranslations } from '@shared/models/mobile-app.models';
import { PlatformType, platformTypeTranslations } from '@shared/models/oauth2.models';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { EditorPanelComponent } from '@home/pages/mobile/common/editor-panel.component';
@ -153,7 +153,7 @@ export class MobileAppComponent extends EntityComponent<MobileApp> {
this.entityForm.get('appSecret').markAsDirty();
}
editReleaseNote($event: Event, matButton: MatButton, isLatest: boolean) {
editReleaseNote($event: Event, matButton: MatIconButton, isLatest: boolean) {
if ($event) {
$event.stopPropagation();
}

4
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts

@ -49,7 +49,7 @@ import {
mobilePageTypeTranslations
} from '@shared/models/mobile-app.models';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { deepClone } from '@core/utils';
import { TbPopoverService } from '@shared/components/popover.service';
import { CustomMobilePagePanelComponent } from '@home/pages/mobile/bundes/layout/custom-mobile-page-panel.component';
@ -216,7 +216,7 @@ export class MobilePageItemRowComponent implements ControlValueAccessor, OnInit,
this.pageRemoved.emit();
}
edit($event: Event, matButton: MatButton) {
edit($event: Event, matButton: MatIconButton) {
if ($event) {
$event.stopPropagation();
}

6
ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component.ts

@ -47,7 +47,7 @@ import {
scadaSymbolBehaviorTypeTranslations, updateBehaviorDefaultSettings
} from '@home/components/widget/lib/scada/scada-symbol.models';
import { deepClone, isUndefinedOrNull } from '@core/utils';
import { MatButton } from '@angular/material/button';
import { MatIconButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import {
ScadaSymbolBehaviorPanelComponent
@ -115,7 +115,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On
idInput: ElementRef<HTMLInputElement>;
@ViewChild('editButton')
editButton: MatButton;
editButton: MatIconButton;
scadaSymbolBehaviorTypes = scadaSymbolBehaviorTypes;
scadaSymbolBehaviorTypeTranslations = scadaSymbolBehaviorTypeTranslations;
@ -196,7 +196,7 @@ export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, On
this.cd.markForCheck();
}
editBehavior($event: Event, matButton: MatButton, add = false, editCanceled = () => {}) {
editBehavior($event: Event, matButton: MatIconButton, add = false, editCanceled = () => {}) {
if ($event) {
$event.stopPropagation();
}

7
ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts

@ -357,11 +357,12 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
this.jsEditor.on('change', () => {
this.cleanupJsErrors();
});
if (!(this.jsEditor as any).completer) {
if (!this.jsEditor.completer) {
this.jsEditor.execCommand("startAutocomplete");
(this.jsEditor as any).completer.detach();
this.jsEditor.completer.detach();
}
(this.jsEditor as any).completer.popup.container.style.width = '500px';
(this.jsEditor.completer as Ace.Autocomplete).editor = this.jsEditor;
(this.jsEditor.completer as Ace.Autocomplete).getPopup().container.style.width = '500px';
this.initialCompleters = this.jsEditor.completers || [];
})
));

12
ui-ngx/src/app/shared/components/fab-toolbar.component.ts

@ -28,15 +28,15 @@ import {
ViewEncapsulation
} from '@angular/core';
import { WINDOW } from '@core/services/window.service';
import { _Constructor, CanColor, mixinColor, ThemePalette } from '@angular/material/core';
import { ThemePalette } from '@angular/material/core';
export declare type FabToolbarDirection = 'left' | 'right';
class MatFabToolbarBase {
// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
constructor(public _elementRef: ElementRef) {}
}
const MatFabToolbarMixinBase: _Constructor<CanColor> & typeof MatFabToolbarBase = mixinColor(MatFabToolbarBase);
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
@ -74,10 +74,13 @@ export class FabActionsDirective implements OnInit {
selector: 'mat-fab-toolbar',
templateUrl: './fab-toolbar.component.html',
styleUrls: ['./fab-toolbar.component.scss'],
host: {
'[class]': 'color ? "mat-" + color : ""',
},
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnInit, OnDestroy, AfterViewInit, OnChanges {
export class FabToolbarComponent extends MatFabToolbarBase implements OnInit, OnDestroy, AfterViewInit, OnChanges {
private fabToolbarResize$: ResizeObserver;
@ -90,6 +93,9 @@ export class FabToolbarComponent extends MatFabToolbarMixinBase implements OnIni
@Input()
color: ThemePalette;
@Input()
defaultColor: ThemePalette | undefined;
constructor(private el: ElementRef<HTMLElement>,
@Inject(WINDOW) private window: Window) {
super(el);

4
ui-ngx/src/app/shared/components/file-input.component.ts

@ -32,7 +32,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subscription } from 'rxjs';
import { FlowDirective } from '@flowjs/ngx-flow';
import { FlowConfig } from '@flowjs/ngx-flow';
import { TranslateService } from '@ngx-translate/core';
import { UtilsService } from '@core/services/utils.service';
import { DialogService } from '@core/services/dialog.service';
@ -140,7 +140,7 @@ export class FileInputComponent extends PageComponent implements AfterViewInit,
mediaType: string;
@ViewChild('flow', {static: true})
flow: FlowDirective;
flow: FlowConfig;
@ViewChild('flowInput', {static: true})
flowInput: ElementRef;

35
ui-ngx/src/app/shared/components/icon.component.ts

@ -14,15 +14,15 @@
/// limitations under the License.
///
import { CanColor, mixinColor } from '@angular/material/core';
import { ThemePalette } from '@angular/material/core';
import {
AfterContentInit,
AfterViewChecked,
ChangeDetectionStrategy,
Component,
ElementRef,
ErrorHandler,
Inject,
ErrorHandler, inject,
Inject, Input,
OnDestroy,
Renderer2,
ViewChild,
@ -37,12 +37,6 @@ import { isTbImage } from '@shared/models/resource.models';
import { ImagePipe } from '@shared/pipe/image.pipe';
import { DomSanitizer } from '@angular/platform-browser';
const _TbIconBase = mixinColor(
class {
constructor(public _elementRef: ElementRef) {}
},
);
const funcIriAttributes = [
'clip-path',
'color-profile',
@ -67,12 +61,11 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
selector: 'tb-icon',
exportAs: 'tbIcon',
styleUrls: [],
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color'],
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: {
role: 'img',
class: 'mat-icon notranslate',
'[class]': 'color ? "mat-" + color : ""',
'[attr.data-mat-icon-type]': '_useSvgIcon ? "svg" : (_useImageIcon ? null : "font")',
'[attr.data-mat-icon-name]': '_svgName',
'[attr.data-mat-icon-namespace]': '_svgNamespace',
@ -82,12 +75,24 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false
})
export class TbIconComponent extends _TbIconBase
implements AfterContentInit, AfterViewChecked, CanColor, OnDestroy {
export class TbIconComponent implements AfterContentInit, AfterViewChecked, OnDestroy {
@ViewChild('iconNameContent', {static: true})
_iconNameContent: ElementRef;
readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
private _defaultColor: ThemePalette;
@Input()
get color() {
return this._color || this._defaultColor;
}
set color(value: string | null | undefined) {
this._color = value;
}
private _color: string | null | undefined;
private icon: string;
get viewValue(): string {
@ -112,15 +117,13 @@ export class TbIconComponent extends _TbIconBase
private _currentIconFetch = Subscription.EMPTY;
constructor(elementRef: ElementRef<HTMLElement>,
private contentObserver: ContentObserver,
constructor(private contentObserver: ContentObserver,
private renderer: Renderer2,
private _iconRegistry: MatIconRegistry,
private imagePipe: ImagePipe,
private sanitizer: DomSanitizer,
@Inject(MAT_ICON_LOCATION) private _location: MatIconLocation,
private readonly _errorHandler: ErrorHandler) {
super(elementRef);
}
ngAfterContentInit(): void {

4
ui-ngx/src/app/shared/components/image-input.component.ts

@ -30,7 +30,7 @@ import { AppState } from '@core/core.state';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, } from '@angular/forms';
import { Subscription } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FlowDirective } from '@flowjs/ngx-flow';
import { FlowConfig } from '@flowjs/ngx-flow';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { UtilsService } from '@core/services/utils.service';
import { DialogService } from '@core/services/dialog.service';
@ -116,7 +116,7 @@ export class ImageInputComponent extends PageComponent implements AfterViewInit,
safeImageUrl: SafeUrl;
@ViewChild('flow', {static: true})
flow: FlowDirective;
flow: FlowConfig;
autoUploadSubscription: Subscription;

2
ui-ngx/src/app/shared/components/markdown.component.ts

@ -114,7 +114,7 @@ export class TbMarkdownComponent implements OnChanges {
}
private render(markdown: string) {
const compiled = this.markdownService.parse(markdown, { decodeHtml: false });
const compiled = this.markdownService.parse(markdown, { decodeHtml: false, disableSanitizer: true });
let markdownClass = 'tb-markdown-view';
if (this.markdownClass) {
markdownClass += ` ${this.markdownClass}`;

69
ui-ngx/src/app/shared/components/marked-options.service.ts

@ -19,13 +19,13 @@ import { Inject, Injectable, DOCUMENT } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { WINDOW } from '@core/services/window.service';
import { Tokens, marked, TokenizerObject } from 'marked';
import { Parser, Tokens, marked, TokenizerObject } from 'marked';
import { Clipboard } from '@angular/cdk/clipboard';
const copyCodeBlock = '{:copy-code}';
const codeStyleRegex = '^{:code-style="(.*)"}\n';
const autoBlock = '{:auto}';
const targetBlankBlock = '{:target=&quot;_blank&quot;}';
const targetBlankBlock = '{:target="_blank"}';
// @dynamic
@Injectable({
@ -42,7 +42,9 @@ export class MarkedOptionsService implements MarkedOptions {
smartypants = false;
mangle = false;
private renderer2 = new MarkedRenderer();
private parser = new Parser({
renderer: this.renderer
});
private id = 1;
@ -70,47 +72,66 @@ export class MarkedOptionsService implements MarkedOptions {
}
};
marked.use({tokenizer});
this.renderer.code = (code: string, language: string | undefined, isEscaped: boolean) => {
const codeContext = processCode(code);
const origCode = this.renderer.code.bind(this.renderer);
const origTable = this.renderer.table.bind(this.renderer);
const origTablecell = this.renderer.tablecell.bind(this.renderer);
const origLink = this.renderer.link.bind(this.renderer);
this.renderer.code = (code: Tokens.Code) => {
const codeContext = processCode(code.text);
code.text = codeContext.code;
if (codeContext.copyCode) {
const content = postProcessCodeContent(this.renderer2.code(codeContext.code, language, isEscaped), codeContext);
const content = postProcessCodeContent(origCode(code), codeContext);
this.id++;
return this.wrapCopyCode(this.id, content, codeContext);
} else {
return this.wrapDiv(postProcessCodeContent(this.renderer2.code(codeContext.code, language, isEscaped), codeContext));
return this.wrapDiv(postProcessCodeContent(origCode(code), codeContext));
}
};
this.renderer.table = (header: string, body: string) => {
this.renderer.table = (token: Tokens.Table) => {
let autoLayout = false;
if (header.includes(autoBlock)) {
autoLayout = true;
header = header.replace(autoBlock, '');
for (const h of token.header) {
if (h.text.includes(autoBlock)) {
autoLayout = true;
if (h.tokens?.length) {
h.tokens.filter(t => t.type === 'text').forEach((t: Tokens.Text) => t.text = t.text.replace(autoBlock, ''));
}
}
}
let table = this.renderer2.table(header, body);
let table = origTable(token);
if (autoLayout) {
table = table.replace('<table', '<table class="auto"');
}
return table;
};
this.renderer.tablecell = (content: string, flags: {
header: boolean;
align: 'center' | 'left' | 'right' | null;
}) => {
const codeContext = processCode(content);
this.renderer.tablecell = (token: Tokens.TableCell) => {
const codeContext = processCode(token.text);
codeContext.multiline = false;
if (codeContext.copyCode) {
this.id++;
content = this.wrapCopyCode(this.id, codeContext.code, codeContext);
if (token.tokens?.length && token.tokens[token.tokens.length - 1].type === 'text') {
const textToken = token.tokens[token.tokens.length - 1] as Tokens.HTML;
textToken.text = this.wrapCopyCode(this.id, codeContext.code, codeContext);
textToken.type = 'html';
} else {
token.text = this.wrapCopyCode(this.id, codeContext.code, codeContext);
}
}
return this.renderer2.tablecell(content, flags);
return origTablecell(token);
};
this.renderer.link = (href: string | null, title: string | null, text: string) => {
if (text.endsWith(targetBlankBlock)) {
text = text.substring(0, text.length - targetBlankBlock.length);
const content = this.renderer2.link(href, title, text);
this.renderer.link = (token: Tokens.Link) => {
if (token.text.endsWith(targetBlankBlock)) {
if (token.tokens?.length && token.tokens[token.tokens.length - 1].type === 'text') {
const textToken = token.tokens[token.tokens.length - 1] as Tokens.Text;
textToken.text = textToken.text.substring(0, textToken.text.length - targetBlankBlock.length);
} else {
token.text = token.text.substring(0, token.text.length - targetBlankBlock.length);
}
const content = origLink(token);
return content.replace('<a href=', '<a target="_blank" href=');
} else {
return this.renderer2.link(href, title, text);
return origLink(token);
}
};
this.document.addEventListener('selectionchange', this.onSelectionChange.bind(this));

6
ui-ngx/src/app/shared/components/multiple-image-input.component.ts

@ -21,7 +21,7 @@ import { AppState } from '@core/core.state';
import { ControlValueAccessor, FormArray, NG_VALUE_ACCESSOR, } from '@angular/forms';
import { Subscription } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { DropDirective, FlowDirective } from '@flowjs/ngx-flow';
import { FlowConfig, FlowDrop } from '@flowjs/ngx-flow';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { UtilsService } from '@core/services/utils.service';
import { DialogService } from '@core/services/dialog.service';
@ -78,10 +78,10 @@ export class MultipleImageInputComponent extends PageComponent implements AfterV
dragIndex: number;
@ViewChild('flow', {static: true})
flow: FlowDirective;
flow: FlowConfig;
@ViewChild('flowDrop', {static: true})
flowDrop: DropDirective;
flowDrop: FlowDrop;
autoUploadSubscription: Subscription;

36
ui-ngx/src/app/shared/components/popover.component.ts

@ -30,7 +30,7 @@ import {
OnInit,
Optional,
Output,
Renderer2,
Renderer2, runInInjectionContext,
SimpleChanges,
TemplateRef,
Type,
@ -63,6 +63,11 @@ import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils';
import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations';
import { coerceBoolean } from '@shared/decorators/coercion';
import {
widgetContextToken,
widgetErrorMessagesToken,
widgetTitlePanelToken
} from '@home/models/widget-component.models';
export type TbPopoverTrigger = 'click' | 'focus' | 'hover' | null;
@ -157,7 +162,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
this.renderer.parentNode(this.elementRef.nativeElement),
componentRef.location.nativeElement
);
this.component.setOverlayOrigin(new CdkOverlayOrigin(this.origin || this.elementRef));
this.component.setOriginElement(this.origin || this.elementRef);
this.initProperties();
@ -486,6 +491,7 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
preferredPlacement: PopoverPlacement = 'top';
strictPosition = false;
origin!: CdkOverlayOrigin;
originElement: ElementRef;
public dir: Direction = 'ltr';
classMap: { [klass: string]: any } = {};
positions: ConnectionPositionPair[] = [...DEFAULT_POPOVER_POSITIONS];
@ -504,6 +510,7 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
public cdr: ChangeDetectorRef,
private renderer: Renderer2,
private animationBuilder: AnimationBuilder,
private injector: Injector,
@Optional() private directionality: Directionality
) {}
@ -546,7 +553,27 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
if (this.tbVisible) {
return;
}
if (!this.origin) {
const injector: Injector = Injector.create(
{
providers: [
{
provide: ElementRef,
useValue: this.originElement
}
],
parent: this.injector
});
runInInjectionContext(injector, () => {
this.origin = new CdkOverlayOrigin();
this.doShow();
});
} else {
this.doShow();
}
}
private doShow(): void {
if (!this.isEmpty()) {
this.tbVisible = true;
this.tbVisibleChange.next(true);
@ -648,9 +675,8 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
}
}
setOverlayOrigin(origin: CdkOverlayOrigin): void {
this.origin = origin;
this.cdr.markForCheck();
setOriginElement(originElement: ElementRef): void {
this.originElement = originElement;
}
onClickOutside(event: MouseEvent): void {

4
ui-ngx/src/app/shared/components/popover.service.ts

@ -142,7 +142,7 @@ export class TbPopoverService {
conf.componentRef.location.nativeElement
);
const originElementRef = new ElementRef(conf.trigger);
component.setOverlayOrigin(new CdkOverlayOrigin(originElementRef));
component.setOriginElement(originElementRef);
component.tbPlacement = conf.preferredPlacement;
component.tbComponent = conf.componentType;
component.tbComponentInjector = conf.injector;
@ -198,7 +198,7 @@ export class TbPopoverService {
const originElementRef = new ElementRef(trigger);
component.tbAnimationState = 'void';
component.tbOverlayStyle = {...overlayStyle, opacity: '0' };
component.setOverlayOrigin(new CdkOverlayOrigin(originElementRef));
component.setOriginElement(originElementRef);
component.tbPlacement = preferredPlacement;
component.tbComponent = this.helpMarkdownComponent;
component.tbComponentInjector = injector;

3
ui-ngx/src/app/shared/components/time/datetime.component.ts

@ -18,7 +18,6 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { MatDatetimepickerType } from '@mat-datetimepicker/core/datetimepicker/datetimepicker-type';
import { coerceBoolean } from '@shared/decorators/coercion';
@Component({
@ -55,7 +54,7 @@ export class DatetimeComponent implements OnInit, ControlValueAccessor {
appearance: MatFormFieldAppearance = 'fill';
@Input()
type: MatDatetimepickerType = 'datetime';
type: 'date' | 'time' | 'month' | 'year' | 'datetime' = 'datetime';
@Input()
disabled: boolean;

8
ui-ngx/src/app/shared/shared.module.ts

@ -238,6 +238,7 @@ import { TimeUnitInputComponent } from '@shared/components/time-unit-input.compo
import { DateExpirationPipe } from '@shared/pipe/date-expiration.pipe';
import { EntityLimitExceededDialogComponent } from '@shared/components/dialog/entity-limit-exceeded-dialog.component';
import { DynamicMatDialogModule } from '@shared/components/dialog/dynamic/dynamic-dialog.module';
import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS } from '@angular/material/button-toggle';
export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
return markedOptionsService;
@ -298,6 +299,13 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
disableTooltipInteractivity: true
}
},
{
provide: MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
useValue: {
hideSingleSelectionIndicator: true,
hideMultipleSelectionIndicator: true
}
},
CountryData
],
declarations: [

2
ui-ngx/src/form.scss

@ -136,7 +136,7 @@
> .mat-expansion-panel-header-description {
align-items: center;
}
> .mat-expansion-panel-content {
.mat-expansion-panel-content {
> .mat-expansion-panel-body {
display: flex;
flex-direction: column;

37
ui-ngx/src/theme.scss

@ -15,6 +15,7 @@
*/
@use '@angular/material' as mat;
@use 'theme-overwrites' as overwrites;
@use '@angular/material/core/tokens/m2-utils';
@import '../theme/datepicker-theme';
@import './scss/constants';
@ -58,10 +59,6 @@ $tb-mat-indigo: (
$tb-primary: mat.m2-define-palette($tb-mat-indigo);
$tb-accent: mat.m2-define-palette(mat.$m2-deep-orange-palette);
$background: (background: map_get(mat.$m2-grey-palette, 200));
$tb-theme-background: map_merge(mat.$m2-light-theme-background-palette, $background);
$tb-mat-theme: mat.m2-define-light-theme((
color: (
primary: $tb-primary,
@ -73,10 +70,9 @@ $tb-mat-theme: mat.m2-define-light-theme((
density: 0
));
$color: map_get($tb-mat-theme, color);
$color: map_merge($color, (background: $tb-theme-background));
$tb-mat-theme: map_merge($tb-mat-theme, (color: $color));
$tb-theme: map_merge($tb-mat-theme, $color);
$tb-theme-system: m2-utils.get-system($tb-mat-theme);
$tb-theme-system: map_merge($tb-theme-system, ( background: map_get(mat.$m2-grey-palette, 200) ));
$tb-theme: map_merge($tb-mat-theme, (_mat-system: $tb-theme-system));
$primary: mat.m2-get-color-from-palette($tb-primary);
$accent: mat.m2-get-color-from-palette($tb-accent);
@ -116,24 +112,6 @@ $tb-dark-mat-indigo: (
$tb-dark-primary: mat.m2-define-palette($tb-dark-mat-indigo);
$tb-dark-theme-background: (
status-bar: black,
app-bar: map_get($tb-dark-mat-indigo, 900),
background: map_get($tb-dark-mat-indigo, 800),
hover: rgba(white, 0.04),
card: map_get($tb-dark-mat-indigo, 800),
dialog: map_get($tb-dark-mat-indigo, 800),
disabled-button: rgba(white, 0.12),
raised-button: map-get($tb-dark-mat-indigo, 50),
focused-button: rgba(white, 0.12),
selected-button: map_get($tb-dark-mat-indigo, 900),
selected-disabled-button: map_get($tb-dark-mat-indigo, 800),
disabled-button-toggle: black,
unselected-chip: map_get($tb-dark-mat-indigo, 700),
disabled-list-option: black,
tooltip: map_get(mat.$m2-grey-palette, 700),
);
$tb-dark-theme: mat.m2-define-dark-theme((
color: (
primary: $tb-dark-primary,
@ -143,10 +121,9 @@ $tb-dark-theme: mat.m2-define-dark-theme((
density: 0
));
$color: map_get($tb-dark-theme, color);
$color: map_merge($color, (background: $tb-dark-theme-background));
$tb-dark-theme: map_merge($tb-dark-theme, (color: $color));
$tb-dark-theme: map_merge($tb-dark-theme, $color);
$tb-dark-theme-system: m2-utils.get-system($tb-dark-theme);
$tb-dark-theme-system: map_merge($tb-dark-theme-system, ( surface: map_get($tb-dark-mat-indigo, 800) ));
$tb-dark-theme: map_merge($tb-dark-theme, (_mat-system: $tb-dark-theme-system));
@mixin mat-fab-toolbar-theme($theme) {
$primary: map-get($theme, primary);

3309
ui-ngx/yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save