ngx-ode-ui 3.12.0-dev.1 → 3.12.0-dev.10
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 +256 -7
- 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 +13 -2
- 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 +13 -2
- 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 +242 -6
- package/fesm2015/ngx-ode-ui.js.map +1 -1
- package/fesm5/ngx-ode-ui.js +255 -8
- 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 +3 -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,6 +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.isSearchActive = true;
|
|
1387
|
+
_this.searchInput = false;
|
|
1386
1388
|
_this.inputChange = new EventEmitter();
|
|
1387
1389
|
_this.onSelect = new EventEmitter();
|
|
1388
1390
|
_this.listChange = new EventEmitter();
|
|
@@ -1425,7 +1427,7 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1425
1427
|
ListComponent.decorators = [
|
|
1426
1428
|
{ type: Component, args: [{
|
|
1427
1429
|
selector: 'ode-list',
|
|
1428
|
-
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",
|
|
1429
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}"]
|
|
1430
1432
|
}] }
|
|
1431
1433
|
];
|
|
@@ -1441,6 +1443,9 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1441
1443
|
limit: [{ type: Input }],
|
|
1442
1444
|
searchPlaceholder: [{ type: Input }],
|
|
1443
1445
|
noResultsLabel: [{ type: Input }],
|
|
1446
|
+
isSearchActive: [{ type: Input }],
|
|
1447
|
+
searchInput: [{ type: Input }],
|
|
1448
|
+
searchSubmit: [{ type: Input }],
|
|
1444
1449
|
inputChange: [{ type: Output }],
|
|
1445
1450
|
onSelect: [{ type: Output }],
|
|
1446
1451
|
listChange: [{ type: Output }],
|
|
@@ -1472,6 +1477,12 @@ if (false) {
|
|
|
1472
1477
|
/** @type {?} */
|
|
1473
1478
|
ListComponent.prototype.noResultsLabel;
|
|
1474
1479
|
/** @type {?} */
|
|
1480
|
+
ListComponent.prototype.isSearchActive;
|
|
1481
|
+
/** @type {?} */
|
|
1482
|
+
ListComponent.prototype.searchInput;
|
|
1483
|
+
/** @type {?} */
|
|
1484
|
+
ListComponent.prototype.searchSubmit;
|
|
1485
|
+
/** @type {?} */
|
|
1475
1486
|
ListComponent.prototype.inputChange;
|
|
1476
1487
|
/** @type {?} */
|
|
1477
1488
|
ListComponent.prototype.onSelect;
|
|
@@ -1489,6 +1500,150 @@ if (false) {
|
|
|
1489
1500
|
ListComponent.prototype.ngClass;
|
|
1490
1501
|
}
|
|
1491
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
|
+
|
|
1492
1647
|
/**
|
|
1493
1648
|
* @fileoverview added by tsickle
|
|
1494
1649
|
* Generated from: lib/components/message-box/message-box.component.ts
|
|
@@ -2300,7 +2455,7 @@ var MultiComboComponent = /** @class */ (function (_super) {
|
|
|
2300
2455
|
MultiComboComponent.decorators = [
|
|
2301
2456
|
{ type: Component, args: [{
|
|
2302
2457
|
selector: 'ode-multi-combo',
|
|
2303
|
-
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",
|
|
2304
2459
|
host: {
|
|
2305
2460
|
'(document:click)': 'onClick($event)',
|
|
2306
2461
|
},
|
|
@@ -2791,6 +2946,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2791
2946
|
var _this = _super.call(this, injector) || this;
|
|
2792
2947
|
_this._elRef = _elRef;
|
|
2793
2948
|
_this._renderer = _renderer;
|
|
2949
|
+
/* Inputs / Outputs / View */
|
|
2950
|
+
_this.isSearchActive = false;
|
|
2951
|
+
_this.searchInput = false;
|
|
2794
2952
|
_this._delay = 200;
|
|
2795
2953
|
_this.onChange = new EventEmitter();
|
|
2796
2954
|
/* Internal logic */
|
|
@@ -2804,9 +2962,7 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2804
2962
|
function () {
|
|
2805
2963
|
return this._delay;
|
|
2806
2964
|
},
|
|
2807
|
-
|
|
2808
|
-
set: /* Inputs / Outputs / View */
|
|
2809
|
-
/**
|
|
2965
|
+
set: /**
|
|
2810
2966
|
* @param {?} d
|
|
2811
2967
|
* @return {?}
|
|
2812
2968
|
*/
|
|
@@ -2896,7 +3052,8 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2896
3052
|
SearchInputComponent.decorators = [
|
|
2897
3053
|
{ type: Component, args: [{
|
|
2898
3054
|
selector: 'ode-search-input',
|
|
2899
|
-
template: "<input type=\"search\" #searchBox (input)=\"search(searchBox.value)\"
|
|
3055
|
+
template: "<form\n class=\"search-container\"\n (ngSubmit)=\"searchInput && 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\" *ngIf=\"searchInput\">\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-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}"]
|
|
2900
3057
|
}] }
|
|
2901
3058
|
];
|
|
2902
3059
|
/** @nocollapse */
|
|
@@ -2906,6 +3063,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2906
3063
|
{ type: Renderer2 }
|
|
2907
3064
|
]; };
|
|
2908
3065
|
SearchInputComponent.propDecorators = {
|
|
3066
|
+
isSearchActive: [{ type: Input }],
|
|
3067
|
+
searchInput: [{ type: Input }],
|
|
3068
|
+
searchSubmit: [{ type: Input }],
|
|
2909
3069
|
delay: [{ type: Input }],
|
|
2910
3070
|
onChange: [{ type: Output }],
|
|
2911
3071
|
searchBox: [{ type: ViewChild, args: ['searchBox', { static: false },] }]
|
|
@@ -2913,6 +3073,12 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2913
3073
|
return SearchInputComponent;
|
|
2914
3074
|
}(OdeComponent));
|
|
2915
3075
|
if (false) {
|
|
3076
|
+
/** @type {?} */
|
|
3077
|
+
SearchInputComponent.prototype.isSearchActive;
|
|
3078
|
+
/** @type {?} */
|
|
3079
|
+
SearchInputComponent.prototype.searchInput;
|
|
3080
|
+
/** @type {?} */
|
|
3081
|
+
SearchInputComponent.prototype.searchSubmit;
|
|
2916
3082
|
/**
|
|
2917
3083
|
* @type {?}
|
|
2918
3084
|
* @private
|
|
@@ -4997,6 +5163,83 @@ function clickOn(el) {
|
|
|
4997
5163
|
return el.triggerEventHandler('click', null);
|
|
4998
5164
|
}
|
|
4999
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-trigger:hover{color:#4a4a4a;border-color:#7a7a7a;background-color:#fff}.dropdown-trigger:hover i.arrow-select{color:#4a4a4a!important}.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
|
+
|
|
5000
5243
|
/**
|
|
5001
5244
|
* @fileoverview added by tsickle
|
|
5002
5245
|
* Generated from: lib/ngx-ode-ui.module.ts
|
|
@@ -5045,6 +5288,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5045
5288
|
LightBoxComponent,
|
|
5046
5289
|
LightboxConfirmComponent,
|
|
5047
5290
|
ListComponent,
|
|
5291
|
+
ListCheckableComponent,
|
|
5048
5292
|
MonoSelectComponent,
|
|
5049
5293
|
MultiSelectComponent,
|
|
5050
5294
|
MultiComboComponent,
|
|
@@ -5079,7 +5323,8 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5079
5323
|
LocalizedDatePipe,
|
|
5080
5324
|
BytesPipe,
|
|
5081
5325
|
KeysPipe,
|
|
5082
|
-
LengthPipe
|
|
5326
|
+
LengthPipe,
|
|
5327
|
+
DropdownComponent
|
|
5083
5328
|
],
|
|
5084
5329
|
imports: [
|
|
5085
5330
|
CommonModule,
|
|
@@ -5096,6 +5341,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5096
5341
|
LightBoxComponent,
|
|
5097
5342
|
LightboxConfirmComponent,
|
|
5098
5343
|
ListComponent,
|
|
5344
|
+
ListCheckableComponent,
|
|
5099
5345
|
MonoSelectComponent,
|
|
5100
5346
|
MultiSelectComponent,
|
|
5101
5347
|
MultiComboComponent,
|
|
@@ -5115,6 +5361,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5115
5361
|
SpinnerCubeComponent,
|
|
5116
5362
|
PagerComponent,
|
|
5117
5363
|
EllipsisComponent,
|
|
5364
|
+
DropdownComponent,
|
|
5118
5365
|
// directives
|
|
5119
5366
|
AnchorDirective,
|
|
5120
5367
|
DynamicTemplateDirective,
|
|
@@ -5151,5 +5398,5 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5151
5398
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
5152
5399
|
*/
|
|
5153
5400
|
|
|
5154
|
-
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 };
|
|
5155
5402
|
//# sourceMappingURL=ngx-ode-ui.js.map
|