@obliczeniowo/elementary
Version:
Library made in Angular version 20
135 lines (127 loc) • 15.7 kB
JavaScript
import * as i2 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i1 from '@obliczeniowo/elementary/loading';
import { LoadingModule } from '@obliczeniowo/elementary/loading';
import * as i0 from '@angular/core';
import { Component, input, EventEmitter, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
class VerticalArrowComponent {
elementRef;
change;
_loaded = false;
constructor(elementRef, change) {
this.elementRef = elementRef;
this.change = change;
}
get height() {
return this._loaded ? this.elementRef.nativeElement.clientHeight : 0;
}
ngAfterViewInit() {
setTimeout(() => {
this._loaded = true;
this.change.detectChanges();
});
}
reload() {
setTimeout(() => {
this._loaded = false;
this.change.detectChanges();
this.ngAfterViewInit();
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: VerticalArrowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: VerticalArrowComponent, isStandalone: false, selector: "obl-vertical-arrow", ngImport: i0, template: "<svg\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n [attr.height]=\"height\"\n [attr.viewBox]=\"'0 0 10 ' + height\"\n>\n <path\n style=\"\n fill: var(--default-text-color);\n stroke-width: 0.8;\n stroke-linejoin: round;\n \"\n [attr.d]=\"\n 'M 0,0 5,5 10,0 V ' +\n (height - 5) +\n 'L 5,' +\n height +\n ' 0,' +\n (height - 5) +\n ' Z'\n \"\n />\n</svg>\n", styles: [":host{display:flex;align-items:stretch}:host svg{display:flex;align-items:stretch}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: VerticalArrowComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-vertical-arrow', standalone: false, template: "<svg\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n [attr.height]=\"height\"\n [attr.viewBox]=\"'0 0 10 ' + height\"\n>\n <path\n style=\"\n fill: var(--default-text-color);\n stroke-width: 0.8;\n stroke-linejoin: round;\n \"\n [attr.d]=\"\n 'M 0,0 5,5 10,0 V ' +\n (height - 5) +\n 'L 5,' +\n height +\n ' 0,' +\n (height - 5) +\n ' Z'\n \"\n />\n</svg>\n", styles: [":host{display:flex;align-items:stretch}:host svg{display:flex;align-items:stretch}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
class TreeItemComponent {
loading = false;
item = input.required();
itemClicked = input.required();
itemExpand = input.required();
itemNotExpand = new EventEmitter();
getLoading() {
return this.loading;
}
expand() {
this.item().expanded = !this.item().expanded;
if (this.item().expanded) {
this.loading = true;
if (this.itemExpand()) {
this.itemExpand().emit({
item: this.item(),
cb: (items) => {
this.item().items = items;
this.loading = false;
return items;
}
});
}
}
else {
this.itemNotExpand.emit();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TreeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: TreeItemComponent, isStandalone: false, selector: "obl-tree-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, itemClicked: { classPropertyName: "itemClicked", publicName: "itemClicked", isSignal: true, isRequired: true, transformFunction: null }, itemExpand: { classPropertyName: "itemExpand", publicName: "itemExpand", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemNotExpand: "itemNotExpand" }, ngImport: i0, template: "@if (item()) {\n <div class=\"tree-item-head\">\n <div class=\"tree-item-icon-space\">\n @if (item().subItems && !getLoading()) {\n <button (click)=\"expand()\">\n @if (item().expanded) {\n <obl-icon\n [name]=\"'subtract-box'\"\n [width]=\"12\"\n ></obl-icon>\n } @else {\n <obl-icon [name]=\"'add-box'\" [width]=\"12\"></obl-icon>\n }\n </button>\n }\n @if (getLoading()) {\n <obl-spinner class=\"spinner\"></obl-spinner>\n }\n </div>\n <button\n class=\"tree-item-title\"\n (click)=\"itemClicked() && itemClicked().emit(item())\"\n >\n {{ item().title }}\n </button>\n </div>\n\n @if (item().subItems && item().items.length && item().expanded) {\n <div class=\"tree-childs-container\">\n <div class=\"arrow-container\">\n <obl-vertical-arrow #arrow></obl-vertical-arrow>\n </div>\n <div class=\"child-items\" #childItems>\n @for ( child of (!getLoading() && item().items) || []; track child.id) {\n <obl-tree-item\n [item]=\"child\"\n [itemClicked]=\"itemClicked()\"\n [itemExpand]=\"itemExpand()\"\n (itemNotExpand)=\"arrow.reload(); itemNotExpand.emit()\"\n ></obl-tree-item>\n }\n </div>\n </div>\n }\n}\n\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.tree-item-head{display:flex;align-items:center;padding:2px 0}.tree-item-head .tree-item-icon-space{width:12px;height:12px;margin-right:5px;display:flex;align-items:center}.tree-childs-container{display:flex}.tree-childs-container .arrow-container{display:flex;max-width:10px;margin-right:5px;margin-left:2px}.tree-childs-container .child-items{display:flex;flex-direction:column}button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;display:flex;border:1px dotted transparent}button:focus{border:1px dotted var(--default-focus-color)}.spinner{--obl-spinner-width: 12px;--obl-spinner-color: var(--default-text-color)}path{fill:var(--default-text-color)}\n"], dependencies: [{ kind: "component", type: i1.SpinnerComponent, selector: "obl-spinner" }, { kind: "component", type: i2.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }, { kind: "component", type: VerticalArrowComponent, selector: "obl-vertical-arrow" }, { kind: "component", type: TreeItemComponent, selector: "obl-tree-item", inputs: ["item", "itemClicked", "itemExpand"], outputs: ["itemNotExpand"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TreeItemComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-tree-item', standalone: false, template: "@if (item()) {\n <div class=\"tree-item-head\">\n <div class=\"tree-item-icon-space\">\n @if (item().subItems && !getLoading()) {\n <button (click)=\"expand()\">\n @if (item().expanded) {\n <obl-icon\n [name]=\"'subtract-box'\"\n [width]=\"12\"\n ></obl-icon>\n } @else {\n <obl-icon [name]=\"'add-box'\" [width]=\"12\"></obl-icon>\n }\n </button>\n }\n @if (getLoading()) {\n <obl-spinner class=\"spinner\"></obl-spinner>\n }\n </div>\n <button\n class=\"tree-item-title\"\n (click)=\"itemClicked() && itemClicked().emit(item())\"\n >\n {{ item().title }}\n </button>\n </div>\n\n @if (item().subItems && item().items.length && item().expanded) {\n <div class=\"tree-childs-container\">\n <div class=\"arrow-container\">\n <obl-vertical-arrow #arrow></obl-vertical-arrow>\n </div>\n <div class=\"child-items\" #childItems>\n @for ( child of (!getLoading() && item().items) || []; track child.id) {\n <obl-tree-item\n [item]=\"child\"\n [itemClicked]=\"itemClicked()\"\n [itemExpand]=\"itemExpand()\"\n (itemNotExpand)=\"arrow.reload(); itemNotExpand.emit()\"\n ></obl-tree-item>\n }\n </div>\n </div>\n }\n}\n\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.tree-item-head{display:flex;align-items:center;padding:2px 0}.tree-item-head .tree-item-icon-space{width:12px;height:12px;margin-right:5px;display:flex;align-items:center}.tree-childs-container{display:flex}.tree-childs-container .arrow-container{display:flex;max-width:10px;margin-right:5px;margin-left:2px}.tree-childs-container .child-items{display:flex;flex-direction:column}button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit;display:flex;border:1px dotted transparent}button:focus{border:1px dotted var(--default-focus-color)}.spinner{--obl-spinner-width: 12px;--obl-spinner-color: var(--default-text-color)}path{fill:var(--default-text-color)}\n"] }]
}], propDecorators: { itemNotExpand: [{
type: Output
}] } });
class TreeComponent {
items = input();
itemClicked = new EventEmitter();
itemExpand = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: TreeComponent, isStandalone: false, selector: "obl-tree", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked", itemExpand: "itemExpand" }, ngImport: i0, template: "@if (items() && items()?.length) {\n @for (item of items(); track item.id) {\n <obl-tree-item\n [item]=\"item\"\n [itemClicked]=\"itemClicked\"\n [itemExpand]=\"itemExpand\"\n ></obl-tree-item>\n }\n}\n", styles: [""], dependencies: [{ kind: "component", type: TreeItemComponent, selector: "obl-tree-item", inputs: ["item", "itemClicked", "itemExpand"], outputs: ["itemNotExpand"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TreeComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-tree', standalone: false, template: "@if (items() && items()?.length) {\n @for (item of items(); track item.id) {\n <obl-tree-item\n [item]=\"item\"\n [itemClicked]=\"itemClicked\"\n [itemExpand]=\"itemExpand\"\n ></obl-tree-item>\n }\n}\n" }]
}], propDecorators: { itemClicked: [{
type: Output
}], itemExpand: [{
type: Output
}] } });
class TreeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: TreeModule, declarations: [TreeComponent,
VerticalArrowComponent,
TreeItemComponent], imports: [CommonModule,
LoadingModule,
IconsModule], exports: [TreeComponent,
VerticalArrowComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TreeModule, imports: [CommonModule,
LoadingModule,
IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TreeModule, decorators: [{
type: NgModule,
args: [{
declarations: [
TreeComponent,
VerticalArrowComponent,
TreeItemComponent
],
imports: [
CommonModule,
LoadingModule,
IconsModule
],
exports: [
TreeComponent,
VerticalArrowComponent,
]
}]
}] });
;
/**
* Generated bundle index. Do not edit.
*/
export { TreeComponent, TreeModule, VerticalArrowComponent };
//# sourceMappingURL=obliczeniowo-elementary-tree.mjs.map