@inaccess-fang/ui-components
Version:
The Inaccess UI Components Library for the Front-end projects
1,443 lines • 69.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/cdk/overlay'), require('@angular/cdk/scrolling'), require('@angular/forms'), require('tippy.js'), require('rxjs'), require('popper.js')) :
typeof define === 'function' && define.amd ? define('@inaccess-fang/ui-components', ['exports', '@angular/core', '@angular/common', '@angular/common/http', 'rxjs/operators', '@angular/cdk/overlay', '@angular/cdk/scrolling', '@angular/forms', 'tippy.js', 'rxjs', 'popper.js'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['inaccess-fang'] = global['inaccess-fang'] || {}, global['inaccess-fang']['ui-components'] = {}), global.ng.core, global.ng.common, global.ng.common.http, global.rxjs.operators, global.ng.cdk.overlay, global.ng.cdk.scrolling, global.ng.forms, global.tippy, global.rxjs, global.Popper));
}(this, (function (exports, core, common, http, operators, overlay, scrolling, forms, tippy, rxjs, Popper) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var tippy__default = /*#__PURE__*/_interopDefaultLegacy(tippy);
var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
// @angular/core
var FangTabComponent = /** @class */ (function () {
function FangTabComponent() {
this.active = false;
}
// Ovveride
FangTabComponent.prototype.ngOnInit = function () {
console.log('FangTabComponent [ngOnInit]');
};
return FangTabComponent;
}());
FangTabComponent.decorators = [
{ type: core.Component, args: [{
selector: 'fang-tab',
template: "<div [hidden]=\"!active\">\n\t<ng-content></ng-content>\n</div>\n",
encapsulation: core.ViewEncapsulation.ShadowDom,
changeDetection: core.ChangeDetectionStrategy.Default,
styles: [":host{display:block;height:inherit}"]
},] }
];
FangTabComponent.ctorParameters = function () { return []; };
FangTabComponent.propDecorators = {
title: [{ type: core.Input, args: ['tabTitle',] }]
};
// @angular/core
var FangMultiTabsComponent = /** @class */ (function () {
function FangMultiTabsComponent(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
this.selectedTabChanged = new core.EventEmitter();
}
// @Override
FangMultiTabsComponent.prototype.ngOnInit = function () {
console.log('FangMultiTabsComponent [ngOnInit]');
};
// @Override
FangMultiTabsComponent.prototype.ngAfterViewInit = function () {
var _this = this;
// Set initial active tab
if (this.tabs.length && !this.tabs.first.active) {
this.selectTab(this.tabs.first);
}
// Set selected Tab after each time child view changes on a single lifecycle
this._changesSubscription$ = this.tabs.changes
.pipe(operators.filter(function (change) { return change.first; }))
.subscribe(function () { return _this.selectTab(_this.tabs.first); });
};
// @Override
FangMultiTabsComponent.prototype.ngOnDestroy = function () {
this._changesSubscription$.unsubscribe();
};
FangMultiTabsComponent.prototype.selectTab = function (tab) {
console.log('FangMultiTabsComponent [selectTab]');
this.tabs.toArray().map(function (tab) { return tab.active = false; });
tab.active = true;
this.selectedTabChanged.emit();
this._changeDetectorRef.detectChanges();
};
return FangMultiTabsComponent;
}());
FangMultiTabsComponent.decorators = [
{ type: core.Component, args: [{
selector: 'fang-multi-tabs',
template: "<ul class=\"fang-multi-tabs\">\n\t<li *ngFor=\"let tab of tabs.toArray()\"\n\t\t[class.fang-tab-active]=\"tab.active\"\n\t\t(click)=\"selectTab(tab)\"\n\t\tclass=\"fang-tab\">\n\t\t<a class=\"fang-tab-header\">{{tab.title}}</a>\n\t</li>\n</ul>\n<ng-content></ng-content>\n",
changeDetection: core.ChangeDetectionStrategy.Default,
styles: [".fang-multi-tabs{display:flex;margin:0 8px;padding:0}.fang-tab{border-bottom:2px solid #ceeaf2;display:inline-flex;flex-grow:1;justify-content:space-around;padding:6px}.fang-tab-active,.fang-tab:focus{outline-color:transparent}.fang-tab-active{border-bottom:2px solid #519eae}.fang-tab-header{color:#6a6a6a;cursor:pointer;font-size:.85em;font-weight:600;text-transform:uppercase}"]
},] }
];
FangMultiTabsComponent.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef }
]; };
FangMultiTabsComponent.propDecorators = {
tabs: [{ type: core.ContentChildren, args: [FangTabComponent,] }],
selectedTabChanged: [{ type: core.Output }]
};
// @angular/core
var FangMultiTabsModule = /** @class */ (function () {
function FangMultiTabsModule() {
}
return FangMultiTabsModule;
}());
FangMultiTabsModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
FangMultiTabsComponent,
FangTabComponent
],
imports: [
common.CommonModule,
http.HttpClientModule
],
exports: [
FangMultiTabsComponent,
FangTabComponent
],
providers: []
},] }
];
// @angular/core
var FangViewportAutoResizeDirective = /** @class */ (function () {
function FangViewportAutoResizeDirective(cdkVirtualScrollViewport) {
var _this = this;
this.cdkVirtualScrollViewport = cdkVirtualScrollViewport;
var ResizeObserver = window.ResizeObserver;
if (ResizeObserver) {
this.resizeObserver = new ResizeObserver(function () { return _this.cdkVirtualScrollViewport.checkViewportSize(); });
this.resizeObserver.observe(this.cdkVirtualScrollViewport.elementRef.nativeElement);
}
}
FangViewportAutoResizeDirective.prototype.ngOnDestroy = function () {
this.resizeObserver && this.resizeObserver.disconnect();
this.resizeObserver = null;
};
return FangViewportAutoResizeDirective;
}());
FangViewportAutoResizeDirective.decorators = [
{ type: core.Directive, args: [{
selector: 'cdk-virtual-scroll-viewport[viewport-auto-resize], fang-table-virtual-scroll-viewport[viewport-auto-resize]'
},] }
];
FangViewportAutoResizeDirective.ctorParameters = function () { return [
{ type: scrolling.CdkVirtualScrollViewport }
]; };
// @angular/core
var EXPORTED_DECLARATIONS = [
FangViewportAutoResizeDirective
];
var FangVirtualScrollingModule = /** @class */ (function () {
function FangVirtualScrollingModule() {
}
return FangVirtualScrollingModule;
}());
FangVirtualScrollingModule.decorators = [
{ type: core.NgModule, args: [{
declarations: EXPORTED_DECLARATIONS,
imports: [],
exports: EXPORTED_DECLARATIONS,
providers: [overlay.ScrollDispatcher]
},] }
];
// Current version.
var VERSION = '1.11.0';
// Establish the root object, `window` (`self`) in the browser, `global`
// on the server, or `this` in some virtual machines. We use `self`
// instead of `window` for `WebWorker` support.
var root = typeof self == 'object' && self.self === self && self ||
typeof global == 'object' && global.global === global && global ||
Function('return this')() ||
{};
// Save bytes in the minified (but not gzipped) version:
var ArrayProto = Array.prototype, ObjProto = Object.prototype;
var SymbolProto = typeof Symbol !== 'undefined' ? Symbol.prototype : null;
// Create quick reference variables for speed access to core prototypes.
var push = ArrayProto.push, slice = ArrayProto.slice, toString = ObjProto.toString, hasOwnProperty = ObjProto.hasOwnProperty;
// Modern feature detection.
var supportsArrayBuffer = typeof ArrayBuffer !== 'undefined';
// All **ECMAScript 5+** native function implementations that we hope to use
// are declared here.
var nativeIsArray = Array.isArray, nativeKeys = Object.keys, nativeCreate = Object.create, nativeIsView = supportsArrayBuffer && ArrayBuffer.isView;
// Create references to these builtin functions because we override them.
var _isNaN = isNaN, _isFinite = isFinite;
// Keys in IE < 9 that won't be iterated by `for key in ...` and thus missed.
var hasEnumBug = !{ toString: null }.propertyIsEnumerable('toString');
var nonEnumerableProps = ['valueOf', 'isPrototypeOf', 'toString',
'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];
// The largest integer that can be represented exactly.
var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
function _(obj) {
if (obj instanceof _)
return obj;
if (!(this instanceof _))
return new _(obj);
this._wrapped = obj;
}
_.VERSION = VERSION;
// Extracts the result from a wrapped and chained object.
_.prototype.value = function () {
return this._wrapped;
};
// Provide unwrapping proxies for some methods used in engine operations
// such as arithmetic and JSON stringification.
_.prototype.valueOf = _.prototype.toJSON = _.prototype.value;
_.prototype.toString = function () {
return String(this._wrapped);
};
// Keep the identity function around for default iteratees.
function identity(value) {
return value;
}
// Internal function for creating a `toString`-based type tester.
function tagTester(name) {
return function (obj) {
return toString.call(obj) === '[object ' + name + ']';
};
}
var isFunction = tagTester('Function');
// Optimize `isFunction` if appropriate. Work around some `typeof` bugs in old
// v8, IE 11 (#1621), Safari 8 (#1929), and PhantomJS (#2236).
var nodelist = root.document && root.document.childNodes;
if (typeof /./ != 'function' && typeof Int8Array != 'object' && typeof nodelist != 'function') {
isFunction = function (obj) {
return typeof obj == 'function' || false;
};
}
var isFunction$1 = isFunction;
// Is a given variable an object?
function isObject(obj) {
var type = typeof obj;
return type === 'function' || type === 'object' && !!obj;
}
// Is a given value an array?
// Delegates to ECMA5's native `Array.isArray`.
var isArray = nativeIsArray || tagTester('Array');
// An internal function for creating assigner functions.
function createAssigner(keysFunc, defaults) {
return function (obj) {
var length = arguments.length;
if (defaults)
obj = Object(obj);
if (length < 2 || obj == null)
return obj;
for (var index = 1; index < length; index++) {
var source = arguments[index], keys = keysFunc(source), l = keys.length;
for (var i = 0; i < l; i++) {
var key = keys[i];
if (!defaults || obj[key] === void 0)
obj[key] = source[key];
}
}
return obj;
};
}
// Internal function to check whether `key` is an own property name of `obj`.
function has(obj, key) {
return obj != null && hasOwnProperty.call(obj, key);
}
// Internal helper to create a simple lookup structure.
// `collectNonEnumProps` used to depend on `_.contains`, but this led to
// circular imports. `emulatedSet` is a one-off solution that only works for
// arrays of strings.
function emulatedSet(keys) {
var hash = {};
for (var l = keys.length, i = 0; i < l; ++i)
hash[keys[i]] = true;
return {
contains: function (key) { return hash[key]; },
push: function (key) {
hash[key] = true;
return keys.push(key);
}
};
}
// Internal helper. Checks `keys` for the presence of keys in IE < 9 that won't
// be iterated by `for key in ...` and thus missed. Extends `keys` in place if
// needed.
function collectNonEnumProps(obj, keys) {
keys = emulatedSet(keys);
var nonEnumIdx = nonEnumerableProps.length;
var constructor = obj.constructor;
var proto = isFunction$1(constructor) && constructor.prototype || ObjProto;
// Constructor is a special case.
var prop = 'constructor';
if (has(obj, prop) && !keys.contains(prop))
keys.push(prop);
while (nonEnumIdx--) {
prop = nonEnumerableProps[nonEnumIdx];
if (prop in obj && obj[prop] !== proto[prop] && !keys.contains(prop)) {
keys.push(prop);
}
}
}
// Retrieve the names of an object's own properties.
// Delegates to **ECMAScript 5**'s native `Object.keys`.
function keys(obj) {
if (!isObject(obj))
return [];
if (nativeKeys)
return nativeKeys(obj);
var keys = [];
for (var key in obj)
if (has(obj, key))
keys.push(key);
// Ahem, IE < 9.
if (hasEnumBug)
collectNonEnumProps(obj, keys);
return keys;
}
// Assigns a given object with all the own properties in the passed-in
// object(s).
// (https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
var extendOwn = createAssigner(keys);
// Returns whether an object has a given set of `key:value` pairs.
function isMatch(object, attrs) {
var _keys = keys(attrs), length = _keys.length;
if (object == null)
return !length;
var obj = Object(object);
for (var i = 0; i < length; i++) {
var key = _keys[i];
if (attrs[key] !== obj[key] || !(key in obj))
return false;
}
return true;
}
// Returns a predicate for checking whether an object has a given set of
// `key:value` pairs.
function matcher(attrs) {
attrs = extendOwn({}, attrs);
return function (obj) {
return isMatch(obj, attrs);
};
}
// Internal function to obtain a nested property in `obj` along `path`.
function deepGet(obj, path) {
var length = path.length;
for (var i = 0; i < length; i++) {
if (obj == null)
return void 0;
obj = obj[path[i]];
}
return length ? obj : void 0;
}
// Normalize a (deep) property `path` to array.
// Like `_.iteratee`, this function can be customized.
function toPath(path) {
return isArray(path) ? path : [path];
}
_.toPath = toPath;
// Internal wrapper for `_.toPath` to enable minification.
// Similar to `cb` for `_.iteratee`.
function toPath$1(path) {
return _.toPath(path);
}
// Creates a function that, when passed an object, will traverse that object’s
// properties down the given `path`, specified as an array of keys or indices.
function property(path) {
path = toPath$1(path);
return function (obj) {
return deepGet(obj, path);
};
}
function optimizeCb(func, context, argCount) {
if (context === void 0)
return func;
switch (argCount == null ? 3 : argCount) {
case 1: return function (value) {
return func.call(context, value);
};
// The 2-argument case is omitted because we’re not using it.
case 3: return function (value, index, collection) {
return func.call(context, value, index, collection);
};
case 4: return function (accumulator, value, index, collection) {
return func.call(context, accumulator, value, index, collection);
};
}
return function () {
return func.apply(context, arguments);
};
}
// An internal function to generate callbacks that can be applied to each
// element in a collection, returning the desired result — either `_.identity`,
// an arbitrary callback, a property matcher, or a property accessor.
function baseIteratee(value, context, argCount) {
if (value == null)
return identity;
if (isFunction$1(value))
return optimizeCb(value, context, argCount);
if (isObject(value) && !isArray(value))
return matcher(value);
return property(value);
}
// External wrapper for our callback generator. Users may customize
// `_.iteratee` if they want additional predicate/iteratee shorthand styles.
// This abstraction hides the internal-only `argCount` argument.
function iteratee(value, context) {
return baseIteratee(value, context, Infinity);
}
_.iteratee = iteratee;
// The function we call internally to generate a callback. It invokes
// `_.iteratee` if overridden, otherwise `baseIteratee`.
function cb(value, context, argCount) {
if (_.iteratee !== iteratee)
return _.iteratee(value, context);
return baseIteratee(value, context, argCount);
}
// Common internal logic for `isArrayLike` and `isBufferLike`.
function createSizePropertyCheck(getSizeProperty) {
return function (collection) {
var sizeProperty = getSizeProperty(collection);
return typeof sizeProperty == 'number' && sizeProperty >= 0 && sizeProperty <= MAX_ARRAY_INDEX;
};
}
// Internal helper to generate a function to obtain property `key` from `obj`.
function shallowProperty(key) {
return function (obj) {
return obj == null ? void 0 : obj[key];
};
}
// Internal helper to obtain the `length` property of an object.
var getLength = shallowProperty('length');
// Internal helper for collection methods to determine whether a collection
// should be iterated as an array or as an object.
// Related: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tolength
// Avoids a very nasty iOS 8 JIT bug on ARM-64. #2094
var isArrayLike = createSizePropertyCheck(getLength);
// Return the results of applying the iteratee to each element.
function map(obj, iteratee, context) {
iteratee = cb(iteratee, context);
var _keys = !isArrayLike(obj) && keys(obj), length = (_keys || obj).length, results = Array(length);
for (var index = 0; index < length; index++) {
var currentKey = _keys ? _keys[index] : index;
results[index] = iteratee(obj[currentKey], currentKey, obj);
}
return results;
}
// Convenience version of a common use case of `_.map`: fetching a property.
function pluck(obj, key) {
return map(obj, property(key));
}
// Sort the object's values by a criterion produced by an iteratee.
function sortBy(obj, iteratee, context) {
var index = 0;
iteratee = cb(iteratee, context);
return pluck(map(obj, function (value, key, list) {
return {
value: value,
index: index++,
criteria: iteratee(value, key, list)
};
}).sort(function (left, right) {
var a = left.criteria;
var b = right.criteria;
if (a !== b) {
if (a > b || a === void 0)
return 1;
if (a < b || b === void 0)
return -1;
}
return left.index - right.index;
}), 'value');
}
var FangChipGroupComponent = /** @class */ (function () {
function FangChipGroupComponent() {
this.dataChange = new core.EventEmitter();
this.chipGroupDataChange = new core.EventEmitter();
}
FangChipGroupComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes['data']) {
this.cursor = this.config.interaction === 'select' ? 'pointer' : 'default';
this.chipGroupData = this.data.reduce(function (acc, data, index) {
var selected;
if (_this.config.interaction !== 'select') {
selected = true;
}
else {
selected = _this.chipGroupData && _this.chipGroupData[index] && _this.chipGroupData[index].selected;
}
acc.push({
displayValue: _this.config.propertyAccessKey ? data[_this.config.propertyAccessKey] : data,
selected: selected
});
return acc;
}, []);
this.chipGroupData = this.sortData(this.chipGroupData);
this.chipGroupDataChange.emit(this.chipGroupData);
}
};
FangChipGroupComponent.prototype.removeChip = function (event, chip) {
var _this = this;
event.stopPropagation();
this.chipGroupData = this.chipGroupData.filter(function (chipData) { return chipData.displayValue !== chip.displayValue; });
this.chipGroupData = this.sortData(this.chipGroupData);
var chipToRemove = this.data.filter(function (data) { return _this.config.propertyAccessKey
? data[_this.config.propertyAccessKey] === chip.displayValue
: data === chip.displayValue; })[0];
this.dataChange.emit(chipToRemove);
this.chipGroupDataChange.emit(this.chipGroupData);
};
FangChipGroupComponent.prototype.toggleChipSelection = function (chipIndex) {
this.chipGroupData[chipIndex].selected = !this.chipGroupData[chipIndex].selected;
};
FangChipGroupComponent.prototype.sortData = function (data) {
return sortBy(data, ['displayValue']);
};
return FangChipGroupComponent;
}());
FangChipGroupComponent.decorators = [
{ type: core.Component, args: [{
selector: 'fang-chip-group',
template: "<div *ngIf=\"chipGroupData && chipGroupData.length\"\n\t [ngClass]=\"{'no-wrap': config.hasWrap !== undefined && !config.hasWrap}\"\n\t class=\"{{config.alignment ? config.alignment: 'group-inline'}}\n\t {{config.chipGroupBackground}}\"\n>\n\t<div *ngFor=\"let chip of chipGroupData; let chipIndex = index\"\n\t\t [ngClass]=\"{'selected': chip.selected}\"\n\t\t class=\"{{config.chipBackground ? config.chipBackground : 'chip-light'}}\"\n\t\t (click)=\"config.interaction === 'select' && toggleChipSelection(chipIndex)\">\n\n\t\t<p [ngClass]=\"{'text-truncate-100': config.hasTextTruncate}\"\n\t\t title=\"{{chip.displayValue}}\" style=\"pointer-events: auto;\">\n\t\t\t{{chip.displayValue}}\n\t\t</p>\n\n\t\t<i *ngIf=\"config.interaction && config.interaction === 'close'\"\n\t\t class=\"ic-close\"\n\t\t style=\"pointer-events: auto !important\"\n\t\t (click)=\"removeChip($event,chip)\">\n\t\t</i>\n\t</div>\n</div>\n",
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: [":host{max-height:650px}::-webkit-scrollbar{background-color:#fff;border:none;border-left:1px solid hsla(0,0%,88.6%,.4);width:12px}"]
},] }
];
FangChipGroupComponent.propDecorators = {
cursor: [{ type: core.HostBinding, args: ['style.cursor',] }],
data: [{ type: core.Input }],
config: [{ type: core.Input }],
dataChange: [{ type: core.Output }],
chipGroupDataChange: [{ type: core.Output }]
};
var FangChipGroupModule = /** @class */ (function () {
function FangChipGroupModule() {
}
return FangChipGroupModule;
}());
FangChipGroupModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
exports: [
FangChipGroupComponent
],
declarations: [
FangChipGroupComponent
],
providers: [],
entryComponents: [FangChipGroupComponent]
},] }
];
var FangSearchComponent = /** @class */ (function () {
function FangSearchComponent() {
this.config = {};
this.filteredDataChange = new core.EventEmitter();
this.inputTextChange = new core.EventEmitter();
this.inputText = '';
}
FangSearchComponent.prototype.filterInputElements = function () {
var _this = this;
if (this.data) {
this.filteredData = this.data
.filter(function (e) {
return _this.inputText.toLowerCase().split(' ').every(function (keyword) {
return (_this.config.searchBy ? e[_this.config.searchBy] : e).toString().toLowerCase().includes(keyword);
});
});
this.filteredDataChange.emit(this.filteredData);
}
this.inputTextChange.emit(this.inputText);
};
FangSearchComponent.prototype.clearInputText = function (event) {
event && event.stopPropagation();
this.inputText = '';
this.filterInputElements();
};
return FangSearchComponent;
}());
FangSearchComponent.decorators = [
{ type: core.Component, args: [{
selector: 'fang-search',
template: "<div class=\"input\">\n\t<input type=\"text\"\n\t\t [(ngModel)]=\"inputText\"\n\t\t (ngModelChange)=\"filterInputElements()\"\n\t\t placeholder=\"{{config?.placeholder ? config.placeholder : 'Search...'}}\"/>\n\t<i class=\"ic-close \" *ngIf=\"inputText.length\"\n\t (click)=\"clearInputText($event)\"\n\t></i>\n</div>\n\n",
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: [""]
},] }
];
FangSearchComponent.propDecorators = {
data: [{ type: core.Input }],
config: [{ type: core.Input }],
filteredDataChange: [{ type: core.Output }],
inputTextChange: [{ type: core.Output }]
};
var FangSearchModule = /** @class */ (function () {
function FangSearchModule() {
}
return FangSearchModule;
}());
FangSearchModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule
],
exports: [
FangSearchComponent
],
declarations: [
FangSearchComponent
],
providers: [],
entryComponents: [FangSearchComponent]
},] }
];
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var dropdownTypeMap = {
'default': 'dropdown-wrapper',
'compact': 'dropdown-wrapper-sm',
'large': 'dropdown-wrapper-lg'
};
var FangDropdownComponent = /** @class */ (function () {
function FangDropdownComponent() {
this.config = {};
this.selectedItemsChanged = new core.EventEmitter();
this.isDropdownOpen = false;
this.selectedItems = [];
this.searchInputText = '';
}
FangDropdownComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes['data']) {
if (this.config.hasChipGroup && this.config.chipGroupConfig) {
this.config.chipGroupConfig.propertyAccessKey = this.config.propertyAccessKey;
this.config.chipGroupConfig.interaction = 'close';
}
// Transform dropdownData to string[]
this.dropdownData = __spread(this.data).map(function (el) {
return _this.getPropertyValue(el);
});
this.filteredDropdownData = __spread(this.dropdownData);
this.filteredDropdownData = this.sortData(this.filteredDropdownData);
}
if (changes['config'].isFirstChange()) {
if (!this.config.type) {
this.config.type = 'default';
}
if (this.config.isGrowable === undefined) {
this.config.isGrowable = true;
}
if (this.config.isPortfolio) {
this.config.hasContainer = false;
this.config.chipGroupConfig.alignment = 'group-inline';
this.config.chipGroupConfig.chipBackground = undefined;
}
}
};
FangDropdownComponent.prototype.selectItem = function (item) {
var _this = this;
if (this.config.hasMultiSelect) {
var isElementSelected = this.selectedItems.find(function (el) { return _this.getPropertyValue(el) === item; });
if (!isElementSelected) {
this.selectedItems = __spread(this.selectedItems, [this.data.find(function (el) { return _this.getPropertyValue(el) === item; })]);
}
else {
this.selectedItems = this.selectedItems.filter(function (el) { return _this.getPropertyValue(el) !== item; });
}
// Chip Group & portfolio
if (this.config.hasChipGroup && this.config.chipGroupConfig) {
this.dropdownData = this.dropdownData.filter(function (el) { return el !== item; });
this.filteredDropdownData = this.filteredDropdownData.filter(function (el) { return el !== item; });
this.filteredDropdownData = this.sortData(this.filteredDropdownData);
}
this.selectedItemsChanged.emit(this.selectedItems);
// TODO Tree implementation
}
else { // single select
this.selectedItems = [this.data.find(function (el) { return _this.getPropertyValue(el) === item; })];
this.isDropdownOpen = false;
this.selectedItemsChanged.emit(this.selectedItems);
}
};
FangDropdownComponent.prototype.toggleDropdown = function (arrowPressed, event) {
if (arrowPressed === void 0) { arrowPressed = false; }
if (event === void 0) { event = undefined; }
event && event.stopPropagation();
if (arrowPressed || !this.config.hasChipGroup || (this.config.hasChipGroup && !this.selectedItems.length && !arrowPressed)) {
this.isDropdownOpen = !this.isDropdownOpen;
}
};
FangDropdownComponent.prototype.getPropertyValue = function (element) {
return this.config.propertyAccessKey
? element[this.config.propertyAccessKey]
: element;
};
FangDropdownComponent.prototype.isItemSelected = function (item) {
var _this = this;
return this.selectedItems.find(function (el) { return _this.getPropertyValue(el) === item; });
};
FangDropdownComponent.prototype.removeChip = function (item) {
this.selectedItems = this.selectedItems.filter(function (el) { return el !== item; });
// re-add chip to list only if its not portfolio
if (this.config.hasChipGroup && this.config.chipGroupConfig) {
this.dropdownData = __spread(this.dropdownData, [this.getPropertyValue(item)]);
this.filteredDropdownData = __spread(this.filteredDropdownData, [this.getPropertyValue(item)]);
this.filteredDropdownData = this.sortData(this.filteredDropdownData);
}
};
FangDropdownComponent.prototype.getConcatSelectedItems = function (items) {
var _this = this;
return items.map(function (item) { return _this.getPropertyValue(item); }).join(', ');
};
FangDropdownComponent.prototype.selectAll = function () {
var _this = this;
this.selectedItems = __spread(this.data);
if (this.config.hasChipGroup) {
this.dropdownData = [];
this.filteredDropdownData = [];
}
else {
this.dropdownData = this.selectedItems.map(function (selectedItem) {
return _this.getPropertyValue(selectedItem);
});
}
};
FangDropdownComponent.prototype.clearAll = function () {
var _this = this;
this.selectedItems = [];
if (this.config.hasChipGroup) {
this.dropdownData = __spread(this.data).map(function (dataEl) {
return _this.getPropertyValue(dataEl);
});
this.filteredDropdownData = __spread(this.dropdownData);
this.filteredDropdownData = this.sortData(this.filteredDropdownData);
}
};
FangDropdownComponent.prototype.proceedToSelection = function (item, event) {
var _this = this;
if (event === void 0) { event = undefined; }
event && event.stopPropagation();
if (!!this.selectedItems.find(function (el) { return _this.getPropertyValue(el) === item; })
|| (this.config.multiActions && this.config.multiActions.selectLimit && this.config.multiActions.selectLimit > this.selectedItems.length)
|| (this.config.multiActions && !this.config.multiActions.selectLimit)
|| !this.config.multiActions) {
this.selectItem(item);
}
};
FangDropdownComponent.prototype.sortData = function (data) {
return sortBy(data);
};
FangDropdownComponent.prototype.getDropdownSize = function () {
return dropdownTypeMap[this.config.type];
};
FangDropdownComponent.prototype.totalSelectedItems = function () {
if (this.config.titleConfig && this.config.titleConfig.isTitleConcatenated) {
if (this.config.multiActions && this.config.multiActions.selectLimit) {
return this.getConcatSelectedItems(this.selectedItems) + " (" + this.selectedItems.length + "/" + this.config.multiActions.selectLimit + ")";
}
return this.getConcatSelectedItems(this.selectedItems) + " (" + this.selectedItems.length + ")";
}
else {
if (this.config.multiActions && this.config.multiActions.selectLimit) {
return "Total Selected (" + this.selectedItems.length + "/" + this.config.multiActions.selectLimit + ")";
}
return "Total Selected (" + this.selectedItems.length + ")";
}
};
return FangDropdownComponent;
}());
FangDropdownComponent.decorators = [
{ type: core.Component, args: [{
selector: 'fang-dropdown',
template: "<div uds-ui class=\"light-theme\" (clickOutsideElement)=\"isDropdownOpen=false\">\n\t<div class=\" {{getDropdownSize()}}\"\n\t\t [ngClass]=\"{'no-container ': config.hasContainer !== undefined && !config.hasContainer,\n\t\t\t\t\t 'reverse': config.isPortfolio,\n\t\t\t\t\t 'grow': config.isGrowable && !config.isPortfolio}\"\n\t\t style=\"margin: 0 12px\">\n\t\t<div class=\"input\" (click)=\"toggleDropdown(false)\">\n\n\t\t\t<!-- Single Item Select -->\n\t\t\t<ng-container *ngIf=\"!config.hasMultiSelect\">\n\t\t\t\t<p *ngIf=\"!selectedItems.length\" class=\"text-placeholder\">\n\t\t\t\t\t{{config.titleConfig && config.titleConfig.placeholder ? config.titleConfig.placeholder : 'Select item...'}}\n\t\t\t\t</p>\n\t\t\t\t<p *ngIf=\"selectedItems.length\">{{getPropertyValue(selectedItems[0])}}</p>\n\t\t\t</ng-container>\n\n\t\t\t<!-- Multi Item Select -->\n\t\t\t<ng-container *ngIf=\"config.hasMultiSelect\">\n\t\t\t\t<!-- CheckList -->\n\t\t\t\t<p *ngIf=\"!selectedItems.length && !config.isPortfolio\" class=\"text-placeholder\">\n\t\t\t\t\t{{config.titleConfig && config.titleConfig.placeholder ? config.titleConfig.placeholder : 'Select items...'}}\n\t\t\t\t</p>\n\n\t\t\t\t<!-- Multi Select title -->\n\t\t\t\t<ng-container *ngIf=\"selectedItems.length && !config.hasChipGroup\">\n\t\t\t\t\t<p>{{totalSelectedItems()}}</p>\n\t\t\t\t</ng-container>\n\n\t\t\t\t<!-- Portfolio title -->\n\t\t\t\t<ng-container *ngIf=\"!selectedItems.length && config.isPortfolio\">\n\t\t\t\t\t<p>PORTFOLIOS</p>\n\t\t\t\t</ng-container>\n\n\t\t\t\t<!-- Chip Group & Portfolio -->\n\t\t\t\t<fang-chip-group *ngIf=\"config.hasChipGroup && this.selectedItems.length\"\n\t\t\t\t\t\t\t\t [data]=\"this.selectedItems\"\n\t\t\t\t\t\t\t\t [config]=\"config.chipGroupConfig\"\n\t\t\t\t\t\t\t\t (dataChange)=\"removeChip($event)\">\n\t\t\t\t</fang-chip-group>\n\t\t\t</ng-container>\n\n\t\t\t<!-- Arrow\t-->\n\t\t\t<button class=\"btn-icon grow\" (click)=\"toggleDropdown(true,$event)\">\n\t\t\t\t<i [ngClass]=\"{'ic-caret-down-sm': !isDropdownOpen, 'ic-caret-up-sm': isDropdownOpen}\"></i>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<div class=\"dropdown-container\">\n\t\t\t<!-- Multi Actions -->\n\t\t\t<div class=\"dropdown-header\">\n\t\t\t\t<div class=\"dropdown-header-select\" *ngIf=\"isDropdownOpen && config.hasMultiActions && config.multiActions\">\n\t\t\t\t\t<button *ngIf=\"config.multiActions.hasClearAll\"\n\t\t\t\t\t\t\t[disabled]=\"!selectedItems.length\"\n\t\t\t\t\t\t\tclass=\"btn-secondary-sm\"\n\t\t\t\t\t\t\t(click)=\"clearAll()\">\n\t\t\t\t\t\tclearAll\n\t\t\t\t\t</button>\n\t\t\t\t\t<button [disabled]=\"!(dropdownData && dropdownData.length && ((dropdownData.length <= config.multiActions.selectLimit) || config.multiActions.selectLimit === undefined))\n\t\t\t\t\t\t\t\t\t\t|| (selectedItems.length === dropdownData.length)\"\n\t\t\t\t\t\t\tclass=\"btn-primary-sm\"\n\t\t\t\t\t\t\t(click)=\"(selectedItems.length !== dropdownData.length) && selectAll()\">\n\t\t\t\t\t\tselectAll\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Search field -->\n\t\t\t\t<div *ngIf=\"config.hasSearchField\"\n\t\t\t\t\t [hidden]=\"!isDropdownOpen || !dropdownData.length\"\n\t\t\t\t\t class=\"dropdown-header-search\">\n\t\t\t\t\t<fang-search [data]=\"dropdownData\"\n\t\t\t\t\t\t\t\t [config]=\"config.searchFieldConfig\"\n\t\t\t\t\t\t\t\t (filteredDataChange)=\"filteredDropdownData = $event\"\n\t\t\t\t\t\t\t\t (inputTextChange)=\"searchInputText = $event\">\n\t\t\t\t\t</fang-search>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<!-- Dropdown List\t-->\n\t\t\t<div class=\"dropdown-body\" *ngIf=\"isDropdownOpen\">\n\t\t\t\t<div *ngFor=\"let item of filteredDropdownData\"\n\t\t\t\t\t class=\"dropdown-option\"\n\t\t\t\t\t [ngClass]=\"{'select': config.hasMultiSelect && isItemSelected(item)}\"\n\t\t\t\t\t (click)=\"proceedToSelection(item,$event)\">\n\t\t\t\t\t<p>{{item}}</p>\n\t\t\t\t\t<i *ngIf=\"config.hasMultiSelect && isItemSelected(item)\" class=\"ic-check\"> </i>\n\t\t\t\t</div>\n\t\t\t\t<p *ngIf=\"!filteredDropdownData.length && searchInputText.length\" class=\"no-options\">No results found</p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n",
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: [""]
},] }
];
FangDropdownComponent.propDecorators = {
data: [{ type: core.Input }],
config: [{ type: core.Input }],
selectedItemsChanged: [{ type: core.Output }]
};
tippy__default['default'].setDefaultProps({
ignoreAttributes: true,
arrow: false,
maxWidth: '300px',
trigger: 'mouseenter',
zIndex: 99999,
});
var FangPopoverDirective = /** @class */ (function () {
function FangPopoverDirective(el) {
this.el = el;
}
FangPopoverDirective.prototype.ngOnChanges = function (changes) {
if (changes['options']) {
if (this.options && !this.instance) {
this.instance = tippy__default['default'](this.el.nativeElement, this.options);
}
else if (this.options && this.instance) {
this.instance.setProps(this.options);
}
else if ((!this.options || !this.options.content) && this.instance) {
this.instance.destroy();
this.instance = undefined;
}
}
if (changes['content'] && this.instance) {
this.instance.setContent(this.content);
}
};
FangPopoverDirective.prototype.ngOnDestroy = function () {
this.instance && this.instance.destroy();
};
return FangPopoverDirective;
}());
FangPopoverDirective.decorators = [
{ type: core.Directive, args: [{ selector: '[fang-popover]' },] }
];
FangPopoverDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
FangPopoverDirective.propDecorators = {
options: [{ type: core.Input, args: ['fang-popover',] }],
content: [{ type: core.Input, args: ['content',] }]
};
var FangPopoverModule = /** @class */ (function () {
function FangPopoverModule() {
}
return FangPopoverModule;
}());
FangPopoverModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
exports: [
FangPopoverDirective
],
declarations: [
FangPopoverDirective
],
providers: [],
entryComponents: []
},] }
];
// @angular/core
var ClickOutsideElementDirective = /** @class */ (function () {
function ClickOutsideElementDirective(_elementRef) {
this._elementRef = _elementRef;
this.clickOutsideElement = new core.EventEmitter();
}
ClickOutsideElementDirective.prototype.onClick = function (event, targetElement) {
if (!targetElement) {
return;
}
var clickedInsideElement = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInsideElement) {
this.clickOutsideElement.emit(event);
}
};
return ClickOutsideElementDirective;
}());
ClickOutsideElementDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[clickOutsideElement]'
},] }
];
ClickOutsideElementDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
ClickOutsideElementDirective.propDecorators = {
clickOutsideElement: [{ type: core.Output }],
onClick: [{ type: core.HostListener, args: ['document:click', ['$event', '$event.target'],] }]
};
var ClickOutsideElementModule = /** @class */ (function () {
function ClickOutsideElementModule() {
}
return ClickOutsideElementModule;
}());
ClickOutsideElementModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
exports: [
ClickOutsideElementDirective
],
declarations: [
ClickOutsideElementDirective
],
providers: [],
entryComponents: []
},] }
];
var FangDirectivesModule = /** @class */ (function () {
function FangDirectivesModule() {
}
return FangDirectivesModule;
}());
FangDirectivesModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
FangPopoverModule,
ClickOutsideElementModule
],
exports: [
FangPopoverModule,
ClickOutsideElementModule
],
declarations: [],
providers: [],
entryComponents: []
},] }
];
var FangDropdownModule = /** @class */ (function () {
function FangDropdownModule() {
}
return FangDropdownModule;
}());
FangDropdownModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
FangChipGroupModule,
FangSearchModule,
FangDirectivesModule
],
exports: [
FangDropdownComponent
],
declarations: [
FangDropdownComponent
],
providers: [],
entryComponents: [FangDropdownComponent]
},] }
];
var FangAutocompleteDropdownComponent = /** @class */ (function () {
function FangAutocompleteDropdownComponent() {
this.onSelect = new core.EventEmitter();
}
FangAutocompleteDropdownComponent.prototype.selectElement = function (element) {
this.onSelect.emit(element);
};
return FangAutocompleteDropdownComponent;
}());
FangAutocompleteDropdownComponent.decorators = [
{ type: core.Component, args: [{
selector: 'autocomplete-dropdown',
template: "<div class=\"dropdown-list\">\n\t<div *ngFor=\"let el of dropdownElements; let i=index\"\n\t\t class=\"dropdown-item\"\n\t\t (click)=\"selectElement(el)\">\n\t\t{{el}}\n\t</div>\n</div>\n",
styles: [":host{background-clip:padding-box;border:1px solid #bdbdc3;border-radius:4px;border-top:0;box-shadow:4px 4px 4px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.24);display:block;flex-direction:column;margin:2px 0 2px 1px;overflow:hidden;z-index:9999999999}.dropdown-list,:host{background-color:#fff}.dropdown-list{flex-grow:1;height:100%;max-height:20vh;overflow-x:hidden;overflow-y:auto;position:relative;width:100%;will-change:transform,scroll-position}.dropdown-item{align-items:center;color:#333;cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;padding:8px}.dropdown-item:hover{background-color:#f5f5f5}"]
},] }
];
FangAutocompleteDropdownComponent.propDecorators = {
dropdownElements: [{ type: core.Input }],
onSelect: [{ type: core.Output }]
};
var FangAutocompleteInputDirective = /** @class */ (function () {
function FangAutocompleteInputDirective(element, factoryResolver, viewContainerRef, _changeDetectorRef, ngModel) {
this.element = element;
this.factoryResolver = factoryResolver;
this.viewContainerRef = viewContainerRef;
this._changeDetectorRef = _changeDetectorRef;
this.ngModel = ngModel;
this.dropdownElements$ = new rxjs.ReplaySubject(1);
this.popperConfig = {
placement: 'bottom',
positionFixed: true,
modifiers: {
preventOverflow: {
enabled: true,
boundariesElement: 'window'
},
setWidth: {
enabled: true,
order: 840,
fn: function (data) {
data.offsets.popper.left = data.offsets.reference.left;
data.offsets.popper.right = data.offsets.reference.right;
data.offsets.popper.width = data.styles.width = Math.round(data.offsets.reference.width);
return data;
}
}
}
};
}
Object.defineProperty(FangAutocompleteInputDirective.prototype, "dropdownElements", {
set: function (dropdownElements) {
this.dropdownElements$.next(dropdownElements || []);
},
enumerable: false,
configurable: true
});
;
FangAutocompleteInputDirective.prototype.ngOnInit = function () {
var _this = this;
rxjs.fromEvent(document, "click", { passive: true }).pipe(operators.filter(function () { return !!_this.componentRef && _this.componentRef.location.nativeElement.style.display !== 'none'; }))
.subscribe(function (e) {
if (!_this.element.nativeElement.contains(e.target)) {
_this.componentRef.location.nativeElement.style.display = 'none';
}
});
this._changeDetectorRef.detectChanges();
};
FangAutocompleteInputDirective.prototype.ngAfterContentInit = function () {
var _this = this;
if (this.ngModel) {
this.input = this.ngModel.control;
this.autocompleteSubscription =
rxjs.combineLatest(this.dropdownElements$.asObservable(), rxjs.fromEvent(this.element.nativeElement, "focus", { passive: true }), rxjs.fromEvent(this.element.nativeElement, "keyup", { passive: true }))
.subscribe(function (_a) {
var _b = __read(_a, 3), arr = _b[0], input = _b[1], input2 = _b[2];
console.log(arr, input, input2);
if (!_this.componentRef) {
var factory = _this.factoryResolver.resolveComponentFactory(FangAutocompleteDropdownComponent);
_this.componentRef = _this.viewContainerRef.createComponent(factory);
_this.componentRef.location.nativeElement.style.display = 'none';
_this.dropdownPopper = new Popper__default['default'](_this.element.nativeElement, _this.componentRef.location.nativeElement, _this.popperConfig);
_this.inputChangesSubscription = _this.componentRef.instance.onSelect.subscribe(function (v) {
_this.input.setValue(v);
});
}
var inputValue = input.target.value;
var lowerCaseInput = inputValue && inputValue.toLocaleLowerCase();
var array = arr.slice().filter(function (e) { return e.toLowerCase().startsWith(lowerCaseInput); });
var lowerCaseArray = arr.slice().map(function (a) { return a.toLowerCase(); }).filter(function (e) { return e.startsWith(lowerCaseInput); });
if (inputValue && inputValue.length > 0 && (lowerCaseArray.length > 1 || !lowerCaseArray.includes(lowerCaseInput))) {
_this.componentRef.location.nativeElement.style.display = 'block';
_this.componentRef.instance.dropdownElements = array;
_this.componentRef.changeDetectorRef.detectChanges();
_this.dropdownPopper.scheduleUpdate();
}
else {
_this.componentRef.location.nativeElement.style.display = 'none';
}
});
}
this._changeDetectorRef.detectChanges();
};
FangAutocompleteInputDirective.prototype.ngOnDestroy = function () {
this.dropdownPopper && this.dropdownPopper.destroy();
this.autocompleteSubscription && this.autocompleteSubscription.unsubscribe();
this.inputChangesSubscription && this.inputChangesSubscription.unsubscribe();
};
return FangAutocompleteInputDirective;
}());
FangAutocompleteInputDirective.decorators = [
{ type: core.Directive, args: [{ selector: '[autoComplete][ngModel]' },] }
];
FangAutocompleteInputDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.ComponentFactoryResolver },
{ type: core.ViewContainerRef },
{ type: core.ChangeDetectorRef },
{ type: forms.NgModel }
]; };
FangAutocompleteInputDirective.propDecorators = {
dropdownElements: [{ type: core.Input, args: ['autoComplete',] }]
};
var FangAutocompleteModule = /** @class */ (function () {
function FangAutocompleteModule() {
}
return FangAutocompleteModule;
}());
FangAutocompleteModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule
],
exports: [
FangAutocompleteInputDirective
],
declarations: [
FangAutocompleteDropdownComponent,
FangAutocompleteInputDirective
],
providers: [],
entryComponents: [FangAutocompleteDropdownComponent]
},] }
];
/*
* Public API Surface of fang-ui-components
*/
/**
* Generated bundle index. Do not edit.
*/
exports.FangAutocompleteModule = FangAutocompleteModule;
exports.FangChipGroupComponent = FangChipGroupComponent;
exports.FangChipGroupModule = FangChipGroupModule;
exports.FangDropdownComponent = FangDropdownComponent;
exports.FangDropdownModule = FangDropdownModule;
exports.FangMultiTabsComponent = FangMultiTabsComponent;
exports.FangMultiTabsModule = FangMultiTabsModule;
exports.FangSearchComponent = FangSearchComponent;
exports.FangSearchModule = FangSearchModule;
exports.FangTabComponent = FangTabComponent;
exports.FangViewportAutoResizeDirective = FangViewportAutoResizeDirective;
exports.FangVirtualScrollingModule = FangVirtualScrollingModule;
exports.ɵa = FangDirectivesModule;
exports.ɵb = FangPopoverModule;
exports.ɵc = FangPopoverDirective;
exports.ɵd = ClickOutsideElementModule;
exports.ɵe = ClickOutsideElementDirective;
exports.ɵf = FangAutocompleteInputDirective;
exports.ɵg = FangAutocompleteDropdownComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=inaccess-fang-ui-components.umd.js.map