qms-angular 1.0.70 → 1.0.71

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/utils.js

@@ -1,4 +1,6 @@
-export const HtmlAttributes = {
+import { trimStart } from '../common/qmsCKEditorUtil';
+
+export const HTML_ATTRIBUTES = {
 	COORDS: 'coords',
 	HREF: 'href',
 	SHAPE: 'shape',
@@ -6,7 +8,7 @@ export const HtmlAttributes = {
 	TARGET: 'target',
 	USE_MAP: 'usemap',
 	ALT: 'alt',
-	WIDTH: 'width', 
+	WIDTH: 'width',
 	HEIGHT: 'height',
 	SRC: 'src',
 	ID: 'id',
@@ -14,44 +16,48 @@ export const HtmlAttributes = {
 }
 
 
-export const HtmlElements = {
+export const HTML_ELEMENTS = {
 	MAP: 'map',
 	IMAGE: 'img',
 	AREA: 'area'
 }
 
 
-export const ImageMapAttributes = {
+export const IMAGEMAP_ATTRIBUTES = {
 	MAP_AREAS: 'mapareas',
 	MAP_NAME: 'mapname' ,
-	MAP_WIDTH: 'mapwidth', 
+	MAP_WIDTH: 'mapwidth',
 	MAP_HEIGHT: 'mapheight',
 	IMAGE_USE_MAP: 'imageusemap',
 	IMAGE_SAVED_SRC: 'imagesavedsrc',
 	IMAGE_SRC: 'src',//It is already defined by the image plugin
-	IMAGE_WIDTH: 'imagewidth', 
+	IMAGE_WIDTH: 'imagewidth',
 	IMAGE_HEIGHT: 'imageheight',
 }
 
-export const ImageMapCommands = {
-	INSERT: 'insertImageMap',
-	RESIZE: 'resizeImageMap'
+export const IMAGEMAP_COMMANDS = {
+	IMAGEMAP_DIALOG: 'imagemapdialog',
+	IMAGEMAP: 'imagemap',
+	RESIZE_IMAGEMAP: 'resizeimagemap'
 }
 
-export const ImageMapElements = {
-	MAP: 'npmap',
+export const IMAGEMAP_ELEMENTS = {
+	MAP: 'qmsmap',
 	IMAGE: 'image'//It is already defined by the image plugin
 }
 
-export function trimStart(text, charToRemove){
-	if(text && text.length > 0){
-		if(text.charAt(0) == charToRemove){
-			return text.substring(1);
-		}
-	}
-	return text;
+export function createInsertedEvent(mapname){
+	return trimStart(mapname, '#') + '_inserted';
+}
+
+export function createRemovedEvent(mapname){
+	return trimStart(mapname, '#') + '_removed';
 }
- 
+
+export function createResizedEvent(mapname){
+	return trimStart(mapname, '#') + '_resized';
+}
+
 export function parsePixelToFloat(pixel, fractionDigits){
 	if(pixel){
 		pixel = pixel.toString().replaceAll('px', '');
@@ -67,13 +73,13 @@ export function parsePixelToFloat(pixel, fractionDigits){
 }
 
 function isMapNode(lowerCaseNameObject, node){
-	return node.is('element', ImageMapElements.MAP)
-			&& node.hasAttribute(ImageMapAttributes.MAP_NAME)
-			&& lowerCaseNameObject[getLowerCaseMapName(node)]; 
+	return node.is('element', IMAGEMAP_ELEMENTS.MAP)
+			&& node.hasAttribute(IMAGEMAP_ATTRIBUTES.MAP_NAME)
+			&& lowerCaseNameObject[getLowerCaseMapName(node)];
 }
 
 function getLowerCaseMapName(node){
-	return node.getAttribute(ImageMapAttributes.MAP_NAME).toLowerCase(); 
+	return node.getAttribute(IMAGEMAP_ATTRIBUTES.MAP_NAME).toLowerCase();
 }
 
 export function findMapNodes(names, range) {
@@ -95,7 +101,7 @@ export function findMapNodes(names, range) {
     }
     return Object.keys(nodes).map(key => nodes[key]);
 };
- 
+
 
 export function findFirstMapNode(name, range) {
 	if(!name) { return null; }
@@ -112,8 +118,6 @@ export function findFirstMapNode(name, range) {
     }
     return null;
 };
- 
-
 
 export function resizeAreaWidth(area, ratio) {
 	var coords = area.coords.split(',');
@@ -156,22 +160,9 @@ export function resizeAreaHeight(area, ratio, widthChanged) {
 			return area;
 	}
 };
-  
- export function debounced(fn, delay) {
-	let timerId;
-	return function (...args) {
-	  if (timerId) {
-		clearTimeout(timerId);
-	  }
-	  timerId = setTimeout(() => {
-		fn(...args);
-		timerId = null;
-	  }, delay);
-	}
-  }
 
 export function drawMap(imageSrc, imageWidth, imageHeight, areas, callback){
-	if(areas && areas.length > 0){	 
+	if(areas && areas.length > 0){
 		try
 		{
 			var tempImage = new Image(imageWidth, imageHeight);
@@ -179,13 +170,13 @@ export function drawMap(imageSrc, imageWidth, imageHeight, areas, callback){
 			tempImage.addEventListener("load", () =>{
 				var canvas = document.createElement('canvas');
 				var context = canvas.getContext('2d');
-	
+
 				canvas.width = imageWidth;
 				canvas.height = imageHeight;
 				context.drawImage(tempImage, 0, 0, imageWidth, imageHeight);
 				context.strokeStyle = "#FF0000";
 				context.lineWidth = 1;
-				 
+
 				for (var i = 0; i < areas.length; i++) {
 					const area = areas[i];
 					const coords = area.coords.split(',');
@@ -196,7 +187,7 @@ export function drawMap(imageSrc, imageWidth, imageHeight, areas, callback){
 							context.closePath();
 							context.stroke();
 							break;
-		
+
 						case 'poly':
 							context.beginPath();
 							context.moveTo(coords[0], coords[1]);
@@ -206,7 +197,7 @@ export function drawMap(imageSrc, imageWidth, imageHeight, areas, callback){
 							context.closePath();
 							context.stroke();
 							break;
-		
+
 						default:
 							context.strokeRect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
 							break;
@@ -219,16 +210,16 @@ export function drawMap(imageSrc, imageWidth, imageHeight, areas, callback){
 					newSrc = canvas.toDataURL();
 				}
 				catch(err){
-					 
+
 				}
 				if(callback){
 					callback(oldSrc, newSrc);
 				}
-				 
+
 			}, false);
 		}
 		catch(err){
-			 
-		}	 
+
+		}
 	}
-}
+}

package/src/lib/components/button/button-icon.scss

@@ -87,11 +87,15 @@ $size: 48px;
       color: $primary;
 
       &:not([disabled]):hover,
-      &:not([disabled]):active,
       &:not([disabled]):focus {
         background-color: $primary-light-3-opacity;
         color: $primary;
       }
+   
+      &:not([disabled]):active {
+        background-color: $primary-light-6-opacity;
+        color: $primary;
+      }
     }
   }
 

package/src/lib/components/qms-navigation-drawer/qms-navigation-drawer.component.scss

@@ -10,6 +10,10 @@
     margin       : 16px 0px;
     padding-right: 34px;
 
+    &.active {
+      background-color: #F2F7FD;
+    }
+
     .tree-content {
       width   : 100%;
       position: relative;
@@ -59,7 +63,7 @@
       flex-grow   : 1;
 
       ::ng-deep mat-icon {
-        color: #1954A9 !important;
+        color: #1954A9;
       }
     }
 
@@ -113,7 +117,7 @@
       }
 
       .favorite {
-        color: #b13514;
+        color: #b13514 !important;
       }
 
       .btn-favorite {

package/src/lib/components/qms-paginator/qms-paginator.component.scss

@@ -0,0 +1,128 @@
+::ng-deep .qms-paginator {
+    display: block;
+    .qms-paginator-outer-container {
+        display: flex;
+    }
+    .mat-paginator-container {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 0 8px;
+        flex-wrap: wrap-reverse;
+        width: 100%;
+        .qms-total-result {
+            margin-right: 24px;
+            margin-bottom: 15px;
+            span {
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 22px;
+                color: rgba(0, 0, 0, 0.6);
+            }
+        }
+        .qms-paginator-page-size {
+            margin-right: 24px;
+            display: flex;
+            align-items: baseline;
+            .qms-pagesize-label {
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 22px;
+                color: #323232;
+                font-family: Open Sans;
+                font-style: normal;
+                margin-right: 8px;
+            }
+            .qms-form-page-size {
+                .mat-form-field-flex {
+                    width: 80px;
+                }
+            }
+            .jump-page {
+                .mat-form-field-wrapper {
+                    .mat-form-field-flex {
+                        width: 55px;
+                    }
+                }
+            }
+            .mat-form-field-flex {
+                height: 40px;
+                .mat-form-field-infix {
+                    padding-top: 7px;
+                    border-top: 0px;
+                    padding-bottom: 0px;
+                }
+            }
+        }
+        .qms-paginator-range-actions {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            .selected {
+                background-color: #e5eefb;
+                color: #1954a9;
+            }
+            .qms-3d {
+                font-weight: 600;
+                font-size: 14px;
+                line-height: 22px;
+                color: #323232;
+            }
+        }
+    }
+    .mat-paginator-container-mobile {
+        .qms-total-result {
+            margin-bottom: 16px;
+            span {
+                font-family: Open Sans;
+                font-style: normal;
+                font-weight: normal;
+                font-size: 12px;
+                line-height: 16px;
+                color: rgba(0, 0, 0, 0.6);
+            }
+        }
+        .mat-paginator-container {
+            justify-content: flex-start;
+        }
+        .qms-paginator-page-size {
+            margin-right: 24px;
+            display: flex;
+            align-items: baseline;
+            .qms-pagesize-label {
+                font-weight: normal;
+                font-size: 12px;
+                line-height: 22px;
+                color: #323232;
+                font-family: Open Sans;
+                font-style: normal;
+                margin-right: 8px;
+            }
+            .qms-form-page-size {
+                .mat-form-field-flex {
+                    width: 80px;
+                }
+            }
+            .jump-page {
+                .mat-form-field-wrapper {
+                    .mat-form-field-flex {
+                        width: 55px;
+                    }
+                }
+            }
+            .mat-form-field-flex {
+                height: 40px;
+                .mat-form-field-infix {
+                    padding-top: 7px;
+                    border-top: 0px;
+                    padding-bottom: 0px;
+                }
+            }
+        }
+    }
+    .size-small {
+        .mat-paginator-container {
+            justify-content: flex-start;
+        }
+    }
+}

package/src/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.scss

@@ -1,16 +1,4 @@
-.qmsckeditor__bpmn__container {
-  // .cdk-overlay-pane{
-  //   width: unset !important;
-  //   height: unset !important;
-  //   max-width: 100% !important;
-  // }
-
-  // .mat-dialog-container{
-  //   max-width: 100%;
-  //   max-height: 100% !important;
-  //   resize: both;
-  // }
-
+:host ::ng-deep .qmsckeditor__bpmn__container {
   .bpmn__editor {
     width:100%;
     height: 600px;
@@ -37,7 +25,7 @@
     bottom:0;
     left:0;
     right:0;
-    margin-bottom: 17px;
+    margin-bottom: 16px;
     height:50px;
     width:100%;
   }
@@ -130,7 +118,7 @@
         background: none;
     }
 
-    ::ng-deep .mat-expansion-indicator {
+    .mat-expansion-indicator {
         &::after {
           color: white;
           transform: rotate(-135deg);
@@ -147,10 +135,74 @@
     }
   }
 
-  ::ng-deep .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input {
+  .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input {
     width: 70%;
     float: none;
   }
-}
 
+  .object-property[data-property$="/fill"] {
+    width: 100%;
+  }
+
+  .object-property[data-property$="/stroke"]
+  {
+    width: 100%;
+  }
+
+  .field[data-field$="/fill"] {
+    width: 100%;
+  }
+
+  .field[data-field$="/stroke"] {
+      width: 100%;
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item:nth-child(odd) {
+    background: #ecefff; /*fallback*/
+    background: -moz-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Firefox*/
+    background: -webkit-gradient(left, #ecefff 0%, #fafafa 100%); /*Chrome + Safari*/
+    background: -webkit-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Another Chrome + Safari*/
+    background: -o-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Opera*/
+    background: -ms-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*IE10+*/
+    background: linear-gradient(to left, #91a1c9 0%, #fafafa 100%); /*W3C standards*/
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFFF', endColorstr='#3571b0',GradientType=0); /*IE6-9*/
+  }
 
+  .joint-inspector.joint-theme-bpmn .list-item:nth-child(even) {
+      background: #ecefff; /*fallback*/
+      background: -moz-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Firefox*/
+      background: -webkit-gradient(left, #ecefff 0%, #fafafa 100%); /*Chrome + Safari*/
+      background: -webkit-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Another Chrome + Safari*/
+      background: -o-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*Opera*/
+      background: -ms-linear-gradient(left, #ecefff 0%, #fafafa 100%); /*IE10+*/
+      background: linear-gradient(to left, #91a1c9 0%, #fafafa 100%); /*W3C standards*/
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFFF', endColorstr='#3571b0',GradientType=0); /*IE6-9*/
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(odd) {
+      background: #eceff7; /*fallback*/
+      background: -moz-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Firefox*/
+      background: -webkit-gradient(left, #eceff7 0%, #eceff7 100%); /*Chrome + Safari*/
+      background: -webkit-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Another Chrome + Safari*/
+      background: -o-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Opera*/
+      background: -ms-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*IE10+*/
+      background: linear-gradient(to left, #eceff7 0%, #eceff7 100%); /*W3C standards*/
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eceff7', endColorstr='#eceff7',GradientType=0); /*IE6-9*/
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(even) {
+      background: #eceff7; /*fallback*/
+      background: -moz-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Firefox*/
+      background: -webkit-gradient(left, #eceff7 0%, #eceff7 100%); /*Chrome + Safari*/
+      background: -webkit-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Another Chrome + Safari*/
+      background: -o-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*Opera*/
+      background: -ms-linear-gradient(left, #eceff7 0%, #eceff7 100%); /*IE10+*/
+      background: linear-gradient(to left, #eceff7 0%, #eceff7 100%); /*W3C standards*/
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eceff7', endColorstr='#eceff7',GradientType=0); /*IE6-9*/
+  }
+
+  .joint-inspector.joint-theme-bpmn .list-item {
+      border-radius: 10px;
+      box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.2);
+  }
+}

package/src/lib/qms-ckeditor-components/styles/_modules.scss

@@ -163,7 +163,7 @@
 
 .qmsckeditor.tooltip-content.height{
     min-height: 400px;
-    max-height: 470px;
+    max-height: 472px;
     overflow: auto;
 }
 
@@ -174,3 +174,11 @@
 .ck-content .page-break {
   width: 100%;
 }
+
+.ck-content .ck-horizontal-line {
+    width: 100%;
+}
+
+.ck-content hr {
+    background: #ccc;
+}

package/src/themes/core/_table.scss

@@ -8,6 +8,7 @@
         border: 1px solid #E0E0E0;
         border-radius: 4px;
         margin-top: 8px;
+        cursor: pointer;
     }
     .expanded {
         background: #F2F7FD;

package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/insertimagemapcommand.js

@@ -1,128 +0,0 @@
-
-import { Command } from '@ckeditor/ckeditor5-core';
-import { isImage } from '@ckeditor/ckeditor5-image/src/image/utils';
-import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
-import * as QMSCKEditorService from '../common/qmsCKEditorService';
-import { ImageMapAttributes, ImageMapElements, trimStart, parsePixelToFloat, findFirstMapNode, findMapNodes, drawMap } from './utils';
-import  { getSelectedImageWidget } from '@ckeditor/ckeditor5-image/src/image/utils';
- 
-export default class InsertImageMapCommand extends Command {
-	 
-	refresh() {
-		const element = this.editor.model.document.selection.getSelectedElement();
-		this.isEnabled = isImage(element);
-	}
- 
-	execute() {
-		const editor = this.editor;
-		const model = editor.model;
-		const view = editor.editing.view;
-		const selectedElement = model.document.selection.getSelectedElement();
- 
-		const mapName = selectedElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
-		let originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
-		if(selectedElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) && selectedElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-			originalImageSrc = selectedElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
-		}
-
-		const data = {'imageUrl': originalImageSrc, 'areas': [], imageWidth: null, imageHeight: null};
-		const imageWidget = getSelectedImageWidget( view.document.selection);
-		const widgetResizePlugin = editor.plugins.get('WidgetResize');
-        const resizer = widgetResizePlugin.getResizerByViewElement( imageWidget );
-
-		if(resizer){
-			const resizerWrapper = resizer._viewResizerWrapper;
-			data.imageWidth = parsePixelToFloat(resizerWrapper.getStyle('width', 0));
-			data.imageHeight = parsePixelToFloat(resizerWrapper.getStyle('height', 0));
-		}
- 
-		if(!!mapName){
-			const range = model.createRangeIn(model.document.getRoot());
-			const existingMapElement = findFirstMapNode(trimStart(mapName, '#'), range);
-			if(existingMapElement){
-				data.areas = JSON.parse(existingMapElement.getAttribute(ImageMapAttributes.MAP_AREAS) || []);
-			}
-		}
- 
-		QMSCKEditorService.imageMapNotify(data);
-        window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = false;
-        window.addEventListener(QMSCKEditorConstant.QMSCK_IMAGEMAP_PLUGIN_RESP, (evt) => {
-            if (window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING]) { 
-                return; 
-            }
-            window[QMSCKEditorConstant.QMSCK_IMAGEMAP_IS_PROCESSING] = true;    
-            model.change(writer => {
-				var newMapName =  trimStart(evt.detail.name, '#');
-				const areas = evt.detail.areas;
-				const width = evt.detail.imageWidth;
-				const height = evt.detail.imageHeight;
-				const imageElement = model.document.selection.getSelectedElement();
-				const oldMapName = imageElement.getAttribute(ImageMapAttributes.IMAGE_USE_MAP);
-
-				if(!!oldMapName){
-					const range = model.createRangeIn(model.document.getRoot());
-					const existingMapElements = findMapNodes([trimStart(oldMapName, '#')], range);
-					if(existingMapElements && existingMapElements.length > 0){
-						existingMapElements.forEach(element => {
-							writer.remove(element);
-						});
-					}
-				}
-
-				if(!!areas && areas.length > 0) 
-				{
-					writer.setAttribute(ImageMapAttributes.IMAGE_USE_MAP, '#' + newMapName, imageElement);
-					writer.setAttribute(ImageMapAttributes.IMAGE_WIDTH, width, imageElement);
-					writer.setAttribute(ImageMapAttributes.IMAGE_HEIGHT, height, imageElement);
-
-					let originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SRC);
-					if(!imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC) || !imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-						writer.setAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, originalImageSrc, imageElement);
-					}
-					else{
-						originalImageSrc = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
-					}
-  
-					drawMap(originalImageSrc, width, height, areas, (oldsrc, newsrc) =>{
-						model.enqueueChange(writer => {
-							writer.setAttribute(ImageMapAttributes.IMAGE_SRC, newsrc, imageElement);
-						} );
-					});
-	 
-					let attrs = {};
-					attrs[ImageMapAttributes.MAP_NAME] = newMapName;
-					attrs[ImageMapAttributes.MAP_AREAS] = JSON.stringify(areas);
-					attrs[ImageMapAttributes.MAP_WIDTH] = width;
-					attrs[ImageMapAttributes.MAP_HEIGHT] = height;
-					const mapElement = writer.createElement(ImageMapElements.MAP, attrs);	 
-
-					writer.insert(mapElement, writer.createPositionAt(imageElement, "after"));
-				} 
-				else {
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_USE_MAP)){
-						writer.removeAttribute(ImageMapAttributes.IMAGE_USE_MAP, imageElement);
-					}
- 
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_SAVED_SRC)){
-						 
-						let src = imageElement.getAttribute(ImageMapAttributes.IMAGE_SAVED_SRC);
-						if(!!src){
-							writer.setAttribute(ImageMapAttributes.IMAGE_SRC, src, imageElement);
-						}
-						writer.removeAttribute(ImageMapAttributes.IMAGE_SAVED_SRC, imageElement);
-					}
- 
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_HEIGHT)){
-						writer.removeAttribute(ImageMapAttributes.IMAGE_HEIGHT, imageElement);
-					}
-
-					if(imageElement.hasAttribute(ImageMapAttributes.IMAGE_WIDTH)){
-						writer.removeAttribute(ImageMapAttributes.IMAGE_WIDTH, imageElement);
-					}
-				}
-            });
-        },
-		{ once: true });
-	}
-}
-