ngx-ode-ui 3.12.0-dev.3 → 3.12.0-dev.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/ngx-ode-ui.umd.js +253 -8
- package/bundles/ngx-ode-ui.umd.js.map +1 -1
- package/bundles/ngx-ode-ui.umd.min.js +1 -1
- package/bundles/ngx-ode-ui.umd.min.js.map +1 -1
- package/esm2015/lib/components/dropdown/dropdown.component.js +76 -0
- package/esm2015/lib/components/list/list.component.js +10 -3
- package/esm2015/lib/components/list-checkable/list-checkable.component.js +137 -0
- package/esm2015/lib/components/multi-combo/multi-combo.component.js +2 -2
- package/esm2015/lib/components/search-input/search-input.component.js +15 -3
- package/esm2015/lib/ngx-ode-ui.module.js +8 -2
- package/esm2015/ngx-ode-ui.js +3 -2
- package/esm2015/public-api.js +2 -1
- package/esm5/lib/components/dropdown/dropdown.component.js +81 -0
- package/esm5/lib/components/list/list.component.js +10 -3
- package/esm5/lib/components/list-checkable/list-checkable.component.js +148 -0
- package/esm5/lib/components/multi-combo/multi-combo.component.js +2 -2
- package/esm5/lib/components/search-input/search-input.component.js +16 -5
- package/esm5/lib/ngx-ode-ui.module.js +8 -2
- package/esm5/ngx-ode-ui.js +3 -2
- package/esm5/public-api.js +2 -1
- package/fesm2015/ngx-ode-ui.js +239 -7
- package/fesm2015/ngx-ode-ui.js.map +1 -1
- package/fesm5/ngx-ode-ui.js +252 -9
- package/fesm5/ngx-ode-ui.js.map +1 -1
- package/lib/components/dropdown/dropdown.component.d.ts +36 -0
- package/lib/components/list/list.component.d.ts +2 -0
- package/lib/components/list-checkable/list-checkable.component.d.ts +55 -0
- package/lib/components/search-input/search-input.component.d.ts +3 -0
- package/ngx-ode-ui.d.ts +1 -0
- package/ngx-ode-ui.metadata.json +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
package/fesm5/ngx-ode-ui.js
CHANGED
|
@@ -1383,7 +1383,8 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1383
1383
|
_this.model = [];
|
|
1384
1384
|
_this.searchPlaceholder = 'search';
|
|
1385
1385
|
_this.noResultsLabel = 'list.results.no.items';
|
|
1386
|
-
_this.
|
|
1386
|
+
_this.isSearchActive = true;
|
|
1387
|
+
_this.searchInput = false;
|
|
1387
1388
|
_this.inputChange = new EventEmitter();
|
|
1388
1389
|
_this.onSelect = new EventEmitter();
|
|
1389
1390
|
_this.listChange = new EventEmitter();
|
|
@@ -1426,7 +1427,7 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1426
1427
|
ListComponent.decorators = [
|
|
1427
1428
|
{ type: Component, args: [{
|
|
1428
1429
|
selector: 'ode-list',
|
|
1429
|
-
template: "<ode-search-input
|
|
1430
|
+
template: "<ode-search-input\n *ngIf=\"isSearchActive\"\n [searchInput]=\"searchInput\"\n [searchSubmit]=\"searchSubmit\"\n [attr.placeholder]=\"searchPlaceholder | translate\"\n (onChange)=\"inputChange.emit($event)\"></ode-search-input>\n<div class=\"toolbar\">\n <ng-content select=\"[toolbar]\"></ng-content>\n</div>\n<div class=\"list-wrapper\"\n infiniteScroll\n [scrollWindow]=\"false\"\n (scrolled)=\"scrolledDown.emit()\"\n [infiniteScrollThrottle]=\"50\">\n <ul>\n <li *ngFor=\"let item of model | filter: filters | filter: inputFilter | store:self:'storedElements' | orderBy: sort | slice: 0:limit\"\n (click)=\"onSelect.emit(item)\"\n [class.selected]=\"isSelected(item)\"\n [class.disabled]=\"isDisabled(item)\"\n [ngClass]=\"ngClass(item)\"\n class=\"lct-list-item\">\n <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-template>\n </li>\n </ul>\n <ul *ngIf=\"storedElements && storedElements.length === 0\">\n <li class=\"no-results\">{{ noResultsLabel | translate }}</li>\n </ul>\n</div>\n",
|
|
1430
1431
|
styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{cursor:pointer;border-top:1px solid #ddd;padding:10px}ul li.disabled{pointer-events:none}"]
|
|
1431
1432
|
}] }
|
|
1432
1433
|
];
|
|
@@ -1442,7 +1443,9 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1442
1443
|
limit: [{ type: Input }],
|
|
1443
1444
|
searchPlaceholder: [{ type: Input }],
|
|
1444
1445
|
noResultsLabel: [{ type: Input }],
|
|
1446
|
+
isSearchActive: [{ type: Input }],
|
|
1445
1447
|
searchInput: [{ type: Input }],
|
|
1448
|
+
searchSubmit: [{ type: Input }],
|
|
1446
1449
|
inputChange: [{ type: Output }],
|
|
1447
1450
|
onSelect: [{ type: Output }],
|
|
1448
1451
|
listChange: [{ type: Output }],
|
|
@@ -1474,8 +1477,12 @@ if (false) {
|
|
|
1474
1477
|
/** @type {?} */
|
|
1475
1478
|
ListComponent.prototype.noResultsLabel;
|
|
1476
1479
|
/** @type {?} */
|
|
1480
|
+
ListComponent.prototype.isSearchActive;
|
|
1481
|
+
/** @type {?} */
|
|
1477
1482
|
ListComponent.prototype.searchInput;
|
|
1478
1483
|
/** @type {?} */
|
|
1484
|
+
ListComponent.prototype.searchSubmit;
|
|
1485
|
+
/** @type {?} */
|
|
1479
1486
|
ListComponent.prototype.inputChange;
|
|
1480
1487
|
/** @type {?} */
|
|
1481
1488
|
ListComponent.prototype.onSelect;
|
|
@@ -1493,6 +1500,150 @@ if (false) {
|
|
|
1493
1500
|
ListComponent.prototype.ngClass;
|
|
1494
1501
|
}
|
|
1495
1502
|
|
|
1503
|
+
/**
|
|
1504
|
+
* @fileoverview added by tsickle
|
|
1505
|
+
* Generated from: lib/components/list-checkable/list-checkable.component.ts
|
|
1506
|
+
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
1507
|
+
*/
|
|
1508
|
+
var ListCheckableComponent = /** @class */ (function (_super) {
|
|
1509
|
+
__extends(ListCheckableComponent, _super);
|
|
1510
|
+
function ListCheckableComponent(injector) {
|
|
1511
|
+
var _this = _super.call(this, injector) || this;
|
|
1512
|
+
_this.model = [];
|
|
1513
|
+
_this.noResultsLabel = 'list.results.no.items';
|
|
1514
|
+
_this.readOnly = false;
|
|
1515
|
+
_this.onCheck = new EventEmitter();
|
|
1516
|
+
_this.listChange = new EventEmitter();
|
|
1517
|
+
_this.scrolledDown = new EventEmitter();
|
|
1518
|
+
_this.areAllChecked = (/**
|
|
1519
|
+
* @return {?}
|
|
1520
|
+
*/
|
|
1521
|
+
function () { return false; });
|
|
1522
|
+
_this.isChecked = (/**
|
|
1523
|
+
* @param {?=} arg
|
|
1524
|
+
* @return {?}
|
|
1525
|
+
*/
|
|
1526
|
+
function (arg) { return false; });
|
|
1527
|
+
_this.isDisabled = (/**
|
|
1528
|
+
* @param {?=} arg
|
|
1529
|
+
* @return {?}
|
|
1530
|
+
*/
|
|
1531
|
+
function (arg) { return false; });
|
|
1532
|
+
_this.ngClass = (/**
|
|
1533
|
+
* @param {?=} arg
|
|
1534
|
+
* @return {?}
|
|
1535
|
+
*/
|
|
1536
|
+
function (arg) { return ({}); });
|
|
1537
|
+
/* Store pipe */
|
|
1538
|
+
_this.self = _this;
|
|
1539
|
+
_this._storedElements = [];
|
|
1540
|
+
return _this;
|
|
1541
|
+
}
|
|
1542
|
+
Object.defineProperty(ListCheckableComponent.prototype, "storedElements", {
|
|
1543
|
+
get: /**
|
|
1544
|
+
* @return {?}
|
|
1545
|
+
*/
|
|
1546
|
+
function () {
|
|
1547
|
+
return this._storedElements;
|
|
1548
|
+
},
|
|
1549
|
+
set: /**
|
|
1550
|
+
* @param {?} list
|
|
1551
|
+
* @return {?}
|
|
1552
|
+
*/
|
|
1553
|
+
function (list) {
|
|
1554
|
+
this._storedElements = list;
|
|
1555
|
+
this.listChange.emit(list);
|
|
1556
|
+
},
|
|
1557
|
+
enumerable: true,
|
|
1558
|
+
configurable: true
|
|
1559
|
+
});
|
|
1560
|
+
/**
|
|
1561
|
+
* @param {?} checkAll
|
|
1562
|
+
* @return {?}
|
|
1563
|
+
*/
|
|
1564
|
+
ListCheckableComponent.prototype.toggleAll = /**
|
|
1565
|
+
* @param {?} checkAll
|
|
1566
|
+
* @return {?}
|
|
1567
|
+
*/
|
|
1568
|
+
function (checkAll) {
|
|
1569
|
+
var _this = this;
|
|
1570
|
+
this.model.forEach((/**
|
|
1571
|
+
* @param {?} item
|
|
1572
|
+
* @return {?}
|
|
1573
|
+
*/
|
|
1574
|
+
function (item) {
|
|
1575
|
+
/** @type {?} */
|
|
1576
|
+
var isChecked = _this.isChecked(item);
|
|
1577
|
+
if (!_this.isDisabled(item)
|
|
1578
|
+
&& ((isChecked && !checkAll) || (!isChecked && checkAll))) {
|
|
1579
|
+
_this.onCheck.emit({ item: item, checked: checkAll });
|
|
1580
|
+
}
|
|
1581
|
+
}));
|
|
1582
|
+
};
|
|
1583
|
+
ListCheckableComponent.decorators = [
|
|
1584
|
+
{ type: Component, args: [{
|
|
1585
|
+
selector: 'ode-list-checkable',
|
|
1586
|
+
template: "<div class=\"list-checkable-wrapper\"\n infiniteScroll\n [scrollWindow]=\"false\"\n (scrolled)=\"scrolledDown.emit()\"\n [infiniteScrollThrottle]=\"50\">\n\n <ul *ngIf=\"storedElements && storedElements.length === 0\">\n <li class=\"no-results\"><span>{{ noResultsLabel | translate }}</span></li>\n </ul>\n \n <ul>\n <li class=\"select-all\" \n [class.checked]=\"areAllChecked()\"\n *ngIf=\"!readOnly\">\n <label>\n <span>{{(areAllChecked() ? 'ux.multiselect.deselect-all' : 'ux.multiselect.select-all') | translate}}</span>\n <input type=\"checkbox\" [checked]=\"areAllChecked()\" (change)=\"toggleAll($event.target.checked)\" />\n </label>\n </li>\n\n <li class=\"lct-list-checkable-item\" \n [class.checked]=\"isChecked(item)\"\n [class.disabled]=\"isDisabled(item)\"\n [ngClass]=\"ngClass(item)\"\n *ngFor=\"let item of model | filter: filters | store:self:'storedElements' | orderBy: sort | slice: 0:limit\">\n <label>\n <span>\n <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template> \n </span>\n <input *ngIf=\"!readOnly\" type=\"checkbox\" \n [disabled]=\"isDisabled(item)\"\n [checked]=\"isChecked(item)\"\n (change)=\"onCheck.emit({item:item, checked:$event.target.checked})\"/>\n </label>\n </li>\n </ul>\n\n</div>\n",
|
|
1587
|
+
styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{border-top:1px solid #ddd;width:-webkit-fill-available;width:-moz-available;display:flex}ul li:not(.checked){color:#939393}ul li.disabled{pointer-events:none}ul li.select-all{background-color:#ff83520a;color:#5b6472}ul li.select-all span{text-align:right}ul li label{cursor:pointer;width:100%;display:flex}ul li label:hover{background-color:#eaedf2}ul li label span{padding:7px 15px;width:100%}ul li label input[type=checkbox]{margin-right:15px;-ms-grid-row-align:center;align-self:center}"]
|
|
1588
|
+
}] }
|
|
1589
|
+
];
|
|
1590
|
+
/** @nocollapse */
|
|
1591
|
+
ListCheckableComponent.ctorParameters = function () { return [
|
|
1592
|
+
{ type: Injector }
|
|
1593
|
+
]; };
|
|
1594
|
+
ListCheckableComponent.propDecorators = {
|
|
1595
|
+
model: [{ type: Input }],
|
|
1596
|
+
filters: [{ type: Input }],
|
|
1597
|
+
sort: [{ type: Input }],
|
|
1598
|
+
limit: [{ type: Input }],
|
|
1599
|
+
noResultsLabel: [{ type: Input }],
|
|
1600
|
+
readOnly: [{ type: Input }],
|
|
1601
|
+
onCheck: [{ type: Output }],
|
|
1602
|
+
listChange: [{ type: Output }],
|
|
1603
|
+
scrolledDown: [{ type: Output }],
|
|
1604
|
+
templateRef: [{ type: ContentChild, args: [TemplateRef, { static: false },] }],
|
|
1605
|
+
areAllChecked: [{ type: Input }],
|
|
1606
|
+
isChecked: [{ type: Input }],
|
|
1607
|
+
isDisabled: [{ type: Input }],
|
|
1608
|
+
ngClass: [{ type: Input }]
|
|
1609
|
+
};
|
|
1610
|
+
return ListCheckableComponent;
|
|
1611
|
+
}(OdeComponent));
|
|
1612
|
+
if (false) {
|
|
1613
|
+
/** @type {?} */
|
|
1614
|
+
ListCheckableComponent.prototype.model;
|
|
1615
|
+
/** @type {?} */
|
|
1616
|
+
ListCheckableComponent.prototype.filters;
|
|
1617
|
+
/** @type {?} */
|
|
1618
|
+
ListCheckableComponent.prototype.sort;
|
|
1619
|
+
/** @type {?} */
|
|
1620
|
+
ListCheckableComponent.prototype.limit;
|
|
1621
|
+
/** @type {?} */
|
|
1622
|
+
ListCheckableComponent.prototype.noResultsLabel;
|
|
1623
|
+
/** @type {?} */
|
|
1624
|
+
ListCheckableComponent.prototype.readOnly;
|
|
1625
|
+
/** @type {?} */
|
|
1626
|
+
ListCheckableComponent.prototype.onCheck;
|
|
1627
|
+
/** @type {?} */
|
|
1628
|
+
ListCheckableComponent.prototype.listChange;
|
|
1629
|
+
/** @type {?} */
|
|
1630
|
+
ListCheckableComponent.prototype.scrolledDown;
|
|
1631
|
+
/** @type {?} */
|
|
1632
|
+
ListCheckableComponent.prototype.templateRef;
|
|
1633
|
+
/** @type {?} */
|
|
1634
|
+
ListCheckableComponent.prototype.areAllChecked;
|
|
1635
|
+
/** @type {?} */
|
|
1636
|
+
ListCheckableComponent.prototype.isChecked;
|
|
1637
|
+
/** @type {?} */
|
|
1638
|
+
ListCheckableComponent.prototype.isDisabled;
|
|
1639
|
+
/** @type {?} */
|
|
1640
|
+
ListCheckableComponent.prototype.ngClass;
|
|
1641
|
+
/** @type {?} */
|
|
1642
|
+
ListCheckableComponent.prototype.self;
|
|
1643
|
+
/** @type {?} */
|
|
1644
|
+
ListCheckableComponent.prototype._storedElements;
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1496
1647
|
/**
|
|
1497
1648
|
* @fileoverview added by tsickle
|
|
1498
1649
|
* Generated from: lib/components/message-box/message-box.component.ts
|
|
@@ -2304,7 +2455,7 @@ var MultiComboComponent = /** @class */ (function (_super) {
|
|
|
2304
2455
|
MultiComboComponent.decorators = [
|
|
2305
2456
|
{ type: Component, args: [{
|
|
2306
2457
|
selector: 'ode-multi-combo',
|
|
2307
|
-
template: "<button (click)=\"toggleVisibility()\"\n [ngClass]=\"{ opened: show }\"\n [disabled]=\"disabled\">\n {{ title }}\n</button>\n<div [ngClass]=\"{ hidden: !show }\">\n <div class=\"options\">\n <button class=\"select-all\" (click)=\"selectAll()\" *ngIf=\"!maxSelected\"\n [title]=\"labels('select.all')\">{{ labels('select.all') }}</button>\n <button class=\"deselect-all\" (click)=\"deselectAll()\"\n [title]=\"labels('deselect.all')\">{{ labels('deselect.all') }}</button>\n </div>\n <div *ngIf=\"filter\" class=\"filter\">\n <ode-search-input (onChange)=\"search.input = $event\" [attr.placeholder]=\"labels('search')\"></ode-search-input>\n </div>\n <ul>\n <li *ngFor=\"let item of _comboModel | filter: getFilter() | orderBy: orderBy | store: self:'filteredComboModel'\"\n (click)=\"toggleItem(item)\"\n [ngClass]=\"{ selected: isSelected(item) }\"\n [attr.disabled]=\"isDisabled()\">\n {{ displayItem(item) | translate }}\n </li>\n </ul>\n</div>\n",
|
|
2458
|
+
template: "<button (click)=\"toggleVisibility()\"\n [ngClass]=\"{ opened: show }\"\n [disabled]=\"disabled\"\n type=\"button\">\n {{ title }}\n</button>\n<div [ngClass]=\"{ hidden: !show }\">\n <div class=\"options\">\n <button class=\"select-all\" (click)=\"selectAll()\" *ngIf=\"!maxSelected\"\n [title]=\"labels('select.all')\" type=\"button\">{{ labels('select.all') }}</button>\n <button class=\"deselect-all\" (click)=\"deselectAll()\"\n [title]=\"labels('deselect.all')\" type=\"button\">{{ labels('deselect.all') }}</button>\n </div>\n <div *ngIf=\"filter\" class=\"filter\">\n <ode-search-input (onChange)=\"search.input = $event\" [attr.placeholder]=\"labels('search')\"></ode-search-input>\n </div>\n <ul>\n <li *ngFor=\"let item of _comboModel | filter: getFilter() | orderBy: orderBy | store: self:'filteredComboModel'\"\n (click)=\"toggleItem(item)\"\n [ngClass]=\"{ selected: isSelected(item) }\"\n [attr.disabled]=\"isDisabled()\">\n {{ displayItem(item) | translate }}\n </li>\n </ul>\n</div>\n",
|
|
2308
2459
|
host: {
|
|
2309
2460
|
'(document:click)': 'onClick($event)',
|
|
2310
2461
|
},
|
|
@@ -2795,6 +2946,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2795
2946
|
var _this = _super.call(this, injector) || this;
|
|
2796
2947
|
_this._elRef = _elRef;
|
|
2797
2948
|
_this._renderer = _renderer;
|
|
2949
|
+
/* Inputs / Outputs / View */
|
|
2950
|
+
_this.isSearchActive = false;
|
|
2951
|
+
_this.searchInput = false;
|
|
2798
2952
|
_this._delay = 200;
|
|
2799
2953
|
_this.onChange = new EventEmitter();
|
|
2800
2954
|
/* Internal logic */
|
|
@@ -2808,9 +2962,7 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2808
2962
|
function () {
|
|
2809
2963
|
return this._delay;
|
|
2810
2964
|
},
|
|
2811
|
-
|
|
2812
|
-
set: /* Inputs / Outputs / View */
|
|
2813
|
-
/**
|
|
2965
|
+
set: /**
|
|
2814
2966
|
* @param {?} d
|
|
2815
2967
|
* @return {?}
|
|
2816
2968
|
*/
|
|
@@ -2900,7 +3052,8 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2900
3052
|
SearchInputComponent.decorators = [
|
|
2901
3053
|
{ type: Component, args: [{
|
|
2902
3054
|
selector: 'ode-search-input',
|
|
2903
|
-
template: "<input type=\"search\" #searchBox (input)=\"search(searchBox.value)\"
|
|
3055
|
+
template: "<form\n *ngIf=\"searchInput\"\n class=\"search-container\"\n (ngSubmit)=\"searchSubmit()\">\n <input\n #searchBox\n class=\"search-input\"\n name=\"searchTerm\"\n type=\"search\"\n (input)=\"search(searchBox.value)\" />\n <button class=\"search-button\">\n <i class=\"fa fa-search is-size-4 search-icon\"></i>\n </button>\n</form>\n\n<input *ngIf=\"!searchInput\" type=\"search\" #searchBox (input)=\"search(searchBox.value)\"/>",
|
|
3056
|
+
styles: [":host .search-container{margin:0;display:flex}:host .search-input{border:1px solid rgba(0,0,0,.1)}:host .search-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}"]
|
|
2904
3057
|
}] }
|
|
2905
3058
|
];
|
|
2906
3059
|
/** @nocollapse */
|
|
@@ -2910,6 +3063,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2910
3063
|
{ type: Renderer2 }
|
|
2911
3064
|
]; };
|
|
2912
3065
|
SearchInputComponent.propDecorators = {
|
|
3066
|
+
isSearchActive: [{ type: Input }],
|
|
3067
|
+
searchInput: [{ type: Input }],
|
|
3068
|
+
searchSubmit: [{ type: Input }],
|
|
2913
3069
|
delay: [{ type: Input }],
|
|
2914
3070
|
onChange: [{ type: Output }],
|
|
2915
3071
|
searchBox: [{ type: ViewChild, args: ['searchBox', { static: false },] }]
|
|
@@ -2917,6 +3073,12 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2917
3073
|
return SearchInputComponent;
|
|
2918
3074
|
}(OdeComponent));
|
|
2919
3075
|
if (false) {
|
|
3076
|
+
/** @type {?} */
|
|
3077
|
+
SearchInputComponent.prototype.isSearchActive;
|
|
3078
|
+
/** @type {?} */
|
|
3079
|
+
SearchInputComponent.prototype.searchInput;
|
|
3080
|
+
/** @type {?} */
|
|
3081
|
+
SearchInputComponent.prototype.searchSubmit;
|
|
2920
3082
|
/**
|
|
2921
3083
|
* @type {?}
|
|
2922
3084
|
* @private
|
|
@@ -5001,6 +5163,83 @@ function clickOn(el) {
|
|
|
5001
5163
|
return el.triggerEventHandler('click', null);
|
|
5002
5164
|
}
|
|
5003
5165
|
|
|
5166
|
+
/**
|
|
5167
|
+
* @fileoverview added by tsickle
|
|
5168
|
+
* Generated from: lib/components/dropdown/dropdown.component.ts
|
|
5169
|
+
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
5170
|
+
*/
|
|
5171
|
+
/**
|
|
5172
|
+
* DropdownComponent is an alternative to the MonoSelectComponent.
|
|
5173
|
+
* Accept everything inside <ng-content> but should work with <ode-list> component
|
|
5174
|
+
*
|
|
5175
|
+
* Simple Dropdown Component without search:
|
|
5176
|
+
* [isSearchActive] can be set to false to disable search input in <ode-list>
|
|
5177
|
+
* ```
|
|
5178
|
+
* <ode-dropdown
|
|
5179
|
+
* [name]="option_name"
|
|
5180
|
+
* [isDropdownOpened]="a_boolean"
|
|
5181
|
+
* (onDropdown)="toggle_func"
|
|
5182
|
+
* >
|
|
5183
|
+
* <ode-list
|
|
5184
|
+
* [model]="model"
|
|
5185
|
+
* [filters]="filters"
|
|
5186
|
+
* (onSelect)="func_to_select_elem($event)"
|
|
5187
|
+
* (inputChange)="a_string_for_input_value = $event"
|
|
5188
|
+
* noResultsLabel="text_to_display"
|
|
5189
|
+
* searchPlaceholder="default_placeholder_text"
|
|
5190
|
+
* >
|
|
5191
|
+
* <ng-template let-item>
|
|
5192
|
+
* <div>{{ item.name }}</div>
|
|
5193
|
+
* </ng-template>
|
|
5194
|
+
* </ode-list>
|
|
5195
|
+
* </ode-dropdown>
|
|
5196
|
+
* `̀``
|
|
5197
|
+
*/
|
|
5198
|
+
var DropdownComponent = /** @class */ (function (_super) {
|
|
5199
|
+
__extends(DropdownComponent, _super);
|
|
5200
|
+
function DropdownComponent(injector) {
|
|
5201
|
+
var _this = _super.call(this, injector) || this;
|
|
5202
|
+
_this.name = '';
|
|
5203
|
+
_this.isDropdownOpened = false;
|
|
5204
|
+
_this.onDropdown = new EventEmitter();
|
|
5205
|
+
return _this;
|
|
5206
|
+
}
|
|
5207
|
+
/**
|
|
5208
|
+
* @return {?}
|
|
5209
|
+
*/
|
|
5210
|
+
DropdownComponent.prototype.ngOnInit = /**
|
|
5211
|
+
* @return {?}
|
|
5212
|
+
*/
|
|
5213
|
+
function () {
|
|
5214
|
+
_super.prototype.ngOnInit.call(this);
|
|
5215
|
+
};
|
|
5216
|
+
DropdownComponent.decorators = [
|
|
5217
|
+
{ type: Component, args: [{
|
|
5218
|
+
selector: 'ode-dropdown',
|
|
5219
|
+
template: "<div class=\"dropdown\" [ngClass]=\"isDropdownOpened ? 'open' : ''\">\n <button (click)=\"onDropdown.emit()\" class=\"dropdown-trigger\">\n <span class=\"cell-ellipsis\">{{ name }}</span> <i class=\"fonticon arrow-select\"></i>\n </button>\n <div class=\"dropdown-list\">\n <ng-content></ng-content>\n </div>\n</div>\n",
|
|
5220
|
+
styles: [".dropdown{position:relative;width:230px;box-sizing:border-box}.dropdown *{box-sizing:border-box}.dropdown-trigger{cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;color:#4a4a4a;text-transform:uppercase;text-align:left;width:100%;border-radius:8px;border:1px solid #7a7a7a;background-color:#fff}.dropdown-trigger>span{display:inline-block;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-trigger i.arrow-select{display:inline-block;float:none!important;padding-left:0;transform:rotate(180deg);transform-origin:center center}.dropdown-list{display:none;position:absolute;overflow:hidden;z-index:2;top:100%;left:0;right:0;width:316px;box-shadow:0 4px 12px 0 rgba(0,0,0,.15);border-radius:8px;background-color:#fff}.dropdown::ng-deep ode-list li{justify-content:flex-start}.dropdown::ng-deep ode-list input[type=search]{padding:12px 16px}.dropdown.open .dropdown-list{display:block}.dropdown.open i.arrow-select{transform:rotate(0)}"]
|
|
5221
|
+
}] }
|
|
5222
|
+
];
|
|
5223
|
+
/** @nocollapse */
|
|
5224
|
+
DropdownComponent.ctorParameters = function () { return [
|
|
5225
|
+
{ type: Injector }
|
|
5226
|
+
]; };
|
|
5227
|
+
DropdownComponent.propDecorators = {
|
|
5228
|
+
name: [{ type: Input }],
|
|
5229
|
+
isDropdownOpened: [{ type: Input }],
|
|
5230
|
+
onDropdown: [{ type: Output }]
|
|
5231
|
+
};
|
|
5232
|
+
return DropdownComponent;
|
|
5233
|
+
}(OdeComponent));
|
|
5234
|
+
if (false) {
|
|
5235
|
+
/** @type {?} */
|
|
5236
|
+
DropdownComponent.prototype.name;
|
|
5237
|
+
/** @type {?} */
|
|
5238
|
+
DropdownComponent.prototype.isDropdownOpened;
|
|
5239
|
+
/** @type {?} */
|
|
5240
|
+
DropdownComponent.prototype.onDropdown;
|
|
5241
|
+
}
|
|
5242
|
+
|
|
5004
5243
|
/**
|
|
5005
5244
|
* @fileoverview added by tsickle
|
|
5006
5245
|
* Generated from: lib/ngx-ode-ui.module.ts
|
|
@@ -5049,6 +5288,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5049
5288
|
LightBoxComponent,
|
|
5050
5289
|
LightboxConfirmComponent,
|
|
5051
5290
|
ListComponent,
|
|
5291
|
+
ListCheckableComponent,
|
|
5052
5292
|
MonoSelectComponent,
|
|
5053
5293
|
MultiSelectComponent,
|
|
5054
5294
|
MultiComboComponent,
|
|
@@ -5083,7 +5323,8 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5083
5323
|
LocalizedDatePipe,
|
|
5084
5324
|
BytesPipe,
|
|
5085
5325
|
KeysPipe,
|
|
5086
|
-
LengthPipe
|
|
5326
|
+
LengthPipe,
|
|
5327
|
+
DropdownComponent
|
|
5087
5328
|
],
|
|
5088
5329
|
imports: [
|
|
5089
5330
|
CommonModule,
|
|
@@ -5100,6 +5341,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5100
5341
|
LightBoxComponent,
|
|
5101
5342
|
LightboxConfirmComponent,
|
|
5102
5343
|
ListComponent,
|
|
5344
|
+
ListCheckableComponent,
|
|
5103
5345
|
MonoSelectComponent,
|
|
5104
5346
|
MultiSelectComponent,
|
|
5105
5347
|
MultiComboComponent,
|
|
@@ -5119,6 +5361,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5119
5361
|
SpinnerCubeComponent,
|
|
5120
5362
|
PagerComponent,
|
|
5121
5363
|
EllipsisComponent,
|
|
5364
|
+
DropdownComponent,
|
|
5122
5365
|
// directives
|
|
5123
5366
|
AnchorDirective,
|
|
5124
5367
|
DynamicTemplateDirective,
|
|
@@ -5155,5 +5398,5 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5155
5398
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
5156
5399
|
*/
|
|
5157
5400
|
|
|
5158
|
-
export { AnchorDirective, BytesPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, ComponentDescriptor, DatepickerComponent, DragAndDropFilesDirective, DynamicComponentDirective, DynamicModuleImportsService, DynamicTemplateDirective, EllipsisComponent, FilterPipe, FlattenObjectArrayPipe, FormErrorsComponent, FormFieldComponent, InputFileService, ItemTreeComponent, KeysPipe, LabelsService, LengthPipe, LightBoxComponent, LightboxConfirmComponent, LimitPipe, ListComponent, LocalizedDatePipe, MessageBoxComponent, MessageStickerComponent, MonoSelectComponent, MultiComboComponent, MultiSelectComponent, NgxOdeUiModule, ObjectURLDirective, OrderPipe, PagerComponent, PanelSectionComponent, PortalComponent, PushPanelComponent, SearchInputComponent, SideLayoutComponent, SidePanelComponent, SimpleSelectComponent, SpinnerCubeComponent, SpinnerService, StepComponent, StorePipe, TooltipComponent, UNITS, UploadFilesComponent, WizardComponent, clickOn, getText, getUnit, icons, removeAccents, standardise, toDecimal, trim };
|
|
5401
|
+
export { AnchorDirective, BytesPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, ComponentDescriptor, DatepickerComponent, DragAndDropFilesDirective, DynamicComponentDirective, DynamicModuleImportsService, DynamicTemplateDirective, EllipsisComponent, FilterPipe, FlattenObjectArrayPipe, FormErrorsComponent, FormFieldComponent, InputFileService, ItemTreeComponent, KeysPipe, LabelsService, LengthPipe, LightBoxComponent, LightboxConfirmComponent, LimitPipe, ListCheckableComponent, ListComponent, LocalizedDatePipe, MessageBoxComponent, MessageStickerComponent, MonoSelectComponent, MultiComboComponent, MultiSelectComponent, NgxOdeUiModule, ObjectURLDirective, OrderPipe, PagerComponent, PanelSectionComponent, PortalComponent, PushPanelComponent, SearchInputComponent, SideLayoutComponent, SidePanelComponent, SimpleSelectComponent, SpinnerCubeComponent, SpinnerService, StepComponent, StorePipe, TooltipComponent, UNITS, UploadFilesComponent, WizardComponent, clickOn, getText, getUnit, icons, removeAccents, standardise, toDecimal, trim, DropdownComponent as ɵa };
|
|
5159
5402
|
//# sourceMappingURL=ngx-ode-ui.js.map
|