qms-angular 1.0.27 → 1.0.31

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/tooltipui.js

@@ -0,0 +1,203 @@
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import informationIcon from '../../themes/icons/information.svg';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import ActionsView from './ui/actionsview';
+import { ClickObserver } from '@ckeditor/ckeditor5-engine';
+import { ButtonView, ContextualBalloon, clickOutsideHandler } from '@ckeditor/ckeditor5-ui';
+import { TOOLTIP_ATTRIBUTE, findTooltipElementAncestor, getSelectionParent, INSERT_TOOLTIP_COMMAND, REMOVE_TOOLTIP_COMMAND} from './utils';
+
+export default class TooltipUI extends Plugin {
+	static get requires() {
+		return [ContextualBalloon];
+	}
+ 
+	static get pluginName() {
+		return 'TooltipUI';
+	}
+
+	get _isVisible() {
+		return this._balloon.visibleView === this._actionView;
+	}
+
+	get _isInBalloon() {
+		return this._balloon.hasView(this._actionView);
+	}
+ 
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const view = editor.editing.view;
+ 
+        view.addObserver(ClickObserver);
+        this._createActionsView();
+ 
+        editor.ui.componentFactory.add('tooltip', locale => {
+            const buttonView = new ButtonView(locale);
+
+            buttonView.set({
+                label: t('Tooltip'),
+                icon: informationIcon,
+                withText: true,
+                tooltip: true
+            });
+ 
+			// Bind button to the command.
+            const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
+			buttonView.bind('isEnabled').to(insertTooltipCommand, 'isEnabled' );
+			buttonView.bind('isOn').to(insertTooltipCommand, 'value', value => !!value );
+
+            buttonView.on('execute', () => {
+				editor.execute(INSERT_TOOLTIP_COMMAND);
+            });
+
+            return buttonView;
+        });
+    }
+ 
+	destroy() {
+		super.destroy();
+		this._actionView.destroy();
+	}
+ 
+	_createActionsView() {
+		const editor = this.editor;
+		const view = editor.editing.view;
+		const viewDocument = view.document;
+		this._balloon = this.editor.plugins.get('ContextualBalloon');
+		this._actionView = new ActionsView(editor.locale); 
+
+		const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
+		const removeTooltipCommand = editor.commands.get(REMOVE_TOOLTIP_COMMAND);
+ 
+		this._actionView.bind(TOOLTIP_ATTRIBUTE).to( insertTooltipCommand, 'value');
+		this._actionView.editButtonView.bind('isEnabled').to(insertTooltipCommand);
+		this._actionView.removeButtonView.bind('isEnabled').to(removeTooltipCommand);
+	 
+		this.listenTo(this._actionView, 'edit', () => {
+            const tooltip = { text: '', content: '' };
+            const selectedElement = this._getSelectedTooltipElement();
+            if(selectedElement){
+                tooltip.content = selectedElement.getAttribute(TOOLTIP_ATTRIBUTE);
+                if(selectedElement.childCount > 0){
+                    tooltip.text = selectedElement.getChild(0).data;
+                }
+            }
+            QMSCKEditorService.tooltipNotify(tooltip);
+            window[QMSCKEditorConstant.QMSCK_TOOLTIP_IS_PROCESSING] = false;
+			this._hideActionsView(true);
+		});
+
+		this.listenTo(this._actionView, 'remove', () => {
+            editor.execute(REMOVE_TOOLTIP_COMMAND);
+			this._hideActionsView(true);
+		});
+ 
+		this._actionView.keystrokes.set('Esc', (data, cancel) => {
+			this._hideActionsView(true);
+			cancel();
+		});
+
+        this.listenTo(viewDocument, 'click', () => {
+            const selectedElement = this._getSelectedTooltipElement();
+			if (!!selectedElement) {
+				// Then show panel but keep focus inside editor editable.
+				this._showActionsView();
+			}
+		});
+ 
+		// Close on click outside of balloon panel element.
+		clickOutsideHandler({
+			emitter: this._actionView,
+			activator: () => this._isVisible,
+			contextElements: [ this._balloon.view.element ],
+			callback: () => this._hideActionsView()
+		});
+	}
+
+	_showActionsView() {
+		if (this._isVisible) {
+			return;
+		}
+		const editor = this.editor;
+		const viewDocument = editor.editing.view.document;
+		//const command = editor.commands.get('imageTextAlternative');
+		//const labeledInput = this._actionView.labeledInput;
+ 
+		if (!this._isInBalloon) {
+			this._balloon.add({
+				view: this._actionView,
+				position: this._getBalloonPositionData()
+			});
+		}
+ 
+		// Reposition the balloon or hide the form if an tooltip is no longer selected.
+		const prevSelectedElement = this._getSelectedTooltipElement();
+		const prevSelectionParent = getSelectionParent(viewDocument);
+		 
+		this.listenTo(editor.ui, 'update', () => {
+			const selectedElement = this._getSelectedTooltipElement();
+			const selectionParent = getSelectionParent(viewDocument);
+
+			if ((prevSelectedElement && !selectedElement) || (!prevSelectedElement && selectionParent !== prevSelectionParent)) {
+				this._hideActionsView(true);
+			}
+			else if (this._isVisible) 
+			{
+				this._balloon.updatePosition(this._getBalloonPositionData());              
+			}
+		});
+	}
+
+     _getBalloonPositionData() {
+        const editingView = this.editor.editing.view;
+        const selectedElement = this._getSelectedTooltipElement();
+        return {
+            target: editingView.domConverter.viewToDom(selectedElement)
+        };
+    }
+
+	_hideActionsView(focusEditable) {
+		if (!this._isInBalloon) {
+			return;
+		}
+ 
+		if (this._actionView.focusTracker.isFocused) {
+			this._actionView.removeButtonView.focus();
+		}
+        this.stopListening(this.editor.ui, 'update');
+		this._balloon.remove(this._actionView);
+
+		if (focusEditable) {
+			this.editor.editing.view.focus();
+		}
+	}
+
+    _getSelectedTooltipElement() {
+		const view = this.editor.editing.view;
+		const selection = view.document.selection;
+		if (selection.isCollapsed) {
+			return findTooltipElementAncestor(selection.getFirstPosition());
+		} 
+        else {
+			// The range for fully selected link is usually anchored in adjacent text nodes.
+			// Trim it to get closer to the actual link element.
+			const range = selection.getFirstRange().getTrimmed();
+			const startTooltip = findTooltipElementAncestor(range.start);
+			const endTooltip = findTooltipElementAncestor(range.end);
+			if (!startTooltip || startTooltip != endTooltip) {
+				return null;
+			}
+
+			// Check if the link element is fully selected.
+			if (view.createRangeIn(startTooltip).getTrimmed().isEqual(range)) {
+				return startTooltip;
+			} 
+			else {
+				return null;
+			}
+		}
+	}
+}
+ 

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/ui/actionsview.js

@@ -0,0 +1,95 @@
+import { ButtonView, View, ViewCollection, FocusCycler } from '@ckeditor/ckeditor5-ui';
+import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import { icons } from '@ckeditor/ckeditor5-core';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '../../../themes/tyles/linkactions.css';
+import { TOOLTIP_ATTRIBUTE } from '../utils';
+export default class ActionsView extends View {
+	constructor( locale ) {
+		super( locale );
+
+		const t = locale.t;
+ 
+		this.focusTracker = new FocusTracker();
+ 
+		this.keystrokes = new KeystrokeHandler();
+  
+		this.removeButtonView = this._createButton(t('Remove tooltip'), icons.eraser, 'remove');
+ 
+		this.editButtonView = this._createButton(t('Edit tooltip'), icons.pencil, 'edit');
+ 
+		this.set(TOOLTIP_ATTRIBUTE);
+		 
+		this._focusables = new ViewCollection();
+ 
+		this._focusCycler = new FocusCycler( {
+			focusables: this._focusables,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate fields backwards using the Shift + Tab keystroke.
+				focusPrevious: 'shift + tab',
+				// Navigate fields forwards using the Tab key.
+				focusNext: 'tab'
+			}
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-link-actions',
+					'ck-responsive-form'
+				],
+				// https://github.com/ckeditor/ckeditor5-link/issues/90
+				tabindex: '-1'
+			},
+
+			children: [
+				this.editButtonView,
+				this.removeButtonView
+			]
+		} );
+	}
+
+	render() {
+		super.render();
+
+		const childViews = [
+			this.editButtonView,
+			this.removeButtonView
+		];
+
+		childViews.forEach( v => {
+			// Register the view as focusable.
+			this._focusables.add( v );
+
+			// Register the view in the focus tracker.
+			this.focusTracker.add( v.element );
+		} );
+
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element );
+	}
+
+	focus() {
+		this._focusCycler.focusFirst();
+	}
+
+	_createButton( label, icon, eventName ) {
+		const button = new ButtonView( this.locale );
+
+		button.set( {
+			label,
+			icon,
+			tooltip: true
+		} );
+
+		button.delegate('execute').to(this, eventName);
+
+		return button;
+	}
+}
+	 

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

@@ -0,0 +1,70 @@
+
+export const TOOLTIP_CUSTOM_PROPERTY = 'tooltip';
+export const TOOLTIP_ATTRIBUTE = 'data-tooltip';
+export const INSERT_TOOLTIP_COMMAND = 'inserttooltip';
+export const REMOVE_TOOLTIP_COMMAND = 'removetooltip';
+
+export function isTooltipElement(node) {
+	return node.is('attributeElement') && !!node.getCustomProperty(TOOLTIP_CUSTOM_PROPERTY);
+}
+
+export function findTooltipElementAncestor(position) {
+	return position.getAncestors().find(ancestor => isTooltipElement(ancestor));
+}
+
+export function isTooltipAllowed(element, schema) {
+	if (!element) {
+		return false;
+	}
+	return element.is('element', 'span') && schema.checkAttribute('span', TOOLTIP_ATTRIBUTE);
+}
+
+export function getSelectionParent(viewDocument) {
+	return viewDocument.selection.focus.getAncestors()
+		.reverse()
+		.find(node => node.is('element'));
+}
+
+export function isTyping(editor) {
+	const input = editor.plugins.get('Input');
+	return input.isInput(editor.model.change(writer => writer.batch));
+}
+
+
+export function shouldCopyAttributes(model) {
+	const selection = model.document.selection;
+	const firstPosition = selection.getFirstPosition();
+	const lastPosition = selection.getLastPosition();
+	const nodeAtFirstPosition = firstPosition.nodeAfter;
+
+	// The text tooltip node does not exist...
+	if (!nodeAtFirstPosition) {
+		return false;
+	}
+
+	// ...or it isn't the text node...
+	if (!nodeAtFirstPosition.is('$text')) {
+		return false;
+	}
+
+	// ...or isn't the tooltip.
+	if (!nodeAtFirstPosition.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+		return false;
+	}
+
+	// `textNode` = the position is inside the tooltip element.
+	// `nodeBefore` = the position is at the end of the tooltip element.
+	const nodeAtLastPosition = lastPosition.textNode || lastPosition.nodeBefore;
+
+	// If both references the same node selection contains a single text node.
+	if (nodeAtFirstPosition === nodeAtLastPosition) {
+		return true;
+	}
+
+	// If nodes are not equal, maybe the tooltip nodes has defined additional attributes inside.
+	// First, we need to find the entire tooltip range.
+	const tooltipRange = findAttributeRange(firstPosition, TOOLTIP_ATTRIBUTE, nodeAtFirstPosition.getAttribute(TOOLTIP_ATTRIBUTE), model);
+
+	// Then we can check whether selected range is inside the found tooltip range. If so, attributes should be preserved.
+	return tooltipRange.containsRange(model.createRange(firstPosition, lastPosition) , true);
+}

package/src/assets/qms-ckeditor-plugin/src/themes/icons/information.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M256,85.333c-23.531,0-42.667,19.135-42.667,42.667s19.135,42.667,42.667,42.667s42.667-19.135,42.667-42.667
+				S279.531,85.333,256,85.333z M256,149.333c-11.76,0-21.333-9.573-21.333-21.333s9.573-21.333,21.333-21.333
+				s21.333,9.573,21.333,21.333S267.76,149.333,256,149.333z"/>
+			<path d="M288,192h-85.333c-5.896,0-10.667,4.771-10.667,10.667v42.667c0,5.896,4.771,10.667,10.667,10.667h10.667v160
+				c0,5.896,4.771,10.667,10.667,10.667h64c5.896,0,10.667-4.771,10.667-10.667V202.667C298.667,196.771,293.896,192,288,192z
+				 M277.333,405.333h-42.667v-160c0-5.896-4.771-10.667-10.667-10.667h-10.667v-21.333h64V405.333z"/>
+			<path d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z M256,490.667
+				C126.604,490.667,21.333,385.396,21.333,256S126.604,21.333,256,21.333S490.667,126.604,490.667,256S385.396,490.667,256,490.667
+				z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/qms-ckeditor-plugin/src/themes/icons/timestamp.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" height="512" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1005.714286C241.371429 1005.714286 18.285714 782.628571 18.285714 512 18.285714 241.371429 241.371429 18.285714 512 18.285714c270.628571 0 493.714286 223.085714 493.714286 493.714286C1005.714286 782.628571 782.628571 1005.714286 512 1005.714286zM512 76.8C270.628571 76.8 76.8 270.628571 76.8 512S270.628571 947.2 512 947.2c241.371429 0 435.2-193.828571 435.2-435.2S753.371429 76.8 512 76.8zM709.485714 669.257143c-3.657143 0-10.971429 0-14.628571-3.657143l-215.771429-120.685714L479.085714 256c0-14.628571 14.628571-29.257143 29.257143-29.257143s29.257143 14.628571 29.257143 29.257143L537.6 512l182.857143 102.4c14.628571 7.314286 18.285714 25.6 10.971429 40.228571C731.428571 661.942857 720.457143 669.257143 709.485714 669.257143z" /></svg>

package/src/assets/qms-ckeditor-plugin/src/themes/tyles/tooltip.css

@@ -0,0 +1,74 @@
+.np-tooltip {
+    cursor: help !important;
+    font-style: italic;
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+}
+
+.np-tooltip .np-tooltip__content {
+    visibility: hidden;
+    font-size: .9em;
+    line-height: 1.5;
+    color: var(--ck-color-base-text);
+    padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+    background: var(--ck-color-base-background);
+    border-radius: var(--ck-color-base-border);
+    position: absolute;
+    z-index: 1;
+    top: 150%;
+}
+
+.np-tooltip .np-tooltip__content::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: rotateX(180deg);
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--ck-color-base-background) transparent transparent transparent;
+}
+
+.np-tooltip:hover .np-tooltip__content {
+    visibility: visible;
+}
+
+/*fssssssssssssssssssssssssssssssssssssssssssss*/
+
+.np-tooltip:before {
+    content: attr(data-tooltip);
+    min-width: 54px;
+    color: var(--ck-color-base-text);
+    padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+    background: var(--ck-color-base-background);
+    border-radius: var(--ck-color-base-border);
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.np-tooltip:after {
+    position: absolute;
+    content: "";
+    top: 60%;
+    left: 50%;
+    transform: rotateX(180deg);
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--ck-color-base-background) transparent transparent transparent;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.np-tooltip:hover:before,
+.np-tooltip:hover:after{
+    visibility: visible;
+    opacity: 1;
+}

package/src/lib/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,100 @@
+@import "../../../themes/core/colors";
+
+.breadcrumb-container{
+    display: flex;
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 600;
+    color: #323232;
+    .qms-breadcrumb-item, .qms-breadcrumb-direction-icon{
+        display: flex;
+        align-items: center;
+        padding: 3px 0 2px 0;
+    }
+
+    .qms-breadcrumb-direction-icon{
+        .mat-icon{
+            width: 18px;
+            height: 18px;
+            font-size: 18px;
+            margin-left: 0.5rem;
+            margin-right: 0.5rem;
+        }
+    }
+
+    .item-icon{
+        margin-right: 2px;
+    }
+    .qms-breadcrumb-item{
+        cursor: pointer;
+        .qms-btn-icon{
+            width: 1.5rem;
+            height: 1.5rem;
+            line-height: 1.5rem;
+        }
+        .qms-breadcrumb-item-text{
+            max-width: 240px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .breadcrumb__dropdown-btn{
+            width: 2rem;
+            height: 2rem;
+            svg{
+                display: block;
+            }
+        }
+    }
+
+    .qms-breadcrumb-last-item{
+        color: black(0.6);
+        font-weight: 400;
+        cursor: not-allowed;
+    }
+}
+
+.qms-breadcrumb-table{
+    .breadcrumb-container{
+        .qms-breadcrumb-direction-icon{
+            .mat-icon{
+                width: 12px;
+                height: 12px;
+                font-size: 12px;
+                margin-left: 0.25rem;
+                margin-right: 0.25rem;
+                color: black(0.6);
+            }
+        }
+
+        .item-icon{
+            margin-right: 1px;
+        }
+
+        .qms-breadcrumb-item{
+            .qms-breadcrumb-item-text{
+                max-width: 200px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                font-size: 12px;
+                font-weight: 400;
+                color: black(0.6);
+            }
+        }
+    }   
+}
+
+.qms-breadcrumb__multi-line{
+    .breadcrumb-container{
+        flex-wrap: wrap;
+    }
+}
+
+
+.qms-breadcrumb-menu{
+    .qms-dropdown-menu-item{
+        border: none;
+    }
+}

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

@@ -11,7 +11,7 @@
   border-radius: 4px;
   border: solid 1px #e0e0e0;
 
-  .qms-button-toggle {
+  .qms-button-toggle {  
     font-family: "Open Sans";
     white-space: nowrap;
     position: relative;
@@ -29,6 +29,10 @@
         color: $primary;
       }
 
+      &:hover {
+        background-color: $primary-light-3-opacity;
+      }
+
       &.qms-button-toggle-checked {
         background-color: $primary-light-3-opacity;
         color: $primary;
@@ -69,6 +73,11 @@
       background-color: $primary-light-3-opacity;
       color: $primary;
 
+      &:hover {
+        background-color: $primary;
+        color: white;
+      }
+
       &.qms-button-toggle-checked {
         background-color: $primary;
         color: white;
@@ -113,6 +122,11 @@
         color: $primary-light-32-opacity;
       }
 
+      &:hover {
+        background-color: $primary-lighter;
+        color: $primary;
+      }
+
       &.qms-button-toggle-checked {
         background-color: $primary-lighter;
         color: $primary;
@@ -152,6 +166,16 @@
           }
       }
     }
+
+    &.qms-button-toggle-disabled {
+      cursor: default !important;
+      background: #e4e4e4 !important;
+      color: rgba(0,0,0,.38) !important;
+
+      .mat-icon {
+        color: rgba(0,0,0,.38) !important;
+      }
+    }
   }
 
 //   &.qms-button-toggle-group-appearance-standard {

package/src/lib/components/dialog/dialog.scss

@@ -32,6 +32,14 @@
         color: #1954a9;
       }
     }
+
+    .qms-btn-icon.qms-light {
+      color: white;
+
+      &:hover {
+        color: white;
+      }
+    }
   }
 
   .dialog-container {
@@ -55,6 +63,7 @@
 
     .mat-dialog-content {
       font-size: 14px;
+      font-family: "Open Sans";
     }
 
     .action-btn {