@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';
|
|
@@ -944,6 +944,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
944
944
|
}]
|
|
945
945
|
}] });
|
|
946
946
|
|
|
947
|
+
const EXPANDED_STATE = 'expanded';
|
|
948
|
+
const COLLAPSED_STATE = 'collapsed';
|
|
949
|
+
const EXPAND_TRANSITION = `${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`;
|
|
950
|
+
const loadingAnimation = trigger('loadingAnim', [
|
|
951
|
+
transition(':enter', [
|
|
952
|
+
style({ opacity: 0 }),
|
|
953
|
+
animate('250ms ease-in-out', style({ opacity: 1 })),
|
|
954
|
+
]),
|
|
955
|
+
transition(':leave', [
|
|
956
|
+
style({ opacity: 1 }),
|
|
957
|
+
animate('250ms ease-in-out', style({ opacity: 0 })),
|
|
958
|
+
]),
|
|
959
|
+
]);
|
|
960
|
+
/**
|
|
961
|
+
* I was having an issue getting the content to not be removed from the DOM,
|
|
962
|
+
* before the animation was complete. This animation is a hack to keep the
|
|
963
|
+
* content in the DOM until the animation is complete.
|
|
964
|
+
*/
|
|
965
|
+
const keepContentAnimation = trigger('keepContentAnim', [
|
|
966
|
+
transition(':leave', [
|
|
967
|
+
style({ opacity: 1 }),
|
|
968
|
+
animate('0ms', style({ opacity: 0 })),
|
|
969
|
+
]),
|
|
970
|
+
]);
|
|
971
|
+
const collapseAnimation = trigger('collapseAnim', [
|
|
972
|
+
state(EXPANDED_STATE, style({ height: '*' })),
|
|
973
|
+
state(COLLAPSED_STATE, style({ height: '0' })),
|
|
974
|
+
transition(EXPAND_TRANSITION, animate('0.3s ease-in-out')),
|
|
975
|
+
]);
|
|
947
976
|
/**
|
|
948
977
|
* Widget
|
|
949
978
|
*
|
|
@@ -957,10 +986,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
957
986
|
*/
|
|
958
987
|
class WidgetComponent {
|
|
959
988
|
constructor() {
|
|
960
|
-
/** @ignore */
|
|
961
989
|
this.configIcon = faCog;
|
|
962
|
-
/** @ignore */
|
|
963
990
|
this.collapseIcon = faAngleDown;
|
|
991
|
+
/**
|
|
992
|
+
* Toggles the collapsed state of a widget.
|
|
993
|
+
*/
|
|
964
994
|
this.collapsed = false;
|
|
965
995
|
/**
|
|
966
996
|
* Toggles the top header bar of a widget. This should be true for most
|
|
@@ -972,8 +1002,10 @@ class WidgetComponent {
|
|
|
972
1002
|
/** @ignore */
|
|
973
1003
|
// NOTE: Config is still being worked on.
|
|
974
1004
|
this.hasConfig = false;
|
|
975
|
-
/**
|
|
976
|
-
|
|
1005
|
+
/**
|
|
1006
|
+
* Toggles the ability to collapse a widget. An icon will be displayed in the
|
|
1007
|
+
* header to toggle the collapsed state.
|
|
1008
|
+
*/
|
|
977
1009
|
this.canCollapse = false;
|
|
978
1010
|
}
|
|
979
1011
|
/**
|
|
@@ -997,27 +1029,23 @@ class WidgetComponent {
|
|
|
997
1029
|
}
|
|
998
1030
|
/**
|
|
999
1031
|
* Toggles a widget's collapsed state.
|
|
1000
|
-
*
|
|
1001
|
-
* NOTE: Collapse is still being worked on.
|
|
1002
|
-
* @depracated
|
|
1003
|
-
* @ignore
|
|
1004
1032
|
*/
|
|
1005
1033
|
collapse() {
|
|
1034
|
+
if (!this.canCollapse) {
|
|
1035
|
+
if (isDevMode()) {
|
|
1036
|
+
console.warn('WidgetComponent: collapse() called when canCollapse is false.');
|
|
1037
|
+
}
|
|
1038
|
+
return;
|
|
1039
|
+
}
|
|
1006
1040
|
this.collapsed = !this.collapsed;
|
|
1007
1041
|
}
|
|
1042
|
+
get collapseState() { return this.collapsed ? COLLAPSED_STATE : EXPANDED_STATE; }
|
|
1008
1043
|
}
|
|
1009
1044
|
WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1010
|
-
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
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
animate('250ms ease-in-out', style({ opacity: 1 })),
|
|
1015
|
-
]),
|
|
1016
|
-
transition(':leave', [
|
|
1017
|
-
style({ opacity: 1 }),
|
|
1018
|
-
animate('250ms ease-in-out', style({ opacity: 0 })),
|
|
1019
|
-
]),
|
|
1020
|
-
]),
|
|
1045
|
+
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: [
|
|
1046
|
+
loadingAnimation,
|
|
1047
|
+
collapseAnimation,
|
|
1048
|
+
keepContentAnimation,
|
|
1021
1049
|
], encapsulation: i0.ViewEncapsulation.None });
|
|
1022
1050
|
__decorate([
|
|
1023
1051
|
InputBoolean()
|
|
@@ -1037,17 +1065,10 @@ __decorate([
|
|
|
1037
1065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WidgetComponent, decorators: [{
|
|
1038
1066
|
type: Component,
|
|
1039
1067
|
args: [{ selector: 'seam-widget', encapsulation: ViewEncapsulation.None, animations: [
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
]),
|
|
1045
|
-
transition(':leave', [
|
|
1046
|
-
style({ opacity: 1 }),
|
|
1047
|
-
animate('250ms ease-in-out', style({ opacity: 0 })),
|
|
1048
|
-
]),
|
|
1049
|
-
]),
|
|
1050
|
-
], 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"] }]
|
|
1068
|
+
loadingAnimation,
|
|
1069
|
+
collapseAnimation,
|
|
1070
|
+
keepContentAnimation,
|
|
1071
|
+
], 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"] }]
|
|
1051
1072
|
}], propDecorators: { collapsed: [{
|
|
1052
1073
|
type: Input
|
|
1053
1074
|
}], hasHeader: [{
|