ngx-sp-infra 0.0.0

package/projects/ngx-sp-infra/src/lib/widgets/click-outside/clickoutside.directive.ts

@@ -0,0 +1,183 @@
+import {
+	Directive,
+	ElementRef,
+	EventEmitter,
+	Inject,
+	Input,
+	NgZone,
+	OnChanges,
+	OnDestroy,
+	OnInit,
+	Output,
+	SimpleChanges,
+    } from '@angular/core';
+    import {DOCUMENT} from '@angular/common';
+    
+    @Directive({selector: '[clickOutside]'})
+    export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
+    
+	@Input() clickOutsideEnabled = true;
+    
+	@Input() attachOutsideOnClick = false;
+	@Input() delayClickOutsideInit = false;
+	@Input() emitOnBlur = false;
+    
+	@Input() exclude = '';
+	@Input() excludeBeforeClick = false;
+    
+	@Input() clickOutsideEvents = '';
+    
+	@Output() clickOutside: EventEmitter<Event> = new EventEmitter<Event>();
+    
+	private _nodesExcluded: Array<HTMLElement> = [];
+	private _events: Array<string> = ['click'];
+    
+	constructor(
+	  private _el: ElementRef,
+	  private _ngZone: NgZone,
+	  @Inject(DOCUMENT) private document: Document) {
+	  this._initOnClickBody = this._initOnClickBody.bind(this);
+	  this._onClickBody = this._onClickBody.bind(this);
+	  this._onWindowBlur = this._onWindowBlur.bind(this);
+	}
+    
+	ngOnInit() {
+	  this._init();
+	}
+    
+	ngOnDestroy() {
+	  this._removeClickOutsideListener();
+	  this._removeAttachOutsideOnClickListener();
+	  this._removeWindowBlurListener();
+	}
+    
+	ngOnChanges(changes: SimpleChanges) {
+	  if (changes['attachOutsideOnClick'] || changes['exclude'] || changes['emitOnBlur']) {
+	    this._init();
+	  }
+	}
+    
+	private _init() {
+	  if (this.clickOutsideEvents !== '') {
+	    this._events = this.clickOutsideEvents.split(',').map(e => e.trim());
+	  }
+    
+	  this._excludeCheck();
+    
+	  if (this.attachOutsideOnClick) {
+	    this._initAttachOutsideOnClickListener();
+	  } else {
+	    this._initOnClickBody();
+	  }
+    
+	  if (this.emitOnBlur) {
+	    this._initWindowBlurListener();
+	  }
+	}
+    
+	private _initOnClickBody() {
+	  if (this.delayClickOutsideInit) {
+	    setTimeout(this._initClickOutsideListener.bind(this));
+	  } else {
+	    this._initClickOutsideListener();
+	  }
+	}
+    
+	private _excludeCheck() {
+	  if (this.exclude) {
+	    try {
+		const nodes = Array.from(this.document.querySelectorAll(this.exclude)) as Array<HTMLElement>;
+		if (nodes) {
+		  this._nodesExcluded = nodes;
+		}
+	    } catch (err) {
+		console.error('[ng-click-outside] Check your exclude selector syntax.', err);
+	    }
+	  }
+	}
+    
+	private _onClickBody(ev: Event) {
+	  if (!this.clickOutsideEnabled) {
+	    return;
+	  }
+    
+	  if (this.excludeBeforeClick) {
+	    this._excludeCheck();
+	  }
+    
+	  if (!this._el.nativeElement.contains(ev.target) && !this._shouldExclude(ev.target)) {
+	    this._emit(ev);
+    
+	    if (this.attachOutsideOnClick) {
+		this._removeClickOutsideListener();
+	    }
+	  }
+	}
+    
+	/**
+	 * Resolves problem with outside click on iframe
+	 * @see https://github.com/arkon/ng-click-outside/issues/32
+	 */
+	private _onWindowBlur(ev: Event) {
+	  setTimeout(() => {
+	    if (!this.document.hidden) {
+		this._emit(ev);
+	    }
+	  });
+	}
+    
+	private _emit(ev: Event) {
+	  if (!this.clickOutsideEnabled) {
+	    return;
+	  }
+    
+	  this._ngZone.run(() => this.clickOutside.emit(ev));
+	}
+    
+	private _shouldExclude(target: any): boolean {
+	  for (let excludedNode of this._nodesExcluded) {
+	    if (excludedNode.contains(target)) {
+		return true;
+	    }
+	  }
+    
+	  return false;
+	}
+    
+	private _initClickOutsideListener() {
+	  this._ngZone.runOutsideAngular(() => {
+	    this._events.forEach(e => this.document.addEventListener(e, this._onClickBody));
+	  });
+	}
+    
+	private _removeClickOutsideListener() {
+	  this._ngZone.runOutsideAngular(() => {
+	    this._events.forEach(e => this.document.removeEventListener(e, this._onClickBody));
+	  });
+	}
+    
+	private _initAttachOutsideOnClickListener() {
+	  this._ngZone.runOutsideAngular(() => {
+	    this._events.forEach(e => this._el.nativeElement.addEventListener(e, this._initOnClickBody));
+	  });
+	}
+    
+	private _removeAttachOutsideOnClickListener() {
+	  this._ngZone.runOutsideAngular(() => {
+	    this._events.forEach(e => this._el.nativeElement.removeEventListener(e, this._initOnClickBody));
+	  });
+	}
+    
+	private _initWindowBlurListener() {
+	  this._ngZone.runOutsideAngular(() => {
+	    window.addEventListener('blur', this._onWindowBlur);
+	  });
+	}
+    
+	private _removeWindowBlurListener() {
+	  this._ngZone.runOutsideAngular(() => {
+	    window.removeEventListener('blur', this._onWindowBlur);
+	  });
+	}
+    
+    }

package/projects/ngx-sp-infra/src/lib/widgets/combobox/combobox.component.html

@@ -0,0 +1,40 @@
+<div class="ngx-dropdown-container" tabindex="0">
+  <button type="button" tabindex="-1" class="ngx-dropdown-button" [ngClass]="{ 'ngx-disabled': disabled }"
+    [disabled]="disabled" (click)="toggleSelectDropdown()">
+    <span class="display-text">{{ selectedDisplayText }} </span>
+    <span class="nsdicon-angle-down"></span>
+  </button>
+  <div class="ngx-dropdown-list-container scroll-y" *ngIf="toggleDropdown" [style.maxHeight]="config.height">
+    <div class="search-container d-flex justify-content-between" *ngIf="config.search">
+      <input (change)="changeSearchText($event)" [style.direction]="config.inputDirection" name="search-text"
+        (input)="searchTextChanged()" [(ngModel)]="searchText" tabindex="-1" autocomplete="off" />
+      <label [ngClass]="{ active: searchText }">
+        <span class="nsdicon-search"></span>
+        {{ config.searchPlaceholder }}</label>
+    </div>
+    <ul class="selected-items">
+      <li class="d-flex flex-row" tabindex="-1" *ngFor="let selected of selectedItems; let i = index"
+        (click)="deselectItem(selected, i)">
+        <input type="checkbox" class="form-check nsdicon-close me-2" checked="true">
+        <div style="margin-top: 2px;">{{
+          config.displayFn
+          ? config.displayFn(selected)
+          : selected[config.displayKey] || selected
+          }}</div>
+      </li>
+    </ul>
+    <hr *ngIf="selectedItems.length > 0 && availableItems.length > 0" />
+    <ul class="available-items">
+      <li class="d-flex flex-row" #availableOption *ngFor="let item of availableItems | filterBy: searchText: config.searchOnKey
+			| limitTo: config.limitTo; let i = index" tabindex="-1"
+        [ngClass]="{ active: focusedItemIndex == i && !item.disabled, disabled: item.disabled }"
+        (click)="selectItem(item, i)">
+        <input type="checkbox" class="form-check nsdicon-close me-2">
+        <div style="margin-top: 2px;">
+          {{ config.displayFn ? config.displayFn(item) : item[config.displayKey] || item }}
+        </div>
+      </li>
+      <li *ngIf="showNotFound">{{ config.noResultsFound }}</li>
+    </ul>
+  </div>
+</div>

package/projects/ngx-sp-infra/src/lib/widgets/combobox/combobox.component.scss

@@ -0,0 +1,185 @@
+.ngx-dropdown-container {
+	width: 100%;
+	position: relative;
+
+	button {
+		display: inline-block;
+		margin-bottom: 0;
+		font-weight: 400;
+		line-height: 1.42857143;
+		vertical-align: middle;
+		touch-action: manipulation;
+		cursor: pointer;
+		user-select: none;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		color: #333;
+		background-color: #fff;
+		white-space: nowrap;
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+		text-align: left;
+
+		span {
+			display: inline;
+			vertical-align: middle;
+		}
+
+		.nsdicon-angle-down {
+			right: 5px;
+
+			&::before {
+				border-style: solid;
+				border-width: 0.1em 0.1em 0 0;
+				content: "";
+				display: inline-block;
+				height: 10px;
+				position: relative;
+				vertical-align: text-top;
+				width: 10px;
+				top: 0;
+				transform: rotate(135deg);
+			}
+
+			position: relative;
+			float: right;
+		}
+	}
+
+	.ngx-dropdown-button {
+		width: 100%;
+		min-height: 30px;
+		padding: 5px 10px 5px 10px;
+		background-color: white;
+
+		.display-text {
+			display: inline-block;
+			width: calc(100% - 20px);
+		}
+	}
+
+	.ngx-dropdown-list-container {
+		box-sizing: border-box;
+		border: 1px solid rgba(0, 0, 0, 0.15);
+		border-radius: 4px;
+		padding-left: 10px;
+		padding-right: 10px;
+		z-index: 999999999;
+		width: 100%;
+		background-clip: padding-box;
+		background: white;
+		position: absolute;
+		-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
+		-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
+		box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);
+		overflow-y: auto;
+
+		.search-container {
+			position: relative;
+			padding-top: 10px;
+			margin-top: 5px;
+
+			input {
+				background-color: transparent;
+				border: none;
+				border-bottom: 1px solid #9e9e9e;
+				border-radius: 0;
+				outline: none;
+				height: 2rem;
+				width: 100%;
+				font-size: 13px;
+				margin: 0;
+				padding: 0;
+				box-shadow: none;
+				box-sizing: content-box;
+				transition: all 0.3s;
+
+				&:focus {
+					border-bottom: 1px solid #007bff;
+				}
+
+				&:focus+label {
+					transform: translateY(-2px) scale(0.8);
+					transform-origin: 0 0;
+				}
+			}
+
+			label {
+				color: #9e9e9e;
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				font-size: 1rem;
+				cursor: text;
+				-webkit-transition: -webkit-transform 0.2s ease-out;
+				transition: -webkit-transform 0.2s ease-out;
+				transition: transform 0.2s ease-out;
+				transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
+				-webkit-transform-origin: 0% 100%;
+				transform-origin: 0% 100%;
+				text-align: initial;
+				transform: translateY(12px);
+				pointer-events: none;
+
+				&.active {
+					transform: translateY(-2px) scale(0.8);
+					transform-origin: 0 0;
+				}
+			}
+		}
+
+		ul {
+			margin-top: 1rem;
+			margin-bottom: 1rem;
+			list-style-type: none;
+			padding-left: 0px;
+
+			&.selected-items {
+				li {
+					/*  background-color: #337ab7; */
+					/*   color: white; */
+					margin-bottom: 2px;
+
+					.nsdicon-close {
+						accent-color: #007bff;
+						font-weight: bold;
+						font-size: large;
+					}
+				}
+			}
+
+			&.available-items {
+				li.active {
+
+					background-color: #337ab7;
+					color: #ffff;
+				}
+			}
+
+			li {
+				font-size: inherit;
+				cursor: pointer;
+				display: block;
+				/* padding: 3px 20px; */
+				clear: both;
+				font-weight: 400;
+				line-height: 1.42857143;
+				color: #333;
+				white-space: normal;
+			}
+		}
+	}
+
+	.ngx-disabled {
+		pointer-events: none;
+		background-color: #e9ecef;
+		opacity: 1;
+		cursor: no-drop;
+	}
+}
+
+.scroll-y
+{
+  max-width: 300px; overflow-y: scroll; overflow-x: hidden;
+}