@theseam/ui-common 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/datatable/datatable-action-menu/datatable-action-menu.component.mjs +1 -1
- package/esm2020/datatable/datatable-column-preferences-button/datatable-column-preferences-button.component.mjs +1 -1
- package/esm2020/datatable/datatable-export-button/datatable-export-button.component.mjs +1 -1
- package/esm2020/datatable-dynamic/datatable-dynamic-action-menu/datatable-dynamic-action-menu.component.mjs +1 -1
- package/esm2020/framework/schema-form-controls/schema-form-submit-split/schema-form-submit-split.component.mjs +1 -1
- package/esm2020/framework/top-bar/top-bar.component.mjs +1 -1
- package/esm2020/google-maps/google-maps/google-maps.component.mjs +32 -8
- package/esm2020/google-maps/google-maps-feature-helpers.mjs +13 -1
- package/esm2020/google-maps/google-maps.module.mjs +4 -2
- package/esm2020/google-maps/google-maps.service.mjs +96 -25
- package/esm2020/menu/menu-item.component.mjs +43 -15
- package/esm2020/menu/menu-toggle.directive.mjs +202 -43
- package/esm2020/menu/menu.component.mjs +37 -14
- package/esm2020/utils/geo-json/close-polygons.mjs +38 -0
- package/esm2020/utils/public-api.mjs +2 -1
- package/esm2020/widget/widget/widget.component.mjs +54 -33
- package/fesm2015/theseam-ui-common-datatable-dynamic.mjs +1 -1
- package/fesm2015/theseam-ui-common-datatable-dynamic.mjs.map +1 -1
- package/fesm2015/theseam-ui-common-datatable.mjs +3 -3
- package/fesm2015/theseam-ui-common-datatable.mjs.map +1 -1
- package/fesm2015/theseam-ui-common-framework.mjs +2 -2
- package/fesm2015/theseam-ui-common-framework.mjs.map +1 -1
- package/fesm2015/theseam-ui-common-google-maps.mjs +138 -28
- package/fesm2015/theseam-ui-common-google-maps.mjs.map +1 -1
- package/fesm2015/theseam-ui-common-menu.mjs +442 -228
- package/fesm2015/theseam-ui-common-menu.mjs.map +1 -1
- package/fesm2015/theseam-ui-common-utils.mjs +39 -1
- package/fesm2015/theseam-ui-common-utils.mjs.map +1 -1
- package/fesm2015/theseam-ui-common-widget.mjs +53 -32
- package/fesm2015/theseam-ui-common-widget.mjs.map +1 -1
- package/fesm2020/theseam-ui-common-datatable-dynamic.mjs +1 -1
- package/fesm2020/theseam-ui-common-datatable-dynamic.mjs.map +1 -1
- package/fesm2020/theseam-ui-common-datatable.mjs +3 -3
- package/fesm2020/theseam-ui-common-datatable.mjs.map +1 -1
- package/fesm2020/theseam-ui-common-framework.mjs +2 -2
- package/fesm2020/theseam-ui-common-framework.mjs.map +1 -1
- package/fesm2020/theseam-ui-common-google-maps.mjs +141 -32
- package/fesm2020/theseam-ui-common-google-maps.mjs.map +1 -1
- package/fesm2020/theseam-ui-common-menu.mjs +432 -225
- package/fesm2020/theseam-ui-common-menu.mjs.map +1 -1
- package/fesm2020/theseam-ui-common-utils.mjs +39 -1
- package/fesm2020/theseam-ui-common-utils.mjs.map +1 -1
- package/fesm2020/theseam-ui-common-widget.mjs +53 -32
- package/fesm2020/theseam-ui-common-widget.mjs.map +1 -1
- package/google-maps/google-maps/google-maps.component.d.ts +8 -1
- package/google-maps/google-maps-feature-helpers.d.ts +3 -0
- package/google-maps/google-maps.module.d.ts +1 -1
- package/google-maps/google-maps.service.d.ts +7 -0
- package/menu/menu-item.component.d.ts +20 -9
- package/menu/menu-toggle.directive.d.ts +34 -11
- package/menu/menu.component.d.ts +16 -2
- package/package.json +1 -1
- package/utils/geo-json/close-polygons.d.ts +9 -0
- package/utils/public-api.d.ts +1 -0
- package/widget/widget/widget.component.d.ts +10 -11
- package/widget/widget/widget.component.scss +12 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, Directive, Optional, Inject, Input, Component, ChangeDetectionStrategy, NgModule, ViewEncapsulation, HostBinding, ContentChild, EventEmitter, Output, Injectable } from '@angular/core';
|
|
3
|
+
import { InjectionToken, Directive, Optional, Inject, Input, Component, ChangeDetectionStrategy, NgModule, ViewEncapsulation, HostBinding, ContentChild, EventEmitter, Output, isDevMode, Injectable } from '@angular/core';
|
|
4
4
|
import { Subject, BehaviorSubject, throwError, of } from 'rxjs';
|
|
5
5
|
import { auditTime, takeUntil, take, switchMap, filter, map } from 'rxjs/operators';
|
|
6
6
|
import { getClosestWidgetCdkDrag } from '@theseam/ui-common/utils';
|
|
@@ -18,7 +18,7 @@ import { __decorate } from 'tslib';
|
|
|
18
18
|
import * as i1$2 from '@theseam/ui-common/table';
|
|
19
19
|
import { TheSeamTableModule } from '@theseam/ui-common/table';
|
|
20
20
|
import { TheSeamTableCellTypesModule } from '@theseam/ui-common/table-cell-types';
|
|
21
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
21
|
+
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
22
22
|
import { faCog, faAngleDown } from '@fortawesome/free-solid-svg-icons';
|
|
23
23
|
import * as i2$1 from '@fortawesome/angular-fontawesome';
|
|
24
24
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
@@ -946,6 +946,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
946
946
|
}]
|
|
947
947
|
}] });
|
|
948
948
|
|
|
949
|
+
const EXPANDED_STATE = 'expanded';
|
|
950
|
+
const COLLAPSED_STATE = 'collapsed';
|
|
951
|
+
const EXPAND_TRANSITION = `${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`;
|
|
952
|
+
const loadingAnimation = trigger('loadingAnim', [
|
|
953
|
+
transition(':enter', [
|
|
954
|
+
style({ opacity: 0 }),
|
|
955
|
+
animate('250ms ease-in-out', style({ opacity: 1 })),
|
|
956
|
+
]),
|
|
957
|
+
transition(':leave', [
|
|
958
|
+
style({ opacity: 1 }),
|
|
959
|
+
animate('250ms ease-in-out', style({ opacity: 0 })),
|
|
960
|
+
]),
|
|
961
|
+
]);
|
|
962
|
+
/**
|
|
963
|
+
* I was having an issue getting the content to not be removed from the DOM,
|
|
964
|
+
* before the animation was complete. This animation is a hack to keep the
|
|
965
|
+
* content in the DOM until the animation is complete.
|
|
966
|
+
*/
|
|
967
|
+
const keepContentAnimation = trigger('keepContentAnim', [
|
|
968
|
+
transition(':leave', [
|
|
969
|
+
style({ opacity: 1 }),
|
|
970
|
+
animate('0ms', style({ opacity: 0 })),
|
|
971
|
+
]),
|
|
972
|
+
]);
|
|
973
|
+
const collapseAnimation = trigger('collapseAnim', [
|
|
974
|
+
state(EXPANDED_STATE, style({ height: '*' })),
|
|
975
|
+
state(COLLAPSED_STATE, style({ height: '0' })),
|
|
976
|
+
transition(EXPAND_TRANSITION, animate('0.3s ease-in-out')),
|
|
977
|
+
]);
|
|
949
978
|
/**
|
|
950
979
|
* Widget
|
|
951
980
|
*
|
|
@@ -959,10 +988,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
959
988
|
*/
|
|
960
989
|
class WidgetComponent {
|
|
961
990
|
constructor() {
|
|
962
|
-
/** @ignore */
|
|
963
991
|
this.configIcon = faCog;
|
|
964
|
-
/** @ignore */
|
|
965
992
|
this.collapseIcon = faAngleDown;
|
|
993
|
+
/**
|
|
994
|
+
* Toggles the collapsed state of a widget.
|
|
995
|
+
*/
|
|
966
996
|
this.collapsed = false;
|
|
967
997
|
/**
|
|
968
998
|
* Toggles the top header bar of a widget. This should be true for most
|
|
@@ -974,8 +1004,10 @@ class WidgetComponent {
|
|
|
974
1004
|
/** @ignore */
|
|
975
1005
|
// NOTE: Config is still being worked on.
|
|
976
1006
|
this.hasConfig = false;
|
|
977
|
-
/**
|
|
978
|
-
|
|
1007
|
+
/**
|
|
1008
|
+
* Toggles the ability to collapse a widget. An icon will be displayed in the
|
|
1009
|
+
* header to toggle the collapsed state.
|
|
1010
|
+
*/
|
|
979
1011
|
this.canCollapse = false;
|
|
980
1012
|
}
|
|
981
1013
|
/**
|
|
@@ -999,27 +1031,23 @@ class WidgetComponent {
|
|
|
999
1031
|
}
|
|
1000
1032
|
/**
|
|
1001
1033
|
* Toggles a widget's collapsed state.
|
|
1002
|
-
*
|
|
1003
|
-
* NOTE: Collapse is still being worked on.
|
|
1004
|
-
* @depracated
|
|
1005
|
-
* @ignore
|
|
1006
1034
|
*/
|
|
1007
1035
|
collapse() {
|
|
1036
|
+
if (!this.canCollapse) {
|
|
1037
|
+
if (isDevMode()) {
|
|
1038
|
+
console.warn('WidgetComponent: collapse() called when canCollapse is false.');
|
|
1039
|
+
}
|
|
1040
|
+
return;
|
|
1041
|
+
}
|
|
1008
1042
|
this.collapsed = !this.collapsed;
|
|
1009
1043
|
}
|
|
1044
|
+
get collapseState() { return this.collapsed ? COLLAPSED_STATE : EXPANDED_STATE; }
|
|
1010
1045
|
}
|
|
1011
1046
|
WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1012
|
-
WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: WidgetComponent, selector: "seam-widget", inputs: { collapsed: "collapsed", hasHeader: "hasHeader", titleText: "titleText", icon: "icon", iconClass: "iconClass", loading: "loading", hasConfig: "hasConfig", canCollapse: "canCollapse" }, queries: [{ propertyName: "iconTpl", first: true, predicate: WidgetIconTplDirective, descendants: true, static: true }, { propertyName: "titleTpl", first: true, predicate: WidgetTitleTplDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"seam-widget border rounded overflow-hidden\">\n <div class=\"widget-header\" seamWidgetDragHandle *ngIf=\"hasHeader\">\n <div class=\"widget-header-content p-2 text-nowrap\">\n <span class=\"mr-1 widget-header-icon\">\n <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n <ng-template\n [ngTemplateOutlet]=\"iconTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noIconTpl>\n <fa-icon *ngIf=\"_iconObj\"\n class=\"widget-header-icon--fa {{ iconClass }}\"\n [icon]=\"_iconObj\"></fa-icon>\n <img *ngIf=\"_iconUrl\"\n class=\"widget-header-icon--img {{ iconClass }}\"\n [src]=\"_iconUrl\" [alt]=\"titleText\">\n </ng-template>\n </span>\n <span class=\"widget-header-title text-truncate\">\n <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n <ng-template\n [ngTemplateOutlet]=\"titleTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: titleText, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n </span>\n </div>\n <div class=\"widget-header-btns-container\" *ngIf=\"hasConfig || canCollapse\">\n <div *ngIf=\"hasConfig\">\n
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
animate('250ms ease-in-out', style({ opacity: 1 })),
|
|
1017
|
-
]),
|
|
1018
|
-
transition(':leave', [
|
|
1019
|
-
style({ opacity: 1 }),
|
|
1020
|
-
animate('250ms ease-in-out', style({ opacity: 0 })),
|
|
1021
|
-
]),
|
|
1022
|
-
]),
|
|
1047
|
+
WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: WidgetComponent, selector: "seam-widget", inputs: { collapsed: "collapsed", hasHeader: "hasHeader", titleText: "titleText", icon: "icon", iconClass: "iconClass", loading: "loading", hasConfig: "hasConfig", canCollapse: "canCollapse" }, queries: [{ propertyName: "iconTpl", first: true, predicate: WidgetIconTplDirective, descendants: true, static: true }, { propertyName: "titleTpl", first: true, predicate: WidgetTitleTplDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"seam-widget border rounded overflow-hidden\">\n <div class=\"widget-header\" seamWidgetDragHandle *ngIf=\"hasHeader\">\n <div class=\"widget-header-content p-2 text-nowrap\">\n <span class=\"mr-1 widget-header-icon\">\n <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n <ng-template\n [ngTemplateOutlet]=\"iconTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noIconTpl>\n <fa-icon *ngIf=\"_iconObj\"\n class=\"widget-header-icon--fa {{ iconClass }}\"\n [icon]=\"_iconObj\"></fa-icon>\n <img *ngIf=\"_iconUrl\"\n class=\"widget-header-icon--img {{ iconClass }}\"\n [src]=\"_iconUrl\" [alt]=\"titleText\">\n </ng-template>\n </span>\n <span class=\"widget-header-title text-truncate\">\n <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n <ng-template\n [ngTemplateOutlet]=\"titleTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: titleText, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n </span>\n </div>\n <div class=\"widget-header-btns-container\" *ngIf=\"hasConfig || canCollapse\">\n <!-- <div *ngIf=\"hasConfig\">\n <button seamIconBtn [icon]=\"configIcon\"\n class=\"widget-header-btn-config\"\n [iconType]=\"null\">\n <span class=\"sr-only\">Widget configuration menu</span>\n </button>\n <button seamButton class=\"widget-header-btn-config p-0\">\n <seam-icon class=\"d-block\" [icon]=\"configIcon\" iconClass=\"text-secondary\"></seam-icon>\n <span class=\"sr-only\">Widget configuration menu</span>\n </button>\n </div> -->\n\n <div *ngIf=\"canCollapse\" class=\"px-0\">\n\n <button seamButton class=\"widget-header-btn-collapse p-0 mr-1 h-100\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\">\n <seam-icon class=\"d-block\"\n [icon]=\"collapseIcon\"\n iconClass=\"text-secondary\">\n </seam-icon>\n <span class=\"sr-only\">Widget collapse</span>\n </button>\n <!-- iconType=\"borderless-styled-square\" -->\n <!-- style=\"margin-left: -10px; margin-right: -5px;\" -->\n\n <!-- <button seamIconBtn class=\"widget-header-btn-collapse\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\"\n btnTheme=\"secondary\"\n [icon]=\"collapseIcon\"\n iconType=\"borderless-styled-square\"\n size=\"xs\"\n btnSize=\"sm\"\n >\n <seam-icon class=\"d-block\"\n [icon]=\"collapseIcon\"\n iconClass=\"text-secondary\"\n style=\"margin-left: -10px; margin-right: -5px;\"\n iconType=\"borderless-styled-square\"></seam-icon>\n <span class=\"sr-only\">Widget collapse</span>\n </button> -->\n </div>\n </div>\n </div>\n <div class=\"position-relative overflow-hidden\" [style.height.px]=\"loading ? 150 : undefined\" [@collapseAnim]=\"collapseState\">\n <ng-container *ngIf=\"!collapsed\">\n <div class=\"p-2\" *ngIf=\"!loading else loadingTpl\" @keepContentAnim>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"seam-widget-footer\"></ng-content>\n <ng-template #loadingTpl>\n <div class=\"position-absolute\" @loadingAnim style=\"top:0;right:0;bottom:0;left:0\">\n <seam-loading [theme]=\"'primary'\"></seam-loading>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: ["seam-widget{display:block;font-size:15px}seam-widget .seam-widget{background:#FFFFFF;box-shadow:none}seam-widget .widget-header{display:flex;flex-direction:row;border-bottom:1px solid #dee2e6;background:#F4F4F4;font-size:17px}seam-widget .widget-header .widget-header-content{flex:1 1 100%}seam-widget .widget-header .widget-header-btns-container{display:flex;flex-direction:row}seam-widget .widget-header .widget-header-btns-container>div{display:flex;flex-direction:column;justify-content:center;padding:4px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .svg-inline--fa{transform:rotate(0);transition:.3s ease-in-out transform}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse.widget-header-btn-collapse--active .svg-inline--fa{transform:rotate(90deg)}seam-widget .widget-header .widget-header-title{font-size:17px}seam-widget .widget-header-icon{display:inline-block;vertical-align:top;max-height:20px;max-width:20px;height:20px;width:20px;color:currentColor}seam-widget .widget-header-icon .widget-header-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;max-height:20px;max-width:20px;height:20px;width:20px}seam-widget .widget-header-icon .widget-header-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header-icon .widget-header-icon--img{height:100%;max-height:20px;max-width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i4.LoadingComponent, selector: "seam-loading", inputs: ["theme"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: WidgetDragHandleDirective, selector: "[seamWidgetDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [
|
|
1048
|
+
loadingAnimation,
|
|
1049
|
+
collapseAnimation,
|
|
1050
|
+
keepContentAnimation,
|
|
1023
1051
|
], encapsulation: i0.ViewEncapsulation.None });
|
|
1024
1052
|
__decorate([
|
|
1025
1053
|
InputBoolean()
|
|
@@ -1039,17 +1067,10 @@ __decorate([
|
|
|
1039
1067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WidgetComponent, decorators: [{
|
|
1040
1068
|
type: Component,
|
|
1041
1069
|
args: [{ selector: 'seam-widget', encapsulation: ViewEncapsulation.None, animations: [
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
]),
|
|
1047
|
-
transition(':leave', [
|
|
1048
|
-
style({ opacity: 1 }),
|
|
1049
|
-
animate('250ms ease-in-out', style({ opacity: 0 })),
|
|
1050
|
-
]),
|
|
1051
|
-
]),
|
|
1052
|
-
], template: "<div class=\"seam-widget border rounded overflow-hidden\">\n <div class=\"widget-header\" seamWidgetDragHandle *ngIf=\"hasHeader\">\n <div class=\"widget-header-content p-2 text-nowrap\">\n <span class=\"mr-1 widget-header-icon\">\n <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n <ng-template\n [ngTemplateOutlet]=\"iconTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noIconTpl>\n <fa-icon *ngIf=\"_iconObj\"\n class=\"widget-header-icon--fa {{ iconClass }}\"\n [icon]=\"_iconObj\"></fa-icon>\n <img *ngIf=\"_iconUrl\"\n class=\"widget-header-icon--img {{ iconClass }}\"\n [src]=\"_iconUrl\" [alt]=\"titleText\">\n </ng-template>\n </span>\n <span class=\"widget-header-title text-truncate\">\n <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n <ng-template\n [ngTemplateOutlet]=\"titleTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: titleText, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n </span>\n </div>\n <div class=\"widget-header-btns-container\" *ngIf=\"hasConfig || canCollapse\">\n <div *ngIf=\"hasConfig\">\n <!-- <button seamIconBtn [icon]=\"configIcon\"\n class=\"widget-header-btn-config\"\n iconType=\"\">\n <span class=\"sr-only\">Widget configuration menu</span>\n </button> -->\n <button seamButton class=\"widget-header-btn-config p-0\">\n <seam-icon class=\"d-block\" [icon]=\"configIcon\" iconClass=\"text-secondary\"></seam-icon>\n <span class=\"sr-only\">Widget configuration menu</span>\n </button>\n </div>\n\n <div *ngIf=\"canCollapse\" class=\"px-0\">\n <button seamButton class=\"widget-header-btn-collapse p-0\" (click)=\"collapse()\">\n <seam-icon class=\"d-block\" [icon]=\"collapseIcon\" iconClass=\"text-secondary\" style=\"margin-left: -10px; margin-right: -5px;\"></seam-icon>\n <span class=\"sr-only\">Widget collapse</span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"position-relative\" [style.height.px]=\"loading ? 150 : undefined\">\n <ng-container *ngIf=\"!collapsed\">\n <div class=\"p-2\" *ngIf=\"!loading else loadingTpl\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"seam-widget-footer\"></ng-content>\n <ng-template #loadingTpl>\n <div class=\"position-absolute\" @loadingAnim style=\"top:0;right:0;bottom:0;left:0\">\n <seam-loading [theme]=\"'primary'\"></seam-loading>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: ["seam-widget{display:block;font-size:15px}seam-widget .seam-widget{background:#FFFFFF;box-shadow:none}seam-widget .widget-header{display:flex;flex-direction:row;border-bottom:1px solid #dee2e6;background:#F4F4F4;font-size:17px}seam-widget .widget-header .widget-header-content{flex:1 1 100%}seam-widget .widget-header .widget-header-btns-container{display:flex;flex-direction:row}seam-widget .widget-header .widget-header-btns-container>div{display:flex;flex-direction:column;justify-content:center;padding:4px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:15px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-title{font-size:17px}seam-widget .widget-header-icon{display:inline-block;vertical-align:top;max-height:20px;max-width:20px;height:20px;width:20px;color:currentColor}seam-widget .widget-header-icon .widget-header-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;max-height:20px;max-width:20px;height:20px;width:20px}seam-widget .widget-header-icon .widget-header-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header-icon .widget-header-icon--img{height:100%;max-height:20px;max-width:20px}\n"] }]
|
|
1070
|
+
loadingAnimation,
|
|
1071
|
+
collapseAnimation,
|
|
1072
|
+
keepContentAnimation,
|
|
1073
|
+
], template: "<div class=\"seam-widget border rounded overflow-hidden\">\n <div class=\"widget-header\" seamWidgetDragHandle *ngIf=\"hasHeader\">\n <div class=\"widget-header-content p-2 text-nowrap\">\n <span class=\"mr-1 widget-header-icon\">\n <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n <ng-template\n [ngTemplateOutlet]=\"iconTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noIconTpl>\n <fa-icon *ngIf=\"_iconObj\"\n class=\"widget-header-icon--fa {{ iconClass }}\"\n [icon]=\"_iconObj\"></fa-icon>\n <img *ngIf=\"_iconUrl\"\n class=\"widget-header-icon--img {{ iconClass }}\"\n [src]=\"_iconUrl\" [alt]=\"titleText\">\n </ng-template>\n </span>\n <span class=\"widget-header-title text-truncate\">\n <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n <ng-template\n [ngTemplateOutlet]=\"titleTpl.template\"\n [ngTemplateOutletContext]=\"{ $implicit: titleText, icon: icon, title: titleText }\">\n </ng-template>\n </ng-container>\n <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n </span>\n </div>\n <div class=\"widget-header-btns-container\" *ngIf=\"hasConfig || canCollapse\">\n <!-- <div *ngIf=\"hasConfig\">\n <button seamIconBtn [icon]=\"configIcon\"\n class=\"widget-header-btn-config\"\n [iconType]=\"null\">\n <span class=\"sr-only\">Widget configuration menu</span>\n </button>\n <button seamButton class=\"widget-header-btn-config p-0\">\n <seam-icon class=\"d-block\" [icon]=\"configIcon\" iconClass=\"text-secondary\"></seam-icon>\n <span class=\"sr-only\">Widget configuration menu</span>\n </button>\n </div> -->\n\n <div *ngIf=\"canCollapse\" class=\"px-0\">\n\n <button seamButton class=\"widget-header-btn-collapse p-0 mr-1 h-100\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\">\n <seam-icon class=\"d-block\"\n [icon]=\"collapseIcon\"\n iconClass=\"text-secondary\">\n </seam-icon>\n <span class=\"sr-only\">Widget collapse</span>\n </button>\n <!-- iconType=\"borderless-styled-square\" -->\n <!-- style=\"margin-left: -10px; margin-right: -5px;\" -->\n\n <!-- <button seamIconBtn class=\"widget-header-btn-collapse\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\"\n btnTheme=\"secondary\"\n [icon]=\"collapseIcon\"\n iconType=\"borderless-styled-square\"\n size=\"xs\"\n btnSize=\"sm\"\n >\n <seam-icon class=\"d-block\"\n [icon]=\"collapseIcon\"\n iconClass=\"text-secondary\"\n style=\"margin-left: -10px; margin-right: -5px;\"\n iconType=\"borderless-styled-square\"></seam-icon>\n <span class=\"sr-only\">Widget collapse</span>\n </button> -->\n </div>\n </div>\n </div>\n <div class=\"position-relative overflow-hidden\" [style.height.px]=\"loading ? 150 : undefined\" [@collapseAnim]=\"collapseState\">\n <ng-container *ngIf=\"!collapsed\">\n <div class=\"p-2\" *ngIf=\"!loading else loadingTpl\" @keepContentAnim>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"seam-widget-footer\"></ng-content>\n <ng-template #loadingTpl>\n <div class=\"position-absolute\" @loadingAnim style=\"top:0;right:0;bottom:0;left:0\">\n <seam-loading [theme]=\"'primary'\"></seam-loading>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</div>\n", styles: ["seam-widget{display:block;font-size:15px}seam-widget .seam-widget{background:#FFFFFF;box-shadow:none}seam-widget .widget-header{display:flex;flex-direction:row;border-bottom:1px solid #dee2e6;background:#F4F4F4;font-size:17px}seam-widget .widget-header .widget-header-content{flex:1 1 100%}seam-widget .widget-header .widget-header-btns-container{display:flex;flex-direction:row}seam-widget .widget-header .widget-header-btns-container>div{display:flex;flex-direction:column;justify-content:center;padding:4px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .svg-inline--fa{transform:rotate(0);transition:.3s ease-in-out transform}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse.widget-header-btn-collapse--active .svg-inline--fa{transform:rotate(90deg)}seam-widget .widget-header .widget-header-title{font-size:17px}seam-widget .widget-header-icon{display:inline-block;vertical-align:top;max-height:20px;max-width:20px;height:20px;width:20px;color:currentColor}seam-widget .widget-header-icon .widget-header-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;max-height:20px;max-width:20px;height:20px;width:20px}seam-widget .widget-header-icon .widget-header-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header-icon .widget-header-icon--img{height:100%;max-height:20px;max-width:20px}\n"] }]
|
|
1053
1074
|
}], propDecorators: { collapsed: [{
|
|
1054
1075
|
type: Input
|
|
1055
1076
|
}], hasHeader: [{
|