@ngx-dummy/select-simple
Version:
A simple select component to use in Angular / Ionic projects .. (WIP) and sample app using it
112 lines (111 loc) • 12.3 kB
JavaScript
/* eslint-disable @angular-eslint/no-host-metadata-property */
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SelectItemComponent {
constructor() {
this.option = undefined;
this.selected = false;
this.disabled = false;
this.visible = true;
this.itemBg = 'transparent';
this.color = '#ddd';
this.itemSize = 25;
this.label = null;
this.optionClick = new EventEmitter();
this.height = '100%';
this.visibility = 'hidden';
this.caption = 'Empty';
}
ngOnChanges(changes) {
Object.entries(changes).forEach(([changeKey, changeVal]) => {
if (changeVal.currentValue === changeVal.previousValue)
return;
if (changeKey === 'itemSize') {
this.height = (typeof this.itemSize === 'number' ? `${this.itemSize}px` : this.itemSize) ?? '100%';
}
if (changeKey === 'visible') {
this.visibility = this.visible ? 'visible' : 'hidden';
}
if (changeKey === 'option' || changeKey === 'label') {
this.caption = this.label?.trim().length ? this.label : 'Empty';
}
});
}
onOptionClick($event) {
this.optionClick.emit({
baseEvent: $event,
option: this.option ?? (this.label || 'Nothing selected'),
});
}
}
SelectItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SelectItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SelectItemComponent, selector: "ngxd-select-item", inputs: { option: "option", selected: "selected", disabled: "disabled", visible: "visible", itemBg: "itemBg", color: "color", itemSize: "itemSize", label: "label", template: "template" }, outputs: { optionClick: "optionClick" }, host: { listeners: { "click": "onOptionClick($event)" }, properties: { "attr.role": "\"option\"", "attr.disabled": "disabled", "ngStyle": "{ \"height\": \"height\", \"visibility\": \"visibility\", \"background-color\": \"itemBg\", \"color\": \"color\" }", "class.select-item": "true", "class.item-highlight": "selected", "class.item-disabled": "disabled", "ngClass": "option?.styleClass" } }, usesOnChanges: true, ngImport: i0, template: `
<ng-container *ngIf="template; else simpleItemTmpl">
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
</ng-container>
<ng-template #simpleItemTmpl>{{ caption }}</ng-template>
`, isInline: true, styles: [":host{display:block;padding:.1rem;.item-disabled {cursor: not-allowed !important; pointer-events: none; color: var(--ngxd-disabled); -webkit-user-select: none; user-select: none;} .item-highlight:not(.item-disabled) {-webkit-user-select: none; user-select: none; cursor: pointer; pointer-events: all;}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectItemComponent, decorators: [{
type: Component,
args: [{
selector: 'ngxd-select-item',
styles: [
`
:host {
display: block;
padding: 0.1rem;
.item-disabled {
cursor: not-allowed !important;
pointer-events: none;
color: var(--ngxd-disabled);
user-select: none;
}
.item-highlight:not(.item-disabled) {
user-select: none;
cursor: pointer;
pointer-events: all;
}
}
`,
],
template: `
<ng-container *ngIf="template; else simpleItemTmpl">
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
</ng-container>
<ng-template #simpleItemTmpl>{{ caption }}</ng-template>
`,
host: {
'[attr.role]': '"option"',
'[attr.disabled]': 'disabled',
'[ngStyle]': '{ "height": "height", "visibility": "visibility", "background-color": "itemBg", "color": "color" }',
'[class.select-item]': 'true',
'[class.item-highlight]': 'selected',
'[class.item-disabled]': 'disabled',
'[ngClass]': 'option?.styleClass',
'(click)': 'onOptionClick($event)',
},
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { option: [{
type: Input
}], selected: [{
type: Input
}], disabled: [{
type: Input
}], visible: [{
type: Input
}], itemBg: [{
type: Input
}], color: [{
type: Input
}], itemSize: [{
type: Input
}], label: [{
type: Input
}], template: [{
type: Input
}], optionClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvc2VsZWN0LXNpbXBsZS9zcmMvbGliL3NlbGVjdC1pdGVtLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw4REFBOEQ7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBaUIsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUEyQ3ZJLE1BQU0sT0FBTyxtQkFBbUI7SUF4Q2hDO1FBeUNVLFdBQU0sR0FBWSxTQUFTLENBQUM7UUFDNUIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLFlBQU8sR0FBRyxJQUFJLENBQUM7UUFDZixXQUFNLEdBQUcsYUFBYSxDQUFDO1FBQ3ZCLFVBQUssR0FBRyxNQUFNLENBQUM7UUFDZixhQUFRLEdBQXVCLEVBQUUsQ0FBQztRQUNsQyxVQUFLLEdBQWtCLElBQUksQ0FBQztRQUUzQixnQkFBVyxHQUFvQyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTVFLFdBQU0sR0FBRyxNQUFNLENBQUM7UUFDaEIsZUFBVSxHQUFHLFFBQVEsQ0FBQztRQUN0QixZQUFPLEdBQUcsT0FBTyxDQUFDO0tBd0JsQjtJQXRCQSxXQUFXLENBQUMsT0FBc0I7UUFDakMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUMsRUFBRSxFQUFFO1lBQzFELElBQUksU0FBUyxDQUFDLFlBQVksS0FBSyxTQUFTLENBQUMsYUFBYTtnQkFBRSxPQUFPO1lBRS9ELElBQUksU0FBUyxLQUFLLFVBQVUsRUFBRTtnQkFDN0IsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLE9BQU8sSUFBSSxDQUFDLFFBQVEsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksTUFBTSxDQUFDO2FBQ25HO1lBQ0QsSUFBSSxTQUFTLEtBQUssU0FBUyxFQUFFO2dCQUM1QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO2FBQ3REO1lBQ0QsSUFBSSxTQUFTLEtBQUssUUFBUSxJQUFJLFNBQVMsS0FBSyxPQUFPLEVBQUU7Z0JBQ3BELElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQzthQUNoRTtRQUNGLENBQUMsQ0FBQyxDQUFDO0lBQ0osQ0FBQztJQUVELGFBQWEsQ0FBQyxNQUFrQjtRQUMvQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztZQUNyQixTQUFTLEVBQUUsTUFBTTtZQUNqQixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksa0JBQWtCLENBQUM7U0FDekQsQ0FBQyxDQUFDO0lBQ0osQ0FBQzs7aUhBckNXLG1CQUFtQjtxR0FBbkIsbUJBQW1CLDJyQkFsQnJCOzs7OztFQUtUOzRGQWFXLG1CQUFtQjtrQkF4Qy9CLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsTUFBTSxFQUFFO3dCQUNQOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCQztxQkFDRDtvQkFDRCxRQUFRLEVBQUU7Ozs7O0VBS1Q7b0JBQ0QsSUFBSSxFQUFFO3dCQUNMLGFBQWEsRUFBRSxVQUFVO3dCQUN6QixpQkFBaUIsRUFBRSxVQUFVO3dCQUM3QixXQUFXLEVBQUUsb0dBQW9HO3dCQUNqSCxxQkFBcUIsRUFBRSxNQUFNO3dCQUM3Qix3QkFBd0IsRUFBRSxVQUFVO3dCQUNwQyx1QkFBdUIsRUFBRSxVQUFVO3dCQUNuQyxXQUFXLEVBQUUsb0JBQW9CO3dCQUNqQyxTQUFTLEVBQUUsdUJBQXVCO3FCQUNsQztvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDL0M7OEJBRVMsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBAYW5ndWxhci1lc2xpbnQvbm8taG9zdC1tZXRhZGF0YS1wcm9wZXJ0eSAqL1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPdXRwdXQsIFNpbXBsZUNoYW5nZXMsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJT3B0aW9uLCBJT3B0aW9uQ2xpY2tFdmVudCB9IGZyb20gJy4vc2V0dGluZ3MvbW9kZWxzJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnbmd4ZC1zZWxlY3QtaXRlbScsXG5cdHN0eWxlczogW1xuXHRcdGBcblx0XHRcdDpob3N0IHtcblx0XHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHRcdHBhZGRpbmc6IDAuMXJlbTtcblx0XHRcdFx0Lml0ZW0tZGlzYWJsZWQge1xuXHRcdFx0XHRcdGN1cnNvcjogbm90LWFsbG93ZWQgIWltcG9ydGFudDtcblx0XHRcdFx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0XHRcdFx0XHRjb2xvcjogdmFyKC0tbmd4ZC1kaXNhYmxlZCk7XG5cdFx0XHRcdFx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdFx0XHRcdH1cblxuXHRcdFx0XHQuaXRlbS1oaWdobGlnaHQ6bm90KC5pdGVtLWRpc2FibGVkKSB7XG5cdFx0XHRcdFx0dXNlci1zZWxlY3Q6IG5vbmU7XG5cdFx0XHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXHRcdFx0XHRcdHBvaW50ZXItZXZlbnRzOiBhbGw7XG5cdFx0XHRcdH1cblx0XHRcdH1cblx0XHRgLFxuXHRdLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxuZy1jb250YWluZXIgKm5nSWY9XCJ0ZW1wbGF0ZTsgZWxzZSBzaW1wbGVJdGVtVG1wbFwiPlxuXHRcdFx0PG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogb3B0aW9uIH1cIj48L25nLWNvbnRhaW5lcj5cblx0XHQ8L25nLWNvbnRhaW5lcj5cblx0XHQ8bmctdGVtcGxhdGUgI3NpbXBsZUl0ZW1UbXBsPnt7IGNhcHRpb24gfX08L25nLXRlbXBsYXRlPlxuXHRgLFxuXHRob3N0OiB7XG5cdFx0J1thdHRyLnJvbGVdJzogJ1wib3B0aW9uXCInLFxuXHRcdCdbYXR0ci5kaXNhYmxlZF0nOiAnZGlzYWJsZWQnLFxuXHRcdCdbbmdTdHlsZV0nOiAneyBcImhlaWdodFwiOiBcImhlaWdodFwiLCBcInZpc2liaWxpdHlcIjogXCJ2aXNpYmlsaXR5XCIsIFwiYmFja2dyb3VuZC1jb2xvclwiOiBcIml0ZW1CZ1wiLCBcImNvbG9yXCI6IFwiY29sb3JcIiB9Jyxcblx0XHQnW2NsYXNzLnNlbGVjdC1pdGVtXSc6ICd0cnVlJyxcblx0XHQnW2NsYXNzLml0ZW0taGlnaGxpZ2h0XSc6ICdzZWxlY3RlZCcsXG5cdFx0J1tjbGFzcy5pdGVtLWRpc2FibGVkXSc6ICdkaXNhYmxlZCcsXG5cdFx0J1tuZ0NsYXNzXSc6ICdvcHRpb24/LnN0eWxlQ2xhc3MnLFxuXHRcdCcoY2xpY2spJzogJ29uT3B0aW9uQ2xpY2soJGV2ZW50KScsXG5cdH0sXG5cdGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTZWxlY3RJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcblx0QElucHV0KCkgb3B0aW9uOiBJT3B0aW9uID0gdW5kZWZpbmVkO1xuXHRASW5wdXQoKSBzZWxlY3RlZCA9IGZhbHNlO1xuXHRASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXHRASW5wdXQoKSB2aXNpYmxlID0gdHJ1ZTtcblx0QElucHV0KCkgaXRlbUJnID0gJ3RyYW5zcGFyZW50Jztcblx0QElucHV0KCkgY29sb3IgPSAnI2RkZCc7XG5cdEBJbnB1dCgpIGl0ZW1TaXplOiBudW1iZXIgfCB1bmRlZmluZWQgPSAyNTtcblx0QElucHV0KCkgbGFiZWw6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuXHRASW5wdXQoKSB0ZW1wbGF0ZT86IFRlbXBsYXRlUmVmPEhUTUxFbGVtZW50Pjtcblx0QE91dHB1dCgpIG9wdGlvbkNsaWNrOiBFdmVudEVtaXR0ZXI8SU9wdGlvbkNsaWNrRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG5cdGhlaWdodCA9ICcxMDAlJztcblx0dmlzaWJpbGl0eSA9ICdoaWRkZW4nO1xuXHRjYXB0aW9uID0gJ0VtcHR5JztcblxuXHRuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG5cdFx0T2JqZWN0LmVudHJpZXMoY2hhbmdlcykuZm9yRWFjaCgoW2NoYW5nZUtleSwgY2hhbmdlVmFsXSkgPT4ge1xuXHRcdFx0aWYgKGNoYW5nZVZhbC5jdXJyZW50VmFsdWUgPT09IGNoYW5nZVZhbC5wcmV2aW91c1ZhbHVlKSByZXR1cm47XG5cblx0XHRcdGlmIChjaGFuZ2VLZXkgPT09ICdpdGVtU2l6ZScpIHtcblx0XHRcdFx0dGhpcy5oZWlnaHQgPSAodHlwZW9mIHRoaXMuaXRlbVNpemUgPT09ICdudW1iZXInID8gYCR7dGhpcy5pdGVtU2l6ZX1weGAgOiB0aGlzLml0ZW1TaXplKSA/PyAnMTAwJSc7XG5cdFx0XHR9XG5cdFx0XHRpZiAoY2hhbmdlS2V5ID09PSAndmlzaWJsZScpIHtcblx0XHRcdFx0dGhpcy52aXNpYmlsaXR5ID0gdGhpcy52aXNpYmxlID8gJ3Zpc2libGUnIDogJ2hpZGRlbic7XG5cdFx0XHR9XG5cdFx0XHRpZiAoY2hhbmdlS2V5ID09PSAnb3B0aW9uJyB8fCBjaGFuZ2VLZXkgPT09ICdsYWJlbCcpIHtcblx0XHRcdFx0dGhpcy5jYXB0aW9uID0gdGhpcy5sYWJlbD8udHJpbSgpLmxlbmd0aCA/IHRoaXMubGFiZWwgOiAnRW1wdHknO1xuXHRcdFx0fVxuXHRcdH0pO1xuXHR9XG5cblx0b25PcHRpb25DbGljaygkZXZlbnQ6IE1vdXNlRXZlbnQpIHtcblx0XHR0aGlzLm9wdGlvbkNsaWNrLmVtaXQoe1xuXHRcdFx0YmFzZUV2ZW50OiAkZXZlbnQsXG5cdFx0XHRvcHRpb246IHRoaXMub3B0aW9uID8/ICh0aGlzLmxhYmVsIHx8ICdOb3RoaW5nIHNlbGVjdGVkJyksXG5cdFx0fSk7XG5cdH1cbn1cbiJdfQ==