ngx-ode-ui 3.12.0-dev.1 → 3.12.0-dev.13
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 +261 -9
- 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 +18 -4
- 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 +18 -4
- 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 +247 -8
- package/fesm2015/ngx-ode-ui.js.map +1 -1
- package/fesm5/ngx-ode-ui.js +260 -10
- 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 +5 -1
- 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
|
@@ -1380,9 +1380,11 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1380
1380
|
/* Store pipe */
|
|
1381
1381
|
_this.self = _this;
|
|
1382
1382
|
_this._storedElements = [];
|
|
1383
|
-
_this.model = [];
|
|
1384
1383
|
_this.searchPlaceholder = 'search';
|
|
1385
1384
|
_this.noResultsLabel = 'list.results.no.items';
|
|
1385
|
+
_this.placeholder = 'list.placeholder';
|
|
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,8 +1427,8 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1425
1427
|
ListComponent.decorators = [
|
|
1426
1428
|
{ type: Component, args: [{
|
|
1427
1429
|
selector: 'ode-list',
|
|
1428
|
-
template: "<ode-search-input
|
|
1429
|
-
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
|
+
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 <ul *ngIf=\"!model\">\n <li class=\"placeholder\">{{ placeholder | translate }}</li>\n </ul>\n</div>\n",
|
|
1431
|
+
styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{cursor:pointer;border-top:1px solid #ddd;padding:10px}ul li.no-results{padding:50px;text-align:center;font-style:italic}ul li.no-results:hover{cursor:default!important;background-color:inherit!important}ul li.placeholder{color:#aaa;padding:50px;text-align:center}ul li.placeholder:hover{cursor:default!important;background-color:inherit!important}ul li.disabled{pointer-events:none}.list-wrapper{min-height:30vh}"]
|
|
1430
1432
|
}] }
|
|
1431
1433
|
];
|
|
1432
1434
|
/** @nocollapse */
|
|
@@ -1441,6 +1443,10 @@ var ListComponent = /** @class */ (function (_super) {
|
|
|
1441
1443
|
limit: [{ type: Input }],
|
|
1442
1444
|
searchPlaceholder: [{ type: Input }],
|
|
1443
1445
|
noResultsLabel: [{ type: Input }],
|
|
1446
|
+
placeholder: [{ type: Input }],
|
|
1447
|
+
isSearchActive: [{ type: Input }],
|
|
1448
|
+
searchInput: [{ type: Input }],
|
|
1449
|
+
searchSubmit: [{ type: Input }],
|
|
1444
1450
|
inputChange: [{ type: Output }],
|
|
1445
1451
|
onSelect: [{ type: Output }],
|
|
1446
1452
|
listChange: [{ type: Output }],
|
|
@@ -1472,6 +1478,14 @@ if (false) {
|
|
|
1472
1478
|
/** @type {?} */
|
|
1473
1479
|
ListComponent.prototype.noResultsLabel;
|
|
1474
1480
|
/** @type {?} */
|
|
1481
|
+
ListComponent.prototype.placeholder;
|
|
1482
|
+
/** @type {?} */
|
|
1483
|
+
ListComponent.prototype.isSearchActive;
|
|
1484
|
+
/** @type {?} */
|
|
1485
|
+
ListComponent.prototype.searchInput;
|
|
1486
|
+
/** @type {?} */
|
|
1487
|
+
ListComponent.prototype.searchSubmit;
|
|
1488
|
+
/** @type {?} */
|
|
1475
1489
|
ListComponent.prototype.inputChange;
|
|
1476
1490
|
/** @type {?} */
|
|
1477
1491
|
ListComponent.prototype.onSelect;
|
|
@@ -1489,6 +1503,150 @@ if (false) {
|
|
|
1489
1503
|
ListComponent.prototype.ngClass;
|
|
1490
1504
|
}
|
|
1491
1505
|
|
|
1506
|
+
/**
|
|
1507
|
+
* @fileoverview added by tsickle
|
|
1508
|
+
* Generated from: lib/components/list-checkable/list-checkable.component.ts
|
|
1509
|
+
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
1510
|
+
*/
|
|
1511
|
+
var ListCheckableComponent = /** @class */ (function (_super) {
|
|
1512
|
+
__extends(ListCheckableComponent, _super);
|
|
1513
|
+
function ListCheckableComponent(injector) {
|
|
1514
|
+
var _this = _super.call(this, injector) || this;
|
|
1515
|
+
_this.model = [];
|
|
1516
|
+
_this.noResultsLabel = 'list.results.no.items';
|
|
1517
|
+
_this.readOnly = false;
|
|
1518
|
+
_this.onCheck = new EventEmitter();
|
|
1519
|
+
_this.listChange = new EventEmitter();
|
|
1520
|
+
_this.scrolledDown = new EventEmitter();
|
|
1521
|
+
_this.areAllChecked = (/**
|
|
1522
|
+
* @return {?}
|
|
1523
|
+
*/
|
|
1524
|
+
function () { return false; });
|
|
1525
|
+
_this.isChecked = (/**
|
|
1526
|
+
* @param {?=} arg
|
|
1527
|
+
* @return {?}
|
|
1528
|
+
*/
|
|
1529
|
+
function (arg) { return false; });
|
|
1530
|
+
_this.isDisabled = (/**
|
|
1531
|
+
* @param {?=} arg
|
|
1532
|
+
* @return {?}
|
|
1533
|
+
*/
|
|
1534
|
+
function (arg) { return false; });
|
|
1535
|
+
_this.ngClass = (/**
|
|
1536
|
+
* @param {?=} arg
|
|
1537
|
+
* @return {?}
|
|
1538
|
+
*/
|
|
1539
|
+
function (arg) { return ({}); });
|
|
1540
|
+
/* Store pipe */
|
|
1541
|
+
_this.self = _this;
|
|
1542
|
+
_this._storedElements = [];
|
|
1543
|
+
return _this;
|
|
1544
|
+
}
|
|
1545
|
+
Object.defineProperty(ListCheckableComponent.prototype, "storedElements", {
|
|
1546
|
+
get: /**
|
|
1547
|
+
* @return {?}
|
|
1548
|
+
*/
|
|
1549
|
+
function () {
|
|
1550
|
+
return this._storedElements;
|
|
1551
|
+
},
|
|
1552
|
+
set: /**
|
|
1553
|
+
* @param {?} list
|
|
1554
|
+
* @return {?}
|
|
1555
|
+
*/
|
|
1556
|
+
function (list) {
|
|
1557
|
+
this._storedElements = list;
|
|
1558
|
+
this.listChange.emit(list);
|
|
1559
|
+
},
|
|
1560
|
+
enumerable: true,
|
|
1561
|
+
configurable: true
|
|
1562
|
+
});
|
|
1563
|
+
/**
|
|
1564
|
+
* @param {?} checkAll
|
|
1565
|
+
* @return {?}
|
|
1566
|
+
*/
|
|
1567
|
+
ListCheckableComponent.prototype.toggleAll = /**
|
|
1568
|
+
* @param {?} checkAll
|
|
1569
|
+
* @return {?}
|
|
1570
|
+
*/
|
|
1571
|
+
function (checkAll) {
|
|
1572
|
+
var _this = this;
|
|
1573
|
+
this.model.forEach((/**
|
|
1574
|
+
* @param {?} item
|
|
1575
|
+
* @return {?}
|
|
1576
|
+
*/
|
|
1577
|
+
function (item) {
|
|
1578
|
+
/** @type {?} */
|
|
1579
|
+
var isChecked = _this.isChecked(item);
|
|
1580
|
+
if (!_this.isDisabled(item)
|
|
1581
|
+
&& ((isChecked && !checkAll) || (!isChecked && checkAll))) {
|
|
1582
|
+
_this.onCheck.emit({ item: item, checked: checkAll });
|
|
1583
|
+
}
|
|
1584
|
+
}));
|
|
1585
|
+
};
|
|
1586
|
+
ListCheckableComponent.decorators = [
|
|
1587
|
+
{ type: Component, args: [{
|
|
1588
|
+
selector: 'ode-list-checkable',
|
|
1589
|
+
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",
|
|
1590
|
+
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}"]
|
|
1591
|
+
}] }
|
|
1592
|
+
];
|
|
1593
|
+
/** @nocollapse */
|
|
1594
|
+
ListCheckableComponent.ctorParameters = function () { return [
|
|
1595
|
+
{ type: Injector }
|
|
1596
|
+
]; };
|
|
1597
|
+
ListCheckableComponent.propDecorators = {
|
|
1598
|
+
model: [{ type: Input }],
|
|
1599
|
+
filters: [{ type: Input }],
|
|
1600
|
+
sort: [{ type: Input }],
|
|
1601
|
+
limit: [{ type: Input }],
|
|
1602
|
+
noResultsLabel: [{ type: Input }],
|
|
1603
|
+
readOnly: [{ type: Input }],
|
|
1604
|
+
onCheck: [{ type: Output }],
|
|
1605
|
+
listChange: [{ type: Output }],
|
|
1606
|
+
scrolledDown: [{ type: Output }],
|
|
1607
|
+
templateRef: [{ type: ContentChild, args: [TemplateRef, { static: false },] }],
|
|
1608
|
+
areAllChecked: [{ type: Input }],
|
|
1609
|
+
isChecked: [{ type: Input }],
|
|
1610
|
+
isDisabled: [{ type: Input }],
|
|
1611
|
+
ngClass: [{ type: Input }]
|
|
1612
|
+
};
|
|
1613
|
+
return ListCheckableComponent;
|
|
1614
|
+
}(OdeComponent));
|
|
1615
|
+
if (false) {
|
|
1616
|
+
/** @type {?} */
|
|
1617
|
+
ListCheckableComponent.prototype.model;
|
|
1618
|
+
/** @type {?} */
|
|
1619
|
+
ListCheckableComponent.prototype.filters;
|
|
1620
|
+
/** @type {?} */
|
|
1621
|
+
ListCheckableComponent.prototype.sort;
|
|
1622
|
+
/** @type {?} */
|
|
1623
|
+
ListCheckableComponent.prototype.limit;
|
|
1624
|
+
/** @type {?} */
|
|
1625
|
+
ListCheckableComponent.prototype.noResultsLabel;
|
|
1626
|
+
/** @type {?} */
|
|
1627
|
+
ListCheckableComponent.prototype.readOnly;
|
|
1628
|
+
/** @type {?} */
|
|
1629
|
+
ListCheckableComponent.prototype.onCheck;
|
|
1630
|
+
/** @type {?} */
|
|
1631
|
+
ListCheckableComponent.prototype.listChange;
|
|
1632
|
+
/** @type {?} */
|
|
1633
|
+
ListCheckableComponent.prototype.scrolledDown;
|
|
1634
|
+
/** @type {?} */
|
|
1635
|
+
ListCheckableComponent.prototype.templateRef;
|
|
1636
|
+
/** @type {?} */
|
|
1637
|
+
ListCheckableComponent.prototype.areAllChecked;
|
|
1638
|
+
/** @type {?} */
|
|
1639
|
+
ListCheckableComponent.prototype.isChecked;
|
|
1640
|
+
/** @type {?} */
|
|
1641
|
+
ListCheckableComponent.prototype.isDisabled;
|
|
1642
|
+
/** @type {?} */
|
|
1643
|
+
ListCheckableComponent.prototype.ngClass;
|
|
1644
|
+
/** @type {?} */
|
|
1645
|
+
ListCheckableComponent.prototype.self;
|
|
1646
|
+
/** @type {?} */
|
|
1647
|
+
ListCheckableComponent.prototype._storedElements;
|
|
1648
|
+
}
|
|
1649
|
+
|
|
1492
1650
|
/**
|
|
1493
1651
|
* @fileoverview added by tsickle
|
|
1494
1652
|
* Generated from: lib/components/message-box/message-box.component.ts
|
|
@@ -2300,7 +2458,7 @@ var MultiComboComponent = /** @class */ (function (_super) {
|
|
|
2300
2458
|
MultiComboComponent.decorators = [
|
|
2301
2459
|
{ type: Component, args: [{
|
|
2302
2460
|
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",
|
|
2461
|
+
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
2462
|
host: {
|
|
2305
2463
|
'(document:click)': 'onClick($event)',
|
|
2306
2464
|
},
|
|
@@ -2791,6 +2949,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2791
2949
|
var _this = _super.call(this, injector) || this;
|
|
2792
2950
|
_this._elRef = _elRef;
|
|
2793
2951
|
_this._renderer = _renderer;
|
|
2952
|
+
/* Inputs / Outputs / View */
|
|
2953
|
+
_this.isSearchActive = false;
|
|
2954
|
+
_this.searchInput = false;
|
|
2794
2955
|
_this._delay = 200;
|
|
2795
2956
|
_this.onChange = new EventEmitter();
|
|
2796
2957
|
/* Internal logic */
|
|
@@ -2804,9 +2965,7 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2804
2965
|
function () {
|
|
2805
2966
|
return this._delay;
|
|
2806
2967
|
},
|
|
2807
|
-
|
|
2808
|
-
set: /* Inputs / Outputs / View */
|
|
2809
|
-
/**
|
|
2968
|
+
set: /**
|
|
2810
2969
|
* @param {?} d
|
|
2811
2970
|
* @return {?}
|
|
2812
2971
|
*/
|
|
@@ -2896,7 +3055,8 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2896
3055
|
SearchInputComponent.decorators = [
|
|
2897
3056
|
{ type: Component, args: [{
|
|
2898
3057
|
selector: 'ode-search-input',
|
|
2899
|
-
template: "<input type=\"search\" #searchBox (input)=\"search(searchBox.value)\"
|
|
3058
|
+
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)\"/> -->",
|
|
3059
|
+
styles: [":host .search-container{margin:0;display:flex}:host .search-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}"]
|
|
2900
3060
|
}] }
|
|
2901
3061
|
];
|
|
2902
3062
|
/** @nocollapse */
|
|
@@ -2906,6 +3066,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2906
3066
|
{ type: Renderer2 }
|
|
2907
3067
|
]; };
|
|
2908
3068
|
SearchInputComponent.propDecorators = {
|
|
3069
|
+
isSearchActive: [{ type: Input }],
|
|
3070
|
+
searchInput: [{ type: Input }],
|
|
3071
|
+
searchSubmit: [{ type: Input }],
|
|
2909
3072
|
delay: [{ type: Input }],
|
|
2910
3073
|
onChange: [{ type: Output }],
|
|
2911
3074
|
searchBox: [{ type: ViewChild, args: ['searchBox', { static: false },] }]
|
|
@@ -2913,6 +3076,12 @@ var SearchInputComponent = /** @class */ (function (_super) {
|
|
|
2913
3076
|
return SearchInputComponent;
|
|
2914
3077
|
}(OdeComponent));
|
|
2915
3078
|
if (false) {
|
|
3079
|
+
/** @type {?} */
|
|
3080
|
+
SearchInputComponent.prototype.isSearchActive;
|
|
3081
|
+
/** @type {?} */
|
|
3082
|
+
SearchInputComponent.prototype.searchInput;
|
|
3083
|
+
/** @type {?} */
|
|
3084
|
+
SearchInputComponent.prototype.searchSubmit;
|
|
2916
3085
|
/**
|
|
2917
3086
|
* @type {?}
|
|
2918
3087
|
* @private
|
|
@@ -4997,6 +5166,83 @@ function clickOn(el) {
|
|
|
4997
5166
|
return el.triggerEventHandler('click', null);
|
|
4998
5167
|
}
|
|
4999
5168
|
|
|
5169
|
+
/**
|
|
5170
|
+
* @fileoverview added by tsickle
|
|
5171
|
+
* Generated from: lib/components/dropdown/dropdown.component.ts
|
|
5172
|
+
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
5173
|
+
*/
|
|
5174
|
+
/**
|
|
5175
|
+
* DropdownComponent is an alternative to the MonoSelectComponent.
|
|
5176
|
+
* Accept everything inside <ng-content> but should work with <ode-list> component
|
|
5177
|
+
*
|
|
5178
|
+
* Simple Dropdown Component without search:
|
|
5179
|
+
* [isSearchActive] can be set to false to disable search input in <ode-list>
|
|
5180
|
+
* ```
|
|
5181
|
+
* <ode-dropdown
|
|
5182
|
+
* [name]="option_name"
|
|
5183
|
+
* [isDropdownOpened]="a_boolean"
|
|
5184
|
+
* (onDropdown)="toggle_func"
|
|
5185
|
+
* >
|
|
5186
|
+
* <ode-list
|
|
5187
|
+
* [model]="model"
|
|
5188
|
+
* [filters]="filters"
|
|
5189
|
+
* (onSelect)="func_to_select_elem($event)"
|
|
5190
|
+
* (inputChange)="a_string_for_input_value = $event"
|
|
5191
|
+
* noResultsLabel="text_to_display"
|
|
5192
|
+
* searchPlaceholder="default_placeholder_text"
|
|
5193
|
+
* >
|
|
5194
|
+
* <ng-template let-item>
|
|
5195
|
+
* <div>{{ item.name }}</div>
|
|
5196
|
+
* </ng-template>
|
|
5197
|
+
* </ode-list>
|
|
5198
|
+
* </ode-dropdown>
|
|
5199
|
+
* `̀``
|
|
5200
|
+
*/
|
|
5201
|
+
var DropdownComponent = /** @class */ (function (_super) {
|
|
5202
|
+
__extends(DropdownComponent, _super);
|
|
5203
|
+
function DropdownComponent(injector) {
|
|
5204
|
+
var _this = _super.call(this, injector) || this;
|
|
5205
|
+
_this.name = '';
|
|
5206
|
+
_this.isDropdownOpened = false;
|
|
5207
|
+
_this.onDropdown = new EventEmitter();
|
|
5208
|
+
return _this;
|
|
5209
|
+
}
|
|
5210
|
+
/**
|
|
5211
|
+
* @return {?}
|
|
5212
|
+
*/
|
|
5213
|
+
DropdownComponent.prototype.ngOnInit = /**
|
|
5214
|
+
* @return {?}
|
|
5215
|
+
*/
|
|
5216
|
+
function () {
|
|
5217
|
+
_super.prototype.ngOnInit.call(this);
|
|
5218
|
+
};
|
|
5219
|
+
DropdownComponent.decorators = [
|
|
5220
|
+
{ type: Component, args: [{
|
|
5221
|
+
selector: 'ode-dropdown',
|
|
5222
|
+
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",
|
|
5223
|
+
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)}"]
|
|
5224
|
+
}] }
|
|
5225
|
+
];
|
|
5226
|
+
/** @nocollapse */
|
|
5227
|
+
DropdownComponent.ctorParameters = function () { return [
|
|
5228
|
+
{ type: Injector }
|
|
5229
|
+
]; };
|
|
5230
|
+
DropdownComponent.propDecorators = {
|
|
5231
|
+
name: [{ type: Input }],
|
|
5232
|
+
isDropdownOpened: [{ type: Input }],
|
|
5233
|
+
onDropdown: [{ type: Output }]
|
|
5234
|
+
};
|
|
5235
|
+
return DropdownComponent;
|
|
5236
|
+
}(OdeComponent));
|
|
5237
|
+
if (false) {
|
|
5238
|
+
/** @type {?} */
|
|
5239
|
+
DropdownComponent.prototype.name;
|
|
5240
|
+
/** @type {?} */
|
|
5241
|
+
DropdownComponent.prototype.isDropdownOpened;
|
|
5242
|
+
/** @type {?} */
|
|
5243
|
+
DropdownComponent.prototype.onDropdown;
|
|
5244
|
+
}
|
|
5245
|
+
|
|
5000
5246
|
/**
|
|
5001
5247
|
* @fileoverview added by tsickle
|
|
5002
5248
|
* Generated from: lib/ngx-ode-ui.module.ts
|
|
@@ -5045,6 +5291,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5045
5291
|
LightBoxComponent,
|
|
5046
5292
|
LightboxConfirmComponent,
|
|
5047
5293
|
ListComponent,
|
|
5294
|
+
ListCheckableComponent,
|
|
5048
5295
|
MonoSelectComponent,
|
|
5049
5296
|
MultiSelectComponent,
|
|
5050
5297
|
MultiComboComponent,
|
|
@@ -5079,7 +5326,8 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5079
5326
|
LocalizedDatePipe,
|
|
5080
5327
|
BytesPipe,
|
|
5081
5328
|
KeysPipe,
|
|
5082
|
-
LengthPipe
|
|
5329
|
+
LengthPipe,
|
|
5330
|
+
DropdownComponent
|
|
5083
5331
|
],
|
|
5084
5332
|
imports: [
|
|
5085
5333
|
CommonModule,
|
|
@@ -5096,6 +5344,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5096
5344
|
LightBoxComponent,
|
|
5097
5345
|
LightboxConfirmComponent,
|
|
5098
5346
|
ListComponent,
|
|
5347
|
+
ListCheckableComponent,
|
|
5099
5348
|
MonoSelectComponent,
|
|
5100
5349
|
MultiSelectComponent,
|
|
5101
5350
|
MultiComboComponent,
|
|
@@ -5115,6 +5364,7 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5115
5364
|
SpinnerCubeComponent,
|
|
5116
5365
|
PagerComponent,
|
|
5117
5366
|
EllipsisComponent,
|
|
5367
|
+
DropdownComponent,
|
|
5118
5368
|
// directives
|
|
5119
5369
|
AnchorDirective,
|
|
5120
5370
|
DynamicTemplateDirective,
|
|
@@ -5151,5 +5401,5 @@ var NgxOdeUiModule = /** @class */ (function () {
|
|
|
5151
5401
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
5152
5402
|
*/
|
|
5153
5403
|
|
|
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 };
|
|
5404
|
+
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
5405
|
//# sourceMappingURL=ngx-ode-ui.js.map
|