@cisstech/nge
Version:
NG Essentials is a collection of libraries for Angular developers.
229 lines (221 loc) • 30.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, HostBinding, EventEmitter, ChangeDetectionStrategy, Output, TemplateRef, ContentChild, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@cisstech/nge/pipes';
import { IsTemplatePipe, IsStringPipe } from '@cisstech/nge/pipes';
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i2$1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3$1 from 'ngx-pipes';
import { NgArrayPipesModule } from 'ngx-pipes';
import { ScrollingModule } from '@angular/cdk/scrolling';
class ListItemArticleActionComponent {
constructor() {
this.clickable = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListItemArticleActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ListItemArticleActionComponent, selector: "ui-list-item-article-action", inputs: { actionTitle: "actionTitle", clickable: "clickable" }, host: { properties: { "class.clickable": "this.clickable" } }, ngImport: i0, template: "<div class=\"list-item-article-action-icon\">\n <ng-content></ng-content>\n</div>\n<div class=\"list-item-article-action-title\">\n @if (actionTitle|istemplate) {\n <ng-container *ngTemplateOutlet=\"actionTitle\" />\n } @else {\n {{actionTitle}}\n }\n</div>\n\n", styles: [":host{display:flex;align-items:center;color:var(--brand-text-secondary);margin:0;padding:0}:host:hover{background-color:rgba(var(--brand-background-secondary),.05);border-radius:.2rem}:host.clickable{cursor:pointer}.list-item-article-action-icon{max-height:18px;margin-top:4px}.list-item-article-action-icon::ng-deep>*{width:18px;height:18px;font-size:18px;object-fit:contain}.list-item-article-action-title{margin:0 8px;height:18px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.IsTemplatePipe, name: "istemplate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListItemArticleActionComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-list-item-article-action', template: "<div class=\"list-item-article-action-icon\">\n <ng-content></ng-content>\n</div>\n<div class=\"list-item-article-action-title\">\n @if (actionTitle|istemplate) {\n <ng-container *ngTemplateOutlet=\"actionTitle\" />\n } @else {\n {{actionTitle}}\n }\n</div>\n\n", styles: [":host{display:flex;align-items:center;color:var(--brand-text-secondary);margin:0;padding:0}:host:hover{background-color:rgba(var(--brand-background-secondary),.05);border-radius:.2rem}:host.clickable{cursor:pointer}.list-item-article-action-icon{max-height:18px;margin-top:4px}.list-item-article-action-icon::ng-deep>*{width:18px;height:18px;font-size:18px;object-fit:contain}.list-item-article-action-title{margin:0 8px;height:18px}\n"] }]
}], propDecorators: { actionTitle: [{
type: Input
}], clickable: [{
type: Input
}, {
type: HostBinding,
args: ['class.clickable']
}] } });
class ListItemArticleComponent {
constructor() {
this.articleTags = [];
this.didClickTag = new EventEmitter();
this.didClickTagItem = new EventEmitter();
this.didClickTitle = new EventEmitter();
this.isTagsCliclable = false;
}
ngOnInit() {
this.isTagsCliclable = this.didClickTag.observed || this.didClickTagItem.observed;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListItemArticleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: ListItemArticleComponent, selector: "ui-list-item-article", inputs: { articleTitle: "articleTitle", articleUrl: "articleUrl", articleBannerUrl: "articleBannerUrl", articleBannerAlt: "articleBannerAlt", articleIconUrl: "articleIconUrl", articleIconAlt: "articleIconAlt", articleDescription: "articleDescription", articleTags: "articleTags", articleIconTemplate: "articleIconTemplate", articleTagIconTemplate: "articleTagIconTemplate" }, outputs: { didClickTag: "didClickTag", didClickTagItem: "didClickTagItem", didClickTitle: "didClickTitle" }, ngImport: i0, template: "<article class=\"mat-elevation-z1\" [class.bordered]=\"!articleBannerUrl\">\n <img class=\"article-banner\" [src]=\"articleBannerUrl\" [alt]=\"articleBannerAlt\" *ngIf=\"articleBannerUrl\">\n <div class=\"article-content-wrapper\">\n <header class=\"article-header\">\n <div class=\"article-image\">\n <ng-container *ngIf=\"articleIconTemplate; else: noImageTemplate\">\n <ng-container *ngTemplateOutlet=\"articleIconTemplate\"></ng-container>\n </ng-container>\n <ng-template #noImageTemplate>\n <img *ngIf=\"articleIconUrl\" [src]=\"articleIconUrl\" [alt]=\"articleIconAlt\">\n </ng-template>\n </div>\n @if (articleTitle|istemplate) {\n <h3\n class=\"article-title\"\n [routerLink]=\"articleUrl\"\n (click)=\"didClickTitle.emit()\">\n <ng-container *ngTemplateOutlet=\"articleTitle\" />\n </h3>\n } @else {\n <div\n class=\"article-title\"\n [routerLink]=\"articleUrl\"\n (click)=\"didClickTitle.emit()\">\n {{articleTitle}}\n </div>\n }\n </header>\n <p class=\"article-description\">\n @if (articleDescription|istemplate) {\n <ng-container *ngTemplateOutlet=\"articleDescription\" />\n } @else {\n {{articleDescription}}\n }\n </p>\n <div class=\"article-tags\" [class.clickable]=\"isTagsCliclable\" *ngIf=\"articleTags?.length\">\n @for (tag of articleTags; track $index) {\n @if(tag|isstring) {\n <div class=\"article-tag\" (click)=\"didClickTag.emit(tag)\">\n @if (articleTagIconTemplate) {\n <div class=\"article-tag-icon\">\n <ng-container *ngTemplateOutlet=\"articleTagIconTemplate; context: { text: tag }\" />\n </div>\n }\n {{tag}}\n </div>\n } @else {\n <div class=\"article-tag\" [style.--article-tag-background-color]=\"tag.color ?? '#5d7092'\" (click)=\"didClickTagItem.emit(tag)\">\n @if (articleTagIconTemplate) {\n <div class=\"article-tag-icon\">\n <ng-container *ngTemplateOutlet=\"articleTagIconTemplate; context: { text: tag.text, data: tag.data }\" />\n </div>\n }\n {{tag.text}}\n </div>\n }\n }\n </div>\n <footer class=\"article-footer\">\n <ng-content></ng-content>\n </footer>\n </div>\n</article>\n", styles: [":host{display:block;--border-color: #5d7092}article{border-radius:.5rem;transition:box-shadow .5s}article.bordered{border-left:2px solid var(--border-color)}article:hover{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.article-content-wrapper{padding:12px}.article-tags,.article-header,.article-description{margin:0 0 8px}.article-banner{width:100%;height:275px;border-top-left-radius:.5rem;border-top-right-radius:.5rem;object-fit:cover}.article-header{display:flex;align-items:center}.article-image{width:24px;height:24px}.article-image::ng-deep>*{width:24px;height:24px;border-radius:50%;object-fit:contain}.article-title{margin:0 0 0 8px;cursor:pointer}.article-tags{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.article-tag{--article-tag-background-color: #5d7092;background-color:var(--article-tag-background-color);color:#000000de;color:#fff;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;border-radius:.25rem;padding:.25rem .5rem;font-weight:400;align-items:center}.article-tag:hover{opacity:.8}.article-tag .article-tag-icon{margin-right:4px}.article-tags.clickable .article-tag{cursor:pointer}.article-footer{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.IsTemplatePipe, name: "istemplate" }, { kind: "pipe", type: i3.IsStringPipe, name: "isstring" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListItemArticleComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-list-item-article', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"mat-elevation-z1\" [class.bordered]=\"!articleBannerUrl\">\n <img class=\"article-banner\" [src]=\"articleBannerUrl\" [alt]=\"articleBannerAlt\" *ngIf=\"articleBannerUrl\">\n <div class=\"article-content-wrapper\">\n <header class=\"article-header\">\n <div class=\"article-image\">\n <ng-container *ngIf=\"articleIconTemplate; else: noImageTemplate\">\n <ng-container *ngTemplateOutlet=\"articleIconTemplate\"></ng-container>\n </ng-container>\n <ng-template #noImageTemplate>\n <img *ngIf=\"articleIconUrl\" [src]=\"articleIconUrl\" [alt]=\"articleIconAlt\">\n </ng-template>\n </div>\n @if (articleTitle|istemplate) {\n <h3\n class=\"article-title\"\n [routerLink]=\"articleUrl\"\n (click)=\"didClickTitle.emit()\">\n <ng-container *ngTemplateOutlet=\"articleTitle\" />\n </h3>\n } @else {\n <div\n class=\"article-title\"\n [routerLink]=\"articleUrl\"\n (click)=\"didClickTitle.emit()\">\n {{articleTitle}}\n </div>\n }\n </header>\n <p class=\"article-description\">\n @if (articleDescription|istemplate) {\n <ng-container *ngTemplateOutlet=\"articleDescription\" />\n } @else {\n {{articleDescription}}\n }\n </p>\n <div class=\"article-tags\" [class.clickable]=\"isTagsCliclable\" *ngIf=\"articleTags?.length\">\n @for (tag of articleTags; track $index) {\n @if(tag|isstring) {\n <div class=\"article-tag\" (click)=\"didClickTag.emit(tag)\">\n @if (articleTagIconTemplate) {\n <div class=\"article-tag-icon\">\n <ng-container *ngTemplateOutlet=\"articleTagIconTemplate; context: { text: tag }\" />\n </div>\n }\n {{tag}}\n </div>\n } @else {\n <div class=\"article-tag\" [style.--article-tag-background-color]=\"tag.color ?? '#5d7092'\" (click)=\"didClickTagItem.emit(tag)\">\n @if (articleTagIconTemplate) {\n <div class=\"article-tag-icon\">\n <ng-container *ngTemplateOutlet=\"articleTagIconTemplate; context: { text: tag.text, data: tag.data }\" />\n </div>\n }\n {{tag.text}}\n </div>\n }\n }\n </div>\n <footer class=\"article-footer\">\n <ng-content></ng-content>\n </footer>\n </div>\n</article>\n", styles: [":host{display:block;--border-color: #5d7092}article{border-radius:.5rem;transition:box-shadow .5s}article.bordered{border-left:2px solid var(--border-color)}article:hover{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.article-content-wrapper{padding:12px}.article-tags,.article-header,.article-description{margin:0 0 8px}.article-banner{width:100%;height:275px;border-top-left-radius:.5rem;border-top-right-radius:.5rem;object-fit:cover}.article-header{display:flex;align-items:center}.article-image{width:24px;height:24px}.article-image::ng-deep>*{width:24px;height:24px;border-radius:50%;object-fit:contain}.article-title{margin:0 0 0 8px;cursor:pointer}.article-tags{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.article-tag{--article-tag-background-color: #5d7092;background-color:var(--article-tag-background-color);color:#000000de;color:#fff;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;border-radius:.25rem;padding:.25rem .5rem;font-weight:400;align-items:center}.article-tag:hover{opacity:.8}.article-tag .article-tag-icon{margin-right:4px}.article-tags.clickable .article-tag{cursor:pointer}.article-footer{display:flex;align-items:center}\n"] }]
}], propDecorators: { articleTitle: [{
type: Input
}], articleUrl: [{
type: Input
}], articleBannerUrl: [{
type: Input
}], articleBannerAlt: [{
type: Input
}], articleIconUrl: [{
type: Input
}], articleIconAlt: [{
type: Input
}], articleDescription: [{
type: Input
}], articleTags: [{
type: Input
}], articleIconTemplate: [{
type: Input
}], articleTagIconTemplate: [{
type: Input
}], didClickTag: [{
type: Output
}], didClickTagItem: [{
type: Output
}], didClickTitle: [{
type: Output
}] } });
class ListTemplateComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ListTemplateComponent, selector: "ui-list-template", inputs: { slot: "slot", when: "when" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: ``, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListTemplateComponent, decorators: [{
type: Component,
args: [{
selector: 'ui-list-template',
template: ``,
}]
}], propDecorators: { template: [{
type: ContentChild,
args: [TemplateRef]
}], slot: [{
type: Input
}], when: [{
type: Input
}] } });
class ListComponent {
constructor() {
this.items = [];
this.selectable = false;
this.filterBy = [];
this.selections = [];
this.selectionsChange = new EventEmitter();
this._selectionStates = {};
this._noResultTemplate = null;
this._emptyStateTemplate = null;
this._empty = false;
}
get hasSelection() {
return !!this.selections.length;
}
get classes() {
if (!this.containerClass) {
return {};
}
return {
[this.containerClass]: true,
};
}
ngOnChanges() {
this._empty = !this.items?.length;
setTimeout(() => {
this.checkSelections();
}, 300);
}
ngAfterContentInit() {
this._noResultTemplate = this.templates.find((e) => e.slot === 'noresult')?.template || null;
this._emptyStateTemplate = this.templates.find((e) => e.slot === 'empty')?.template || null;
}
unselect(item) {
const id = item[this.idField];
this.selections = this.selections.filter((e) => e !== item);
this._selectionStates[id] = false;
this.selectionsChange.emit(this.selections);
}
_trackBy(index, item) {
if (this.trackBy) {
return item[this.trackBy] ?? index;
}
return index;
}
_template(context, slot) {
return (this.templates.find((e) => {
if (e.slot === slot && e.when) {
return e.when(context);
}
return false;
})?.template ||
this.templates.find((e) => e.slot === slot && !e.when)?.template ||
null);
}
_isSelected(item) {
return !!this.selections.find((e) => e === item);
}
_toggleSelection(item) {
for (let i = 0; i < this.selections.length; i++) {
if (this.equals(this.selections[i], item)) {
this.selections.splice(i, 1);
this.selectionsChange.emit(this.selections);
return;
}
}
this.selections.push(item);
this.selectionsChange.emit(this.selections);
}
equals(a, b) {
return a[this.idField] === b[this.idField];
}
checkSelections() {
this.selections = this.selections.filter((selection) => {
if (this.items.find((item) => this.equals(item, selection))) {
return true;
}
delete this._selectionStates[selection[this.idField]];
return false;
});
this.selectionsChange.emit(this.selections);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ListComponent, selector: "ui-list", inputs: { idField: "idField", items: "items", trackBy: "trackBy", selectable: "selectable", filter: "filter", filterBy: "filterBy", selections: "selections", containerClass: "containerClass" }, outputs: { selectionsChange: "selectionsChange" }, queries: [{ propertyName: "templates", predicate: ListTemplateComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"selectable\">\n <ng-container *ngFor=\"let item of selections; trackBy: _trackBy.bind(this)\">\n <ng-container *ngTemplateOutlet=\"_template(item, 'selection'); context: {item: item}\"></ng-container>\n </ng-container>\n</ng-container>\n\n<!-- TEMPLATE FOR EMPTY STATE -->\n<ng-template #emptyStateTemplate>\n <!-- SHOW EMPTY STATE TEMPLATE IF FILTER IS DEFINED -->\n <ng-container *ngIf=\"!filter?.trim(); else: noResult\">\n <ng-container *ngTemplateOutlet=\"_emptyStateTemplate\"></ng-container>\n </ng-container>\n <!-- SHOW NO RESULT TEMPLATE IF FILTER IS DEFINED -->\n <ng-template #noResult>\n <ng-container *ngTemplateOutlet=\"_noResultTemplate; context: { $implicit: filter }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<!-- APPLY CURRENT FILTER TO ITEMS IF NEEDED AND STORE THE RESULT TO A VARIABLE `filtered` -->\n<ng-container *ngIf=\"(filter ? (items | filterBy: filterBy: filter) : items) as filtered\">\n <!-- SHOW EMPTY STATE IF NO ITEM ELSE SHOW ROWS -->\n <ng-container *ngIf=\"filtered.length; else: emptyStateTemplate\">\n <ul class=\"ui-list-container\" [ngClass]=\"classes\">\n <ng-container *ngFor=\"let item of filtered; trackBy: _trackBy.bind(this) let index=index; let first=first; let last=last; let even=even; let odd=odd\">\n <ng-container *ngIf=\"{item: item, items: filtered, odd: odd, last: last, even: even, index: index, first: first} as context\">\n <div class=\"ui-list-item\">\n <!-- HEADER -->\n <ng-container *ngIf=\"_template(context, 'header') as header\">\n <li class=\"ui-list-item-header\">\n <ng-container *ngTemplateOutlet=\"header; context: context\"></ng-container>\n </li>\n </ng-container>\n <!-- ROW -->\n <ng-container *ngIf=\"_template(context, 'row') as row\">\n <li class=\"ui-list-item-content\" [class.selectable]=\"selectable\">\n <ng-container *ngTemplateOutlet=\"row; context: context\"></ng-container>\n <!-- CHECKBOX -->\n <label class=\"ui-list-label\" *ngIf=\"selectable\">\n <input\n class=\"ui-list-label__checkbox\"\n type=\"checkbox\"\n [(ngModel)]=\"_selectionStates[$any(item)[idField]]\"\n (ngModelChange)=\"_toggleSelection(item)\"/>\n <span class=\"ui-list-label__text\">\n <span class=\"ui-list-label__check\">\n <span class=\"ui-list-label__icon\">\u2713</span>\n </span>\n </span>\n </label>\n </li>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ul>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;min-height:100%;height:auto;width:100%;position:relative;--inner-margin-bottom: 12px}ul,li{margin:0;padding:0;list-style:none}li{display:block}li.selectable{display:grid;grid-template-columns:90% 10%;column-gap:12px;align-items:center}.ui-list-item{margin-bottom:var(--inner-margin-bottom)}.ui-list-label__checkbox{display:none}.ui-list-label__check{display:inline-block;border-radius:50%;border:5px solid rgba(0,0,0,.1);background:#fff;vertical-align:middle;margin-right:20px;width:2em;height:2em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border .3s ease}.ui-list-label__check .label__icon{opacity:.2;color:transparent;transition:opacity .3s .1s ease;-webkit-text-stroke:3px rgba(0,0,0,.5)}.ui-list-label__check:hover{border:5px solid rgba(0,0,0,.2)}.ui-list-label__checkbox:checked+.ui-list-label__text .ui-list-label__check{animation:check .5s cubic-bezier(.895,.03,.685,.22) forwards}.ui-list-label__checkbox:checked+.ui-list-label__text .ui-list-label__check .ui-list-label__icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}.spacer{flex:1}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes check{0%{width:1.5em;height:1.5em;border-width:5px}10%{width:1.5em;height:1.5em;opacity:.1;background:#0003;border-width:15px}12%{width:1.5em;height:1.5em;opacity:.4;background:#0000001a;border-width:0}50%{width:2em;height:2em;background:#00d478;border:0;opacity:.6}to{width:2em;height:2em;background:#00d478;border:0;opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3$1.FilterByPipe, name: "filterBy" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ListComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-list', template: "<ng-container *ngIf=\"selectable\">\n <ng-container *ngFor=\"let item of selections; trackBy: _trackBy.bind(this)\">\n <ng-container *ngTemplateOutlet=\"_template(item, 'selection'); context: {item: item}\"></ng-container>\n </ng-container>\n</ng-container>\n\n<!-- TEMPLATE FOR EMPTY STATE -->\n<ng-template #emptyStateTemplate>\n <!-- SHOW EMPTY STATE TEMPLATE IF FILTER IS DEFINED -->\n <ng-container *ngIf=\"!filter?.trim(); else: noResult\">\n <ng-container *ngTemplateOutlet=\"_emptyStateTemplate\"></ng-container>\n </ng-container>\n <!-- SHOW NO RESULT TEMPLATE IF FILTER IS DEFINED -->\n <ng-template #noResult>\n <ng-container *ngTemplateOutlet=\"_noResultTemplate; context: { $implicit: filter }\"></ng-container>\n </ng-template>\n</ng-template>\n\n<!-- APPLY CURRENT FILTER TO ITEMS IF NEEDED AND STORE THE RESULT TO A VARIABLE `filtered` -->\n<ng-container *ngIf=\"(filter ? (items | filterBy: filterBy: filter) : items) as filtered\">\n <!-- SHOW EMPTY STATE IF NO ITEM ELSE SHOW ROWS -->\n <ng-container *ngIf=\"filtered.length; else: emptyStateTemplate\">\n <ul class=\"ui-list-container\" [ngClass]=\"classes\">\n <ng-container *ngFor=\"let item of filtered; trackBy: _trackBy.bind(this) let index=index; let first=first; let last=last; let even=even; let odd=odd\">\n <ng-container *ngIf=\"{item: item, items: filtered, odd: odd, last: last, even: even, index: index, first: first} as context\">\n <div class=\"ui-list-item\">\n <!-- HEADER -->\n <ng-container *ngIf=\"_template(context, 'header') as header\">\n <li class=\"ui-list-item-header\">\n <ng-container *ngTemplateOutlet=\"header; context: context\"></ng-container>\n </li>\n </ng-container>\n <!-- ROW -->\n <ng-container *ngIf=\"_template(context, 'row') as row\">\n <li class=\"ui-list-item-content\" [class.selectable]=\"selectable\">\n <ng-container *ngTemplateOutlet=\"row; context: context\"></ng-container>\n <!-- CHECKBOX -->\n <label class=\"ui-list-label\" *ngIf=\"selectable\">\n <input\n class=\"ui-list-label__checkbox\"\n type=\"checkbox\"\n [(ngModel)]=\"_selectionStates[$any(item)[idField]]\"\n (ngModelChange)=\"_toggleSelection(item)\"/>\n <span class=\"ui-list-label__text\">\n <span class=\"ui-list-label__check\">\n <span class=\"ui-list-label__icon\">\u2713</span>\n </span>\n </span>\n </label>\n </li>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ul>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;min-height:100%;height:auto;width:100%;position:relative;--inner-margin-bottom: 12px}ul,li{margin:0;padding:0;list-style:none}li{display:block}li.selectable{display:grid;grid-template-columns:90% 10%;column-gap:12px;align-items:center}.ui-list-item{margin-bottom:var(--inner-margin-bottom)}.ui-list-label__checkbox{display:none}.ui-list-label__check{display:inline-block;border-radius:50%;border:5px solid rgba(0,0,0,.1);background:#fff;vertical-align:middle;margin-right:20px;width:2em;height:2em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border .3s ease}.ui-list-label__check .label__icon{opacity:.2;color:transparent;transition:opacity .3s .1s ease;-webkit-text-stroke:3px rgba(0,0,0,.5)}.ui-list-label__check:hover{border:5px solid rgba(0,0,0,.2)}.ui-list-label__checkbox:checked+.ui-list-label__text .ui-list-label__check{animation:check .5s cubic-bezier(.895,.03,.685,.22) forwards}.ui-list-label__checkbox:checked+.ui-list-label__text .ui-list-label__check .ui-list-label__icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}.spacer{flex:1}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes check{0%{width:1.5em;height:1.5em;border-width:5px}10%{width:1.5em;height:1.5em;opacity:.1;background:#0003;border-width:15px}12%{width:1.5em;height:1.5em;opacity:.4;background:#0000001a;border-width:0}50%{width:2em;height:2em;background:#00d478;border:0;opacity:.6}to{width:2em;height:2em;background:#00d478;border:0;opacity:1}}\n"] }]
}], propDecorators: { templates: [{
type: ContentChildren,
args: [ListTemplateComponent]
}], idField: [{
type: Input
}], items: [{
type: Input
}], trackBy: [{
type: Input
}], selectable: [{
type: Input
}], filter: [{
type: Input
}], filterBy: [{
type: Input
}], selections: [{
type: Input
}], containerClass: [{
type: Input
}], selectionsChange: [{
type: Output
}] } });
class NgeUiListModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: NgeUiListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: NgeUiListModule, declarations: [ListComponent, ListTemplateComponent, ListItemArticleComponent, ListItemArticleActionComponent], imports: [CommonModule, FormsModule, RouterModule, ScrollingModule, IsTemplatePipe, IsStringPipe, NgArrayPipesModule], exports: [ListComponent, ListTemplateComponent, ListItemArticleComponent, ListItemArticleActionComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: NgeUiListModule, imports: [CommonModule, FormsModule, RouterModule, ScrollingModule, NgArrayPipesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: NgeUiListModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, RouterModule, ScrollingModule, IsTemplatePipe, IsStringPipe, NgArrayPipesModule],
exports: [ListComponent, ListTemplateComponent, ListItemArticleComponent, ListItemArticleActionComponent],
declarations: [ListComponent, ListTemplateComponent, ListItemArticleComponent, ListItemArticleActionComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ListComponent, ListItemArticleActionComponent, ListItemArticleComponent, ListTemplateComponent, NgeUiListModule };
//# sourceMappingURL=cisstech-nge-ui-list.mjs.map