qms-angular 1.0.86 → 1.0.89

package/src/assets/qms-ckeditor-plugin/src/plugins/table/theme/table.css

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+ @import "./snippet.css";
+ .ck-content .table {
+    /* Give the table widget some air and center it horizontally */
+    /* The first value should be equal to --ck-spacing-large variable if used in the editor context
+	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
+    margin: 0.9em auto;
+    display: table;
+
+    & table {
+        /* The table cells should have slight borders */
+        border-collapse: collapse;
+        border-spacing: 0;
+
+        /* Table width and height are set on the parent <figure>. Make sure the table inside stretches
+		to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */
+        width: 100%;
+        height: 100%;
+
+        /* The outer border of the table should be slightly darker than the inner lines.
+		Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
+        border: 1px double hsl(0, 0%, 70%);
+
+        & td,
+        & th {
+            min-width: 2em;
+            padding: 0.4em;
+
+            /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
+			However, the border is a content style, so it should use .ck-content (so it works outside the editor).
+			Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
+            border: 1px solid hsl(0, 0%, 75%);
+        }
+
+        & th {
+            font-weight: bold;
+            background: hsla(0, 0%, 0%, 5%);
+        }
+    }
+}
+
+/* Text alignment of the table header should match the editor settings and override the native browser styling,
+when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
+.ck-content[dir="rtl"] .table th {
+	text-align: right;
+}
+
+.ck-content[dir="ltr"] .table th {
+	text-align: left;
+}
+
+.ck-editor__editable .ck-table-bogus-paragraph {
+	/*
+	 * Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
+	 * See https://github.com/ckeditor/ckeditor5/issues/6062.
+	 */
+	display: inline-block;
+
+	/*
+	 * Inline HTML elements nested in the span should always be dimensioned in relation to the whole cell width.
+	 * See https://github.com/ckeditor/ckeditor5/issues/9117.
+	 */
+	width: 100%;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/theme/tablecaption.css

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-color-table-caption-background: hsl(0, 0%, 97%);
+	--ck-color-table-caption-text: hsl(0, 0%, 20%);
+	--ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%);
+}
+
+/* Content styles */
+.ck-content .table > figcaption {
+	display: table-caption;
+	caption-side: top;
+	word-break: break-word;
+	text-align: center;
+	color: var(--ck-color-table-caption-text);
+	background-color: var(--ck-color-table-caption-background);
+	padding: .6em;
+	font-size: .75em;
+	outline-offset: -1px;
+}
+
+/* Editing styles */
+.ck.ck-editor__editable .table > figcaption {
+	&.table__caption_highlighted {
+		animation: ck-table-caption-highlight .6s ease-out;
+	}
+
+	&.ck-placeholder::before {
+		padding-left: inherit;
+		padding-right: inherit;
+
+		/*
+		 * Make sure the table caption placeholder doesn't overflow the placeholder area.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9162.
+		 */
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+@keyframes ck-table-caption-highlight {
+	0% {
+		background-color: var(--ck-color-table-caption-highlighted-background);
+	}
+
+	100% {
+		background-color: var(--ck-color-table-caption-background);
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/theme/tablecellproperties.css

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-cell-properties-form {
+	& .ck-form__row {
+		&.ck-table-cell-properties-form__alignment-row {
+			flex-wrap: wrap;
+
+			& .ck.ck-toolbar {
+				&:first-of-type {
+					/* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
+					flex-grow: 0.57;
+				}
+
+				&:last-of-type {
+					/* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
+					flex-grow: 0.43;
+				}
+
+				& .ck-button {
+					flex-grow: 1;
+				}
+			}
+		}
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/theme/tableediting.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/src/assets/qms-ckeditor-plugin/src/plugins/table/theme/tableform.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-form {
+	& .ck-form__row {
+		&.ck-table-form__border-row {
+			flex-wrap: wrap;
+		}
+
+		&.ck-table-form__background-row {
+			flex-wrap: wrap;
+		}
+
+		&.ck-table-form__dimensions-row {
+			flex-wrap: wrap;
+			align-items: center;
+
+			& .ck-labeled-field-view {
+				display: flex;
+				flex-direction: column-reverse;
+				align-items: center;
+
+				& .ck.ck-dropdown {
+					flex-grow: 0;
+				}
+			}
+
+			& .ck-table-form__dimension-operator {
+				flex-grow: 0;
+			}
+		}
+	}
+
+	& .ck.ck-labeled-field-view {
+		/* Allow absolute positioning of the status (error) balloons. */
+		position: relative;
+
+		& .ck.ck-labeled-field-view__status {
+			position: absolute;
+			left: 50%;
+			bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) );
+			transform: translate(-50%,100%);
+
+			/* Make sure the balloon status stays on top of other form elements. */
+			z-index: 1;
+
+			/* The arrow pointing towards the field. */
+			&::after {
+				content: "";
+				position: absolute;
+				top: calc( -1 * var(--ck-table-properties-error-arrow-size) );
+				left: 50%;
+				transform: translateX( -50% );
+			}
+		}
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/theme/tableproperties.css

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-properties-form {
+	& .ck-form__row {
+		&.ck-table-properties-form__alignment-row {
+			flex-wrap: wrap;
+			flex-basis: 0;
+			align-content: baseline;
+
+			& .ck.ck-toolbar .ck-toolbar__items {
+				flex-wrap: nowrap;
+			}
+		}
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/theme/tableselection.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/src/assets/qms-ckeditor-plugin/src/plugins/table/ui/colorinputview.js

@@ -0,0 +1,343 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/ui/colorinputview
+ */
+
+import { View, InputTextView, ButtonView, createDropdown, ColorGridView } from 'ckeditor5/src/ui';
+import { icons } from 'ckeditor5/src/core';
+
+import '../theme/colorinput.css';
+
+/**
+ * The color input view class. It allows the user to type in a color (hex, rgb, etc.)
+ * or choose it from the configurable color palette with a preview.
+ *
+ * @private
+ * @extends module:ui/view~View
+ */
+export default class ColorInputView extends View {
+	/**
+	 * Creates an instance of the color input view.
+	 *
+	 * @param {module:utils/locale~Locale} locale The locale instance.
+	 * @param {Object} options The input options.
+	 * @param {module:ui/colorgrid/colorgrid~ColorDefinition} options.colorDefinitions The colors to be displayed
+	 * in the palette inside the input's dropdown.
+	 * @param {Number} options.columns The number of columns in which the colors will be displayed.
+	 */
+	constructor( locale, options ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * The value of the input.
+		 *
+		 * @observable
+		 * @member {String} #value
+		 * @default ''
+		 */
+		this.set( 'value', '' );
+
+		/**
+		 * The `id` attribute of the input (i.e. to pair with the `<label>` element).
+		 *
+		 * @observable
+		 * @member {String} #id
+		 */
+		this.set( 'id' );
+
+		/**
+		 * Controls whether the input view is in read-only mode.
+		 *
+		 * @observable
+		 * @member {Boolean} #isReadOnly
+		 * @default false
+		 */
+		this.set( 'isReadOnly', false );
+
+		/**
+		 * Set to `true` when the field has some error. Usually controlled via
+		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+		 *
+		 * @observable
+		 * @member {Boolean} #hasError
+		 * @default false
+		 */
+		this.set( 'hasError', false );
+
+		/**
+		 * An observable flag set to `true` when the input is focused by the user.
+		 * `false` otherwise.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isFocused
+		 * @default false
+		 */
+		this.set( 'isFocused', false );
+
+		/**
+		 * An observable flag set to `true` when the input contains no text.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isEmpty
+		 * @default true
+		 */
+		this.set( 'isEmpty', true );
+
+		/**
+		 * The `id` of the element describing this field. When the field has
+		 * some error, it helps screen readers read the error text.
+		 *
+		 * @observable
+		 * @member {Boolean} #ariaDescribedById
+		 */
+		this.set( 'ariaDescribedById' );
+
+		/**
+		 * A cached reference to the options passed to the constructor.
+		 *
+		 * @member {Object}
+		 */
+		this.options = options;
+
+		/**
+		 * An instance of the dropdown allowing to select a color from a grid.
+		 *
+		 * @protected
+		 * @member {module:ui/dropdown/dropdown~DropdownView}
+		 */
+		this._dropdownView = this._createDropdownView( locale );
+
+		/**
+		 * An instance of the input allowing the user to type a color value.
+		 *
+		 * @protected
+		 * @member {module:ui/inputtext/inputtextview~InputTextView}
+		 */
+		this._inputView = this._createInputTextView( locale );
+
+		/**
+		 * The flag that indicates whether the user is still typing.
+		 * If set to true, it means that the text input field ({@link #_inputView}) still has the focus.
+		 * So, we should interrupt the user by replacing the input's value.
+		 *
+		 * @protected
+		 * @member {Boolean}
+		 */
+		this._stillTyping = false;
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-input-color',
+					bind.if( 'hasError', 'ck-error' )
+				],
+				id: bind.to( 'id' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDescribedById' )
+			},
+			children: [
+				this._dropdownView,
+				this._inputView
+			]
+		} );
+
+		this.on( 'change:value', ( evt, name, inputValue ) => this._setInputValue( inputValue ) );
+	}
+
+	/**
+	 * Focuses the input.
+	 */
+	focus() {
+		this._inputView.focus();
+	}
+
+	/**
+	 * Creates and configures the {@link #_dropdownView}.
+	 *
+	 * @private
+	 */
+	_createDropdownView() {
+		const locale = this.locale;
+		const t = locale.t;
+		const bind = this.bindTemplate;
+		const colorGrid = this._createColorGrid( locale );
+		const dropdown = createDropdown( locale );
+		const colorPreview = new View();
+		const removeColorButton = this._createRemoveColorButton( locale );
+
+		colorPreview.setTemplate( {
+			tag: 'span',
+			attributes: {
+				class: [
+					'ck',
+					'ck-input-color__button__preview'
+				],
+				style: {
+					backgroundColor: bind.to( 'value' )
+				}
+			},
+			children: [ {
+				tag: 'span',
+				attributes: {
+					class: [
+						'ck',
+						'ck-input-color__button__preview__no-color-indicator',
+						bind.if( 'value', 'ck-hidden', value => value != '' )
+					]
+				}
+			} ]
+		} );
+
+		dropdown.buttonView.extendTemplate( {
+			attributes: {
+				class: 'ck-input-color__button'
+			}
+		} );
+
+		dropdown.buttonView.children.add( colorPreview );
+		dropdown.buttonView.tooltip = t( 'Color picker' );
+
+		dropdown.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
+		dropdown.panelView.children.add( removeColorButton );
+		dropdown.panelView.children.add( colorGrid );
+		dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );
+
+		return dropdown;
+	}
+
+	/**
+	 * Creates and configures an instance of {@link module:ui/inputtext/inputtextview~InputTextView}.
+	 *
+	 * @private
+	 * @returns {module:ui/inputtext/inputtextview~InputTextView} A configured instance to be set as {@link #_inputView}.
+	 */
+	_createInputTextView() {
+		const locale = this.locale;
+		const inputView = new InputTextView( locale );
+
+		inputView.extendTemplate( {
+			on: {
+				blur: inputView.bindTemplate.to( 'blur' )
+			}
+		} );
+
+		inputView.value = this.value;
+		inputView.bind( 'isReadOnly', 'hasError' ).to( this );
+		this.bind( 'isFocused', 'isEmpty' ).to( inputView );
+
+		inputView.on( 'input', () => {
+			const inputValue = inputView.element.value;
+			// Check if the value matches one of our defined colors' label.
+			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.label );
+
+			this._stillTyping = true;
+			this.value = mappedColor && mappedColor.color || inputValue;
+		} );
+
+		inputView.on( 'blur', () => {
+			this._stillTyping = false;
+			this._setInputValue( inputView.element.value );
+		} );
+
+		inputView.delegate( 'input' ).to( this );
+
+		return inputView;
+	}
+
+	/**
+	 * Creates and configures the button that clears the color.
+	 *
+	 * @private
+	 */
+	_createRemoveColorButton() {
+		const locale = this.locale;
+		const t = locale.t;
+		const removeColorButton = new ButtonView( locale );
+
+		removeColorButton.class = 'ck-input-color__remove-color';
+		removeColorButton.withText = true;
+		removeColorButton.icon = icons.eraser;
+		removeColorButton.label = t( 'Remove color' );
+		removeColorButton.on( 'execute', () => {
+			this.value = '';
+			this._dropdownView.isOpen = false;
+			this.fire( 'input' );
+		} );
+
+		return removeColorButton;
+	}
+
+	/**
+	 * Creates and configures the color grid inside the {@link #_dropdownView}.
+	 *
+	 * @private
+	 */
+	_createColorGrid( locale ) {
+		const colorGrid = new ColorGridView( locale, {
+			colorDefinitions: this.options.colorDefinitions,
+			columns: this.options.columns
+		} );
+
+		colorGrid.on( 'execute', ( evtData, data ) => {
+			this.value = data.value;
+			this._dropdownView.isOpen = false;
+			this.fire( 'input' );
+		} );
+		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
+
+		return colorGrid;
+	}
+
+	/**
+	 * Sets {@link #_inputView}'s value property to the color value or color label,
+	 * if there is one and the user is not typing.
+	 *
+	 * Handles cases like:
+	 *
+	 * * Someone picks the color in the grid.
+	 * * The color is set from the plugin level.
+	 *
+	 * @private
+	 * @param {String} inputValue Color value to be set.
+	 */
+	_setInputValue( inputValue ) {
+		if ( !this._stillTyping ) {
+			const normalizedInputValue = normalizeColor( inputValue );
+			// Check if the value matches one of our defined colors.
+			const mappedColor = this.options.colorDefinitions.find( def => normalizedInputValue === normalizeColor( def.color ) );
+
+			if ( mappedColor ) {
+				this._inputView.value = mappedColor.label;
+			} else {
+				this._inputView.value = inputValue || '';
+			}
+		}
+	}
+}
+
+// Normalizes color value, by stripping extensive whitespace.
+// For example., transforms:
+// * `   rgb(  25 50    0 )` to `rgb(25 50 0)`,
+// * "\t  rgb(  25 ,  50,0 )		" to `rgb(25 50 0)`.
+//
+// @param {String} colorString The value to be normalized.
+// @returns {String}
+function normalizeColor( colorString ) {
+	return colorString
+		// Remove any whitespace right after `(` or `,`.
+		.replace( /([(,])\s+/g, '$1' )
+		// Remove any whitespace at the beginning or right before the end, `)`, `,`, or another whitespace.
+		.replace( /^\s+|\s+(?=[),\s]|$)/g, '' )
+		// Then, replace `,` or whitespace with a single space.
+		.replace( /,|\s/g, ' ' );
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/ui/formrowview.js

@@ -0,0 +1,103 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/ui/formrowview
+ */
+
+import { View } from 'ckeditor5/src/ui';
+
+import '../theme/formrow.css';
+
+/**
+ * The class representing a single row in a complex form,
+ * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
+ *
+ * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
+ * it will become a component in ckeditor5-ui.
+ *
+ * @private
+ * @extends module:ui/view~View
+ */
+export default class FormRowView extends View {
+	/**
+	 * Creates an instance of the form row class.
+	 *
+	 * @param {module:utils/locale~Locale} locale The locale instance.
+	 * @param {Object} options
+	 * @param {Array.<module:ui/view~View>} options.children
+	 * @param {String} [options.class]
+	 * @param {module:ui/view~View} [options.labelView] When passed, the row gets the `group` and `aria-labelledby`
+	 * DOM attributes and gets described by the label.
+	 */
+	constructor( locale, options = {} ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * An additional CSS class added to the {@link #element}.
+		 *
+		 * @observable
+		 * @member {String} #class
+		 */
+		this.set( 'class', options.class || null );
+
+		/**
+		 * A collection of row items (buttons, dropdowns, etc.).
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		if ( options.children ) {
+			options.children.forEach( child => this.children.add( child ) );
+		}
+
+		/**
+		 * The role property reflected by the `role` DOM attribute of the {@link #element}.
+		 *
+		 * **Note**: Used only when a `labelView` is passed to constructor `options`.
+		 *
+		 * @private
+		 * @observable
+		 * @member {String} #role
+		 */
+		this.set( '_role', null );
+
+		/**
+		 * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
+		 *
+		 * **Note**: Used only when a `labelView` is passed to constructor `options`.
+		 *
+		 * @private
+		 * @observable
+		 * @member {String} #ariaLabelledBy
+		 */
+		this.set( '_ariaLabelledBy', null );
+
+		if ( options.labelView ) {
+			this.set( {
+				_role: 'group',
+				_ariaLabelledBy: options.labelView.id
+			} );
+		}
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-form__row',
+					bind.to( 'class' )
+				],
+				role: bind.to( '_role' ),
+				'aria-labelledby': bind.to( '_ariaLabelledBy' )
+			},
+			children: this.children
+		} );
+	}
+}