@hestia-earth/ui-components 0.36.8 → 0.36.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.
|
@@ -2425,14 +2425,14 @@ class DataTableComponent {
|
|
|
2425
2425
|
});
|
|
2426
2426
|
}
|
|
2427
2427
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2428
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: DataTableComponent, isStandalone: true, selector: "he-data-table", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "resized": "onResized($event)" }, properties: { "class.is-small": "this.isSmall" } }, ngImport: i0, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr>th{font-weight:400}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{border:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th>span:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td>span:first-child{display:inline-block;max-width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table .fixed-column{position:sticky}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{z-index:10}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{z-index:11}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{top:0;z-index:1070}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column{z-index:1071}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.has-border-right:not(:last-child),:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.has-border-right:not(:last-child){box-shadow:inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:0;max-width:300px;width:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{max-width:180px;width:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.has-border-right:not(:last-child){box-shadow:inset 0 -1px #ffc000,inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.has-border-right{box-shadow:inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.fixed-column.has-border-right:after{box-shadow:2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.has-border-right{box-shadow:inset 0 -1px #c5cdd5,inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #c5cdd5,2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr{background-color:transparent!important}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr th{top:42px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr+tr th{top:84px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{background-color:#fff}:host ::ng-deep>.data-table-holder>.table-container>.table.is-hoverable>tbody>tr:not(.is-selected):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped>tbody>tr:not(.is-selected):nth-child(2n)>td{background-color:#fefcf7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped.is-hoverable>tr:not(.is-selected):nth-child(2n):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow{font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th{height:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:200px;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:160px;max-width:160px;width:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr th{top:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr+tr th{top:60px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{height:30px;font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2428
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: DataTableComponent, isStandalone: true, selector: "he-data-table", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "resized": "onResized($event)" }, properties: { "class.is-small": "this.isSmall" } }, ngImport: i0, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{border:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th>span:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td>span:first-child{display:inline-block;max-width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table .fixed-column{position:sticky}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{z-index:10}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{z-index:11}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{top:0;z-index:1070}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column{z-index:1071}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.has-border-right:not(:last-child),:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.has-border-right:not(:last-child){box-shadow:inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:0;max-width:300px;width:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{max-width:180px;width:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.has-border-right:not(:last-child){box-shadow:inset 0 -1px #ffc000,inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.has-border-right{box-shadow:inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.fixed-column.has-border-right:after{box-shadow:2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.has-border-right{box-shadow:inset 0 -1px #c5cdd5,inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #c5cdd5,2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr{background-color:transparent!important}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr th{top:42px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr+tr th{top:84px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{background-color:#fff}:host ::ng-deep>.data-table-holder>.table-container>.table.is-hoverable>tbody>tr:not(.is-selected):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped>tbody>tr:not(.is-selected):nth-child(2n)>td{background-color:#fefcf7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped.is-hoverable>tr:not(.is-selected):nth-child(2n):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow{font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th{height:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:200px;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:160px;max-width:160px;width:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr th{top:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr+tr th{top:60px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{height:30px;font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2429
2429
|
}
|
|
2430
2430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
2431
2431
|
type: Component$1,
|
|
2432
2432
|
args: [{ selector: 'he-data-table', imports: [ResizedDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2433
2433
|
'[class.is-small]': 'small()',
|
|
2434
2434
|
'(resized)': 'onResized($event)'
|
|
2435
|
-
}, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr
|
|
2435
|
+
}, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{border:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th>span:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td>span:first-child{display:inline-block;max-width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table .fixed-column{position:sticky}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{z-index:10}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{z-index:11}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{top:0;z-index:1070}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column{z-index:1071}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.has-border-right:not(:last-child),:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.has-border-right:not(:last-child){box-shadow:inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:0;max-width:300px;width:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{max-width:180px;width:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.has-border-right:not(:last-child){box-shadow:inset 0 -1px #ffc000,inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.has-border-right{box-shadow:inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.fixed-column.has-border-right:after{box-shadow:2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.has-border-right{box-shadow:inset 0 -1px #c5cdd5,inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #c5cdd5,2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr{background-color:transparent!important}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr th{top:42px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr+tr th{top:84px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{background-color:#fff}:host ::ng-deep>.data-table-holder>.table-container>.table.is-hoverable>tbody>tr:not(.is-selected):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped>tbody>tr:not(.is-selected):nth-child(2n)>td{background-color:#fefcf7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped.is-hoverable>tr:not(.is-selected):nth-child(2n):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow{font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th{height:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:200px;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:160px;max-width:160px;width:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr th{top:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr+tr th{top:60px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{height:30px;font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] }]
|
|
2436
2436
|
}], propDecorators: { minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], isSmall: [{
|
|
2437
2437
|
type: HostBinding,
|
|
2438
2438
|
args: ['class.is-small']
|
|
@@ -2595,13 +2595,13 @@ class NavigationMenuComponent {
|
|
|
2595
2595
|
setTimeout(() => this.closed.emit(), 200);
|
|
2596
2596
|
}
|
|
2597
2597
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2598
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NavigationMenuComponent, isStandalone: true, selector: "he-navigation-menu", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, routerLinkMatchOptions: { classPropertyName: "routerLinkMatchOptions", publicName: "routerLinkMatchOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "no-print navigation-menu" }, ngImport: i0, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ? close() : null\"\n [routerLink]=\"link.url\"\n [queryParams]=\"link.queryParams\"\n [fragment]=\"link.fragment\"\n routerLinkActive=\"link-active\"\n [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n </a>\n </div>\n <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width: 1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NavigationMenuComponent, isStandalone: true, selector: "he-navigation-menu", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, routerLinkMatchOptions: { classPropertyName: "routerLinkMatchOptions", publicName: "routerLinkMatchOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "no-print navigation-menu" }, ngImport: i0, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n\n <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ? close() : null\"\n [routerLink]=\"link.url\"\n [queryParams]=\"link.queryParams\"\n [fragment]=\"link.fragment\"\n routerLinkActive=\"link-active\"\n [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n </a>\n </div>\n <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width: 1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2599
2599
|
}
|
|
2600
2600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NavigationMenuComponent, decorators: [{
|
|
2601
2601
|
type: Component$1,
|
|
2602
2602
|
args: [{ selector: 'he-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, RouterLinkActive, RouterLink, HESvgIconComponent], host: {
|
|
2603
2603
|
class: 'no-print navigation-menu'
|
|
2604
|
-
}, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ? close() : null\"\n [routerLink]=\"link.url\"\n [queryParams]=\"link.queryParams\"\n [fragment]=\"link.fragment\"\n routerLinkActive=\"link-active\"\n [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n </a>\n </div>\n <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width: 1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"] }]
|
|
2604
|
+
}, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n\n <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ? close() : null\"\n [routerLink]=\"link.url\"\n [queryParams]=\"link.queryParams\"\n [fragment]=\"link.fragment\"\n routerLinkActive=\"link-active\"\n [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n </a>\n </div>\n <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width: 1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"] }]
|
|
2605
2605
|
}], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], routerLinkMatchOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkMatchOptions", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
2606
2606
|
|
|
2607
2607
|
var Breakpoint;
|
|
@@ -2730,9 +2730,20 @@ class DrawerContainerComponent {
|
|
|
2730
2730
|
this.menuOverlap = input(true, ...(ngDevMode ? [{ debugName: "menuOverlap" }] : []));
|
|
2731
2731
|
this.links = input([], ...(ngDevMode ? [{ debugName: "links" }] : []));
|
|
2732
2732
|
this.drawerHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerHeaderTemplate" }] : []));
|
|
2733
|
+
/**
|
|
2734
|
+
* Drawer content is not visible when the drawer is compacted.
|
|
2735
|
+
* To always show content when compacted, use `drawerHeaderTemplate` instead.
|
|
2736
|
+
*/
|
|
2737
|
+
this.drawerContentTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerContentTemplate" }] : []));
|
|
2733
2738
|
this.drawerFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerFooterTemplate" }] : []));
|
|
2739
|
+
/**
|
|
2740
|
+
* Show content above the menu, inside the menu component.
|
|
2741
|
+
*/
|
|
2734
2742
|
this.drawerMenuHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerMenuHeaderTemplate" }] : []));
|
|
2735
|
-
|
|
2743
|
+
/**
|
|
2744
|
+
* Show content below the menu, inside the menu component.
|
|
2745
|
+
*/
|
|
2746
|
+
this.drawerMenuFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerMenuFooterTemplate" }] : []));
|
|
2736
2747
|
this.compactMenuLabel = input('Menu', ...(ngDevMode ? [{ debugName: "compactMenuLabel" }] : []));
|
|
2737
2748
|
this.compactHeaderClass = input(null, ...(ngDevMode ? [{ debugName: "compactHeaderClass" }] : []));
|
|
2738
2749
|
/**
|
|
@@ -2824,7 +2835,7 @@ class DrawerContainerComponent {
|
|
|
2824
2835
|
return parseInt(padding, 10) + parseInt(margin, 10);
|
|
2825
2836
|
}
|
|
2826
2837
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerMenuHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2838
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2828
2839
|
}
|
|
2829
2840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
2830
2841
|
type: Component$1,
|
|
@@ -2841,8 +2852,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
2841
2852
|
'[class]': 'hostClass()',
|
|
2842
2853
|
'[attr.drawer-position]': 'position()',
|
|
2843
2854
|
'[attr.drawer-state]': 'menuState()'
|
|
2844
|
-
}, providers: [sidenavStore], template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (
|
|
2845
|
-
}], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }],
|
|
2855
|
+
}, providers: [sidenavStore], template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
|
|
2856
|
+
}], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerMenuFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuFooterTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
|
|
2846
2857
|
type: HostListener,
|
|
2847
2858
|
args: ['window:mouseup']
|
|
2848
2859
|
}, {
|
|
@@ -7467,7 +7478,7 @@ class CyclesCompletenessComponent {
|
|
|
7467
7478
|
component.headerKeys.set(headerKeys$1);
|
|
7468
7479
|
}
|
|
7469
7480
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7470
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n <div class=\"column\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n </div>\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <span class=\"icon is-small\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n </span>\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n <div class=\"px-3 pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span
|
|
7481
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n <div class=\"column\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n </div>\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <span class=\"icon is-small\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n </span>\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n <div class=\"px-3 pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"getCompleteness(cycle)\"\n [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No completeness data</span>\n </div>\n }\n </div>\n }\n @case (View.logs) {\n @if (cycles().length > 1) {\n <div class=\"field has-addons pt-2 px-3\">\n <div class=\"control\">\n <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n </div>\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth is-secondary\">\n <select (change)=\"selectIndex($event)\">\n @for (value of cycles(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n }\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\" />\n }\n }\n}\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7471
7482
|
}
|
|
7472
7483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, decorators: [{
|
|
7473
7484
|
type: Component$1,
|
|
@@ -7478,7 +7489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
7478
7489
|
BlankNodeStateComponent,
|
|
7479
7490
|
BlankNodeStateNoticeComponent,
|
|
7480
7491
|
NodeLogsModelsComponent
|
|
7481
|
-
], template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n <div class=\"column\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n </div>\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <span class=\"icon is-small\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n </span>\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n <div class=\"px-3 pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span
|
|
7492
|
+
], template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n <div class=\"column\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n </div>\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <span class=\"icon is-small\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n </span>\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n <div class=\"px-3 pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"getCompleteness(cycle)\"\n [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No completeness data</span>\n </div>\n }\n </div>\n }\n @case (View.logs) {\n @if (cycles().length > 1) {\n <div class=\"field has-addons pt-2 px-3\">\n <div class=\"control\">\n <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n </div>\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth is-secondary\">\n <select (change)=\"selectIndex($event)\">\n @for (value of cycles(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n }\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\" />\n }\n }\n}\n" }]
|
|
7482
7493
|
}], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
|
|
7483
7494
|
|
|
7484
7495
|
const cycleValue = (cycle, values) => (values[cycle['@id']]?.nodes[0] || { value: [0] }).value;
|
|
@@ -9821,7 +9832,16 @@ const customErrorMessage = {
|
|
|
9821
9832
|
You must instead choose one of the following values: ${listAsCode(allowedValues)}`,
|
|
9822
9833
|
'should be within acceptable range of the lookup value': ({ params }) => `The ${code(params.term['@id'])} value is ${code(params.delta)}% higher than our default value for this Term (${code(params.expected)}).
|
|
9823
9834
|
Please check your data as this may be an error. ${params?.threshold ? `Our threshold is ±${threshold(params?.threshold)}.` : ''}`,
|
|
9824
|
-
'should add missing properties': ({ params: { expected } }) =>
|
|
9835
|
+
'should add missing properties': ({ params: { expected, termType } }) => [
|
|
9836
|
+
`We recommend adding the following properties: ${listAsCode(expected)}.`,
|
|
9837
|
+
termType === TermTermType.liveAnimal
|
|
9838
|
+
? `These properties influence energy requirements and are used for estimating grass intake.`
|
|
9839
|
+
: null,
|
|
9840
|
+
termType === TermTermType.animalManagement ? `These properties will be used for estimating grass intake.` : null,
|
|
9841
|
+
'If not added, default values might be used.'
|
|
9842
|
+
]
|
|
9843
|
+
.filter(Boolean)
|
|
9844
|
+
.join('\n')
|
|
9825
9845
|
};
|
|
9826
9846
|
const requiredPropertyError = (message, error) => {
|
|
9827
9847
|
const field = message.split("'")[1].replace("'", '');
|
|
@@ -10555,6 +10575,7 @@ class SitesMapsComponent {
|
|
|
10555
10575
|
return this._loadPolygonsRequests[id];
|
|
10556
10576
|
}
|
|
10557
10577
|
trackByMarker(_index, { position, label: { text } }) {
|
|
10578
|
+
// TODO: this creates duplicates if the Site are duplicated
|
|
10558
10579
|
return [text, position.lat, position.lng].join('-');
|
|
10559
10580
|
}
|
|
10560
10581
|
trackByPolygon(_index, { id }) {
|