inviton-powerduck 0.0.146 → 0.0.148

package/components/import/import-mapper.tsx

@@ -1,231 +1,231 @@
-import type { DropdownOptionGroup } from '../dropdown';
-import { Component, Prop } from 'vue-facing-decorator';
-import TsxComponent from '../../app/vuetsx';
-import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
-import { latinize } from '../../common/utils/latinize-string';
-import BootstrapToggle from '../bootstrap-toggle';
-import DropdownList from '../dropdown';
-import HtmlLiteral from '../html-literal/html-literal';
-import TextBox, { TextBoxTextType } from '../input/textbox';
-import './css/import-mapper.css';
-
-export interface ImportMapperMapping {
-	columnIndex: number;
-	mappingValue: string;
-}
-
-interface ImportMapperArgs {
-	cssClass?: string;
-	subtitleHtml: string;
-	mappingOptions: DropdownOptionGroup[];
-	importData: Array<Array<string>>;
-	firstRowIsHeaderLabel?: string;
-	defaultMapping?: ImportMapperMapping[];
-}
-
-@Component
-export default class ImportMapper extends TsxComponent<ImportMapperArgs> implements ImportMapperArgs {
-	@Prop() cssClass!: string;
-	@Prop() subtitleHtml!: string;
-	@Prop() mappingOptions!: DropdownOptionGroup[];
-	@Prop() importData!: Array<Array<string>>;
-	@Prop() defaultMapping!: ImportMapperMapping[];
-	@Prop() firstRowIsHeaderLabel!: string;
-	private selectionMap: any = {};
-	private firstRowHeader: boolean = false;
-	private wasMatched = [];
-
-	public getData(): any[] {
-		const retVal = [];
-
-		this.importData.forEach((row, i) => {
-			if (!this.firstRowHeader || i > 0) {
-				const newItem = {};
-				for (const key in this.selectionMap) {
-					const keyInt = Number(key);
-					let objVal = row[keyInt];
-
-					if (objVal != null) {
-						if (typeof objVal === 'string') {
-							objVal = objVal.trim();
-						}
-					}
-
-					newItem[this.selectionMap[key]] = objVal;
-				}
-
-				retVal.push(newItem);
-			}
-		});
-
-		return retVal;
-	}
-
-	private getDisplayValue(obj: any): string {
-		if (obj == null) {
-			return null;
-		} else if (obj._dte) {
-			return obj.toDisplayString(true);
-		}
-
-		return obj;
-	}
-
-	private getLargestRow(): string[] {
-		if (isNullOrEmpty(this.importData)) {
-			return [];
-		}
-
-		let biggestLength = 0;
-		this.importData.forEach((rowArr) => {
-			if (rowArr != null && rowArr.length > biggestLength) {
-				biggestLength = rowArr.length;
-			}
-		});
-
-		const retVal = [];
-		while (true) {
-			if (retVal.length < biggestLength) {
-				retVal.push('x');
-			} else {
-				break;
-			}
-		}
-
-		return retVal;
-	}
-
-	private getDropdownSelectedItem(index: number) {
-		const selection = this.selectionMap[index];
-
-		if (selection == null) {
-			const match = this.getHeaderItem(index);
-
-			if (!isNullOrEmpty(match) && !this.wasMatched.includes(index)) {
-				this.wasMatched.push(index);
-				this.setDropdownSelectedItem(index, match.id);
-				return match.id;
-			} else {
-				return null;
-			}
-		}
-
-		if (selection.includes('ncf:')) {
-			return 'custom';
-		}
-
-		return this.selectionMap[index];
-	}
-
-	private setDropdownSelectedItem(index: number, value: any) {
-		if (value == null || value.id == null) {
-			if (typeof value === 'string') {
-				// this.$set(this.selectionMap, index.toString(), value);
-				this.selectionMap[index.toString()] = value;
-			} else {
-				// this.$set(this.selectionMap, index.toString(), null);
-				this.selectionMap[index.toString()] = null;
-			}
-		} else {
-			// this.$set(this.selectionMap, index.toString(), value.id);
-			this.selectionMap[index.toString()] = value.id;
-		}
-	}
-
-	private getPreviewRows(): Array<string[]> {
-		if (isNullOrEmpty(this.importData)) {
-			return [];
-		}
-
-		let start = 0;
-		let end = 10;
-		if (this.firstRowHeader) {
-			start += 1;
-			end += 1;
-		}
-
-		return this.importData.filter((u, i) => i >= start && i < end);
-	}
-
-	private getHeaderItem(index: number) {
-		const opts = [];
-
-		this.mappingOptions.forEach((mapOpts) => {
-			mapOpts.children.forEach((s) => {
-				opts.push(s);
-			});
-		});
-
-		if (this.importData[0][index] != null) {
-			const indexItem = this.importData[0][index].toString();
-			const headers = opts.filter(p => latinize(p.text).toLowerCase() == latinize(indexItem).toLowerCase() || latinize(p.id).toLowerCase() == latinize(indexItem).toLowerCase());
-			if (headers != null && headers.length == 1) {
-				return headers[0];
-			}
-		} else {
-			return null;
-		}
-	}
-
-	private prefillNewCustomFieldName(index: number) {
-		let retVal = '';
-		if (this.selectionMap[index].includes('ncf:')) {
-			retVal = this.selectionMap[index].substring(4);
-		} else {
-			retVal = this.importData[0][index];
-		}
-
-		this.setDropdownSelectedItem(index, `ncf:${retVal}`);
-		return retVal;
-	}
-
-	private render(h) {
-		const largestRow = this.getLargestRow();
-
-		return (
-			<div class="import-mapper-root">
-				<p class="import-mapper-subtitle">
-					<HtmlLiteral innerHTML={this.subtitleHtml} />
-				</p>
-
-				{this.importData
-				&& (
-					<div class="import-mapper-table-wrap">
-						<table class="import-mapper-table">
-							<thead>
-								<tr>
-									{largestRow.map((col, i) => {
-										return (
-											<td>
-												<DropdownList wrap={false} label={null} placeholder="Select value" options={this.mappingOptions} selected={this.getDropdownSelectedItem(i)} changed={(v) => { this.setDropdownSelectedItem(i, v); }} />
-
-												{this.selectionMap[i] != null && (this.selectionMap[i] == 'custom' || this.selectionMap[i].includes('ncf:'))
-												&& <TextBox wrap={false} label="" cssClass="hidden" value={this.prefillNewCustomFieldName(i)} changed={(v) => { this.setDropdownSelectedItem(i, `ncf:${v}`); }} textType={TextBoxTextType.Text} />}
-											</td>
-										);
-									})}
-								</tr>
-							</thead>
-							<tbody>
-								{this.getPreviewRows().map(row => (
-									<tr>
-										{largestRow.map((col, i) => (
-											<td>
-												{this.getDisplayValue(row[i])}
-											</td>
-										))}
-									</tr>
-								))}
-							</tbody>
-						</table>
-					</div>
-				)}
-
-				<div class="import-mapper-settings">
-					{this.$slots.default}
-					<BootstrapToggle label={this.firstRowIsHeaderLabel ? this.firstRowIsHeaderLabel : 'First row is header'} value={this.firstRowHeader} changed={(e) => { this.firstRowHeader = e; }} />
-				</div>
-			</div>
-		);
-	}
-}
+import type { DropdownOptionGroup } from '../dropdown';
+import { Component, Prop } from 'vue-facing-decorator';
+import TsxComponent from '../../app/vuetsx';
+import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
+import { latinize } from '../../common/utils/latinize-string';
+import BootstrapToggle from '../bootstrap-toggle';
+import DropdownList from '../dropdown';
+import HtmlLiteral from '../html-literal/html-literal';
+import TextBox, { TextBoxTextType } from '../input/textbox';
+import './css/import-mapper.css';
+
+export interface ImportMapperMapping {
+	columnIndex: number;
+	mappingValue: string;
+}
+
+interface ImportMapperArgs {
+	cssClass?: string;
+	subtitleHtml: string;
+	mappingOptions: DropdownOptionGroup[];
+	importData: Array<Array<string>>;
+	firstRowIsHeaderLabel?: string;
+	defaultMapping?: ImportMapperMapping[];
+}
+
+@Component
+export default class ImportMapper extends TsxComponent<ImportMapperArgs> implements ImportMapperArgs {
+	@Prop() cssClass!: string;
+	@Prop() subtitleHtml!: string;
+	@Prop() mappingOptions!: DropdownOptionGroup[];
+	@Prop() importData!: Array<Array<string>>;
+	@Prop() defaultMapping!: ImportMapperMapping[];
+	@Prop() firstRowIsHeaderLabel!: string;
+	private selectionMap: any = {};
+	private firstRowHeader: boolean = false;
+	private wasMatched = [];
+
+	public getData(): any[] {
+		const retVal = [];
+
+		this.importData.forEach((row, i) => {
+			if (!this.firstRowHeader || i > 0) {
+				const newItem = {};
+				for (const key in this.selectionMap) {
+					const keyInt = Number(key);
+					let objVal = row[keyInt];
+
+					if (objVal != null) {
+						if (typeof objVal === 'string') {
+							objVal = objVal.trim();
+						}
+					}
+
+					newItem[this.selectionMap[key]] = objVal;
+				}
+
+				retVal.push(newItem);
+			}
+		});
+
+		return retVal;
+	}
+
+	private getDisplayValue(obj: any): string {
+		if (obj == null) {
+			return null;
+		} else if (obj._dte) {
+			return obj.toDisplayString(true);
+		}
+
+		return obj;
+	}
+
+	private getLargestRow(): string[] {
+		if (isNullOrEmpty(this.importData)) {
+			return [];
+		}
+
+		let biggestLength = 0;
+		this.importData.forEach((rowArr) => {
+			if (rowArr != null && rowArr.length > biggestLength) {
+				biggestLength = rowArr.length;
+			}
+		});
+
+		const retVal = [];
+		while (true) {
+			if (retVal.length < biggestLength) {
+				retVal.push('x');
+			} else {
+				break;
+			}
+		}
+
+		return retVal;
+	}
+
+	private getDropdownSelectedItem(index: number) {
+		const selection = this.selectionMap[index];
+
+		if (selection == null) {
+			const match = this.getHeaderItem(index);
+
+			if (!isNullOrEmpty(match) && !this.wasMatched.includes(index)) {
+				this.wasMatched.push(index);
+				this.setDropdownSelectedItem(index, match.id);
+				return match.id;
+			} else {
+				return null;
+			}
+		}
+
+		if (selection.includes('ncf:')) {
+			return 'custom';
+		}
+
+		return this.selectionMap[index];
+	}
+
+	private setDropdownSelectedItem(index: number, value: any) {
+		if (value == null || value.id == null) {
+			if (typeof value === 'string') {
+				// this.$set(this.selectionMap, index.toString(), value);
+				this.selectionMap[index.toString()] = value;
+			} else {
+				// this.$set(this.selectionMap, index.toString(), null);
+				this.selectionMap[index.toString()] = null;
+			}
+		} else {
+			// this.$set(this.selectionMap, index.toString(), value.id);
+			this.selectionMap[index.toString()] = value.id;
+		}
+	}
+
+	private getPreviewRows(): Array<string[]> {
+		if (isNullOrEmpty(this.importData)) {
+			return [];
+		}
+
+		let start = 0;
+		let end = 10;
+		if (this.firstRowHeader) {
+			start += 1;
+			end += 1;
+		}
+
+		return this.importData.filter((u, i) => i >= start && i < end);
+	}
+
+	private getHeaderItem(index: number) {
+		const opts = [];
+
+		this.mappingOptions.forEach((mapOpts) => {
+			mapOpts.children.forEach((s) => {
+				opts.push(s);
+			});
+		});
+
+		if (this.importData[0][index] != null) {
+			const indexItem = this.importData[0][index].toString();
+			const headers = opts.filter(p => latinize(p.text).toLowerCase() == latinize(indexItem).toLowerCase() || latinize(p.id).toLowerCase() == latinize(indexItem).toLowerCase());
+			if (headers != null && headers.length == 1) {
+				return headers[0];
+			}
+		} else {
+			return null;
+		}
+	}
+
+	private prefillNewCustomFieldName(index: number) {
+		let retVal = '';
+		if (this.selectionMap[index].includes('ncf:')) {
+			retVal = this.selectionMap[index].substring(4);
+		} else {
+			retVal = this.importData[0][index];
+		}
+
+		this.setDropdownSelectedItem(index, `ncf:${retVal}`);
+		return retVal;
+	}
+
+	private render(h) {
+		const largestRow = this.getLargestRow();
+
+		return (
+			<div class="import-mapper-root">
+				<p class="import-mapper-subtitle">
+					<HtmlLiteral innerHTML={this.subtitleHtml} />
+				</p>
+
+				{this.importData
+				&& (
+					<div class="import-mapper-table-wrap">
+						<table class="import-mapper-table">
+							<thead>
+								<tr>
+									{largestRow.map((col, i) => {
+										return (
+											<td>
+												<DropdownList wrap={false} label={null} placeholder="Select value" options={this.mappingOptions} selected={this.getDropdownSelectedItem(i)} changed={(v) => { this.setDropdownSelectedItem(i, v); }} />
+
+												{this.selectionMap[i] != null && (this.selectionMap[i] == 'custom' || this.selectionMap[i].includes('ncf:'))
+												&& <TextBox wrap={false} label="" cssClass="hidden" value={this.prefillNewCustomFieldName(i)} changed={(v) => { this.setDropdownSelectedItem(i, `ncf:${v}`); }} textType={TextBoxTextType.Text} />}
+											</td>
+										);
+									})}
+								</tr>
+							</thead>
+							<tbody>
+								{this.getPreviewRows().map(row => (
+									<tr>
+										{largestRow.map((col, i) => (
+											<td>
+												{this.getDisplayValue(row[i])}
+											</td>
+										))}
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				)}
+
+				<div class="import-mapper-settings">
+					{this.$slots.default}
+					<BootstrapToggle label={this.firstRowIsHeaderLabel ? this.firstRowIsHeaderLabel : 'First row is header'} value={this.firstRowHeader} changed={(e) => { this.firstRowHeader = e; }} />
+				</div>
+			</div>
+		);
+	}
+}

package/components/input/checkbox.tsx

@@ -5,6 +5,7 @@ import TsxComponent, { Component } from '../../app/vuetsx';
 import { PortalUtils } from '../../common/utils/utils';
 import FormItemWrapper from '../form/form-item-wrapper';
 import HtmlLiteral from '../html-literal/html-literal';
+import './css/checkbox.css';
 
 interface CheckBoxArgs extends FormItemWrapperArgs {
 	value: boolean;
@@ -93,9 +94,8 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 	}
 
 	renderCheckboxNowUi(h) {
-		const checkboxClass = `form-check ${
-			this.wrap ? 'ui-checkbox-wrapped' : 'ui-checkbox-nonwrapped'
-		}${this.size === CheckBoxSize.Small ? ' ui-checkbox-sm' : ''}`;
+		const checkboxClass = `form-check ${this.wrap ? 'ui-checkbox-wrapped' : 'ui-checkbox-nonwrapped'
+			}${this.size === CheckBoxSize.Small ? ' ui-checkbox-sm' : ''}`;
 
 		return (
 			<div class={checkboxClass}>
@@ -113,8 +113,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 			this.uuid = PortalUtils.randomString(12);
 		}
 
-		const checkboxClass = `inv-md-checkbox${
-			this.size === CheckBoxSize.Small ? ' inv-md-checkbox-sm' : ''}`;
+		const checkboxClass = `inv-md-checkbox${this.size === CheckBoxSize.Small ? ' inv-md-checkbox-sm' : ''}`;
 
 		return (
 			<div class={checkboxClass}>
@@ -133,9 +132,8 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 			this.uuid = PortalUtils.randomString(12);
 		}
 
-		const checkboxClass = `inv-md-checkbox${
-			this.size === CheckBoxSize.Small ? ' inv-md-checkbox-sm' : ''
-		}${this.skin === CheckBoxSkin.MinusVariant ? ' inv-md-checkbox-minus' : ''}`;
+		const checkboxClass = `inv-md-checkbox${this.size === CheckBoxSize.Small ? ' inv-md-checkbox-sm' : ''
+			}${this.skin === CheckBoxSkin.MinusVariant ? ' inv-md-checkbox-minus' : ''}`;
 
 		return (
 			<div class={checkboxClass}>

package/components/input/css/checkbox.css

@@ -0,0 +1,109 @@
+.inv-md-checkbox input[type='checkbox'] {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute !important;
+    width: 1px;
+}
+
+.inv-md-checkbox input[type='checkbox']:active+label:before {
+    transition-duration: 0s;
+}
+
+.inv-md-checkbox input[type='checkbox']+label {
+    position: relative !important;
+    padding-left: 30px;
+    vertical-align: top;
+    user-select: none;
+    cursor: pointer;
+}
+
+.inv-md-checkbox input[type='checkbox']+label:before {
+    box-sizing: content-box;
+    content: '';
+    color: #4f8196;
+    position: absolute !important;
+    top: 11px;
+    left: 0;
+    width: 14px;
+    height: 14px;
+    margin-top: -9px;
+    border: 2px solid #4f8196;
+    text-align: center;
+    transition: all 0.4s ease;
+    border-radius: 2px;
+}
+
+.inv-md-checkbox input[type='checkbox']+label:after {
+    box-sizing: content-box;
+    content: '';
+    background-color: #4f8196;
+    position: absolute !important;
+    top: 50%;
+    left: 4px;
+    width: 10px;
+    height: 10px;
+    margin-top: -5px;
+    transform: scale(0);
+    transform-origin: 50%;
+    transition: transform 200ms ease-out;
+}
+
+.inv-md-checkbox input[type='checkbox']:disabled+label:before {
+    border-color: #cccccc;
+}
+
+.inv-md-checkbox input[type='checkbox']:disabled:focus+label:before,
+.inv-md-checkbox input[type='checkbox']:disabled:hover+label:before {
+    background-color: inherit;
+}
+
+.inv-md-checkbox input[type='checkbox']:disabled:checked+label:before {
+    background-color: #cccccc;
+}
+
+.inv-md-checkbox input[type='checkbox']+label:after {
+    background-color: transparent;
+    top: 12px;
+    left: 4px;
+    width: 8px;
+    height: 3px;
+    margin-top: -4px;
+    border-style: solid;
+    border-color: #ffffff;
+    border-width: 0 0 3px 3px;
+    border-image: none;
+    transform: rotate(-45deg) scale(0);
+}
+
+.inv-md-checkbox input[type='checkbox']:checked+label:after {
+    content: '';
+    transform: rotate(-45deg) scale(1);
+    transition: transform 200ms ease-out;
+}
+
+.inv-md-checkbox input[type='checkbox']:checked+label:before {
+    animation: invMdBorderscale 200ms ease-in;
+    background: #4f8196;
+}
+
+.inv-md-checkbox input[type='checkbox']:checked+label:after {
+    transform: rotate(-45deg) scale(1);
+}
+
+@keyframes invMdBorderscale {
+    50% {
+        box-shadow: 0 0 0 2px #4f8196;
+    }
+}
+
+.form-check.ui-checkbox-nonwrapped {
+    padding-left: 0;
+}
+
+.form-check.ui-checkbox-nonwrapped label {
+    width: 100%;
+}