@coolon/angular-ui-powerups 12.4.0-alpha.46 → 12.4.0-alpha.47

package/esm2015/lib/components/section-header/section-header.component.js

@@ -1,7 +1,12 @@
 import { Component, HostBinding, Input } from '@angular/core';
-export class SectionHeaderComponent {
+import { DisposableComponent } from '../disposable-component';
+export class SectionHeaderComponent extends DisposableComponent {
     constructor() {
-        this.underline = false;
+        super();
+        // readonly i18n = I18nMarsUi.components.layout.header;
+        this.size = 'medium';
+        this.borderTop = false;
+        this.borderBottom = false;
     }
     ngOnInit() {
     }
@@ -9,12 +14,14 @@ export class SectionHeaderComponent {
 SectionHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-section-header',
-                template: "<ng-content></ng-content>\n",
-                styles: [":host{--def-border-bottom-color:var(--border-bottom-color,rgba(0,0,0,0.07));display:block;padding:8px 16px;font-size:12px;line-height:12px;color:rgba(0,0,0,.5)}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]
+                template: "<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n",
+                styles: [":host{display:flex;flex-direction:row;align-items:center;--resolved-padding:var(--padding,var(--default-padding));--resolved-padding-right:var(--padding-right,calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color:rgba(0,0,0,.67)}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:rgba(0,0,0,.67)}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:rgba(0,0,0,.67)}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:rgba(0,0,0,.67)}:host.border-top{border-top:var(--pinstripe-border)}:host.border-bottom{border-bottom:var(--pinstripe-border)}span{white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}span.container-start{justify-content:flex-start}span.container-middle{justify-content:center;flex:1;width:0;overflow:hidden}span.container-end{justify-content:flex-end}"]
             },] }
 ];
 SectionHeaderComponent.ctorParameters = () => [];
 SectionHeaderComponent.propDecorators = {
-    underline: [{ type: Input }, { type: HostBinding, args: ['class.underline',] }]
+    size: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    borderTop: [{ type: Input }, { type: HostBinding, args: ['class.border-top',] }],
+    borderBottom: [{ type: Input }, { type: HostBinding, args: ['class.border-bottom',] }]
 };
 //# sourceMappingURL=section-header.component.js.map

package/esm2015/lib/components/section-header/section-header.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-header.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/section-header/section-header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AAOtE,MAAM,OAAO,sBAAsB;IAMjC;QAFA,cAAS,GAAG,KAAK,CAAC;IAEF,CAAC;IAEjB,QAAQ;IACR,CAAC;;;YAdF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,uCAA8C;;aAE/C;;;;wBAGE,KAAK,YACL,WAAW,SAAC,iBAAiB","sourcesContent":["import { Component, HostBinding, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'aup-section-header',\n  templateUrl: './section-header.component.html',\n  styleUrls: ['./section-header.component.scss']\n})\nexport class SectionHeaderComponent implements OnInit {\n\n  @Input()\n  @HostBinding('class.underline')\n  underline = false;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n"]}
+{"version":3,"file":"section-header.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/section-header/section-header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAO9D,MAAM,OAAO,sBAAuB,SAAQ,mBAAmB;IAgB7D;QACE,KAAK,EAAE,CAAC;QAfV,uDAAuD;QAIvD,SAAI,GAA6C,QAAQ,CAAC;QAI1D,cAAS,GAAG,KAAK,CAAC;QAIlB,iBAAY,GAAG,KAAK,CAAC;IAIrB,CAAC;IAED,QAAQ;IACR,CAAC;;;YA1BF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,uTAA8C;;aAE/C;;;;mBAKE,KAAK,YACL,WAAW,SAAC,OAAO;wBAGnB,KAAK,YACL,WAAW,SAAC,kBAAkB;2BAG9B,KAAK,YACL,WAAW,SAAC,qBAAqB","sourcesContent":["import { Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { DisposableComponent } from '../disposable-component';\n\n@Component({\n  selector: 'aup-section-header',\n  templateUrl: './section-header.component.html',\n  styleUrls: ['./section-header.component.scss']\n})\nexport class SectionHeaderComponent extends DisposableComponent implements OnInit {\n\n  // readonly i18n = I18nMarsUi.components.layout.header;\n\n  @Input()\n  @HostBinding('class')\n  size: 'toolbar' | 'large' | 'medium' | 'small' = 'medium';\n\n  @Input()\n  @HostBinding('class.border-top')\n  borderTop = false;\n\n  @Input()\n  @HostBinding('class.border-bottom')\n  borderBottom = false;\n\n  constructor() {\n    super();\n  }\n\n  ngOnInit(): void {\n  }\n\n}\n"]}

package/esm2015/lib/components/section-header/section-header.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SectionHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"aup-section-header","template":"<ng-content></ng-content>\n","styles":[":host{--def-border-bottom-color:var(--border-bottom-color,rgba(0,0,0,0.07));display:block;padding:8px 16px;font-size:12px;line-height:12px;color:rgba(0,0,0,.5)}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]}]}],"members":{"underline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":10,"character":3},"arguments":["class.underline"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SectionHeaderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":8,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"aup-section-header","template":"<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n","styles":[":host{display:flex;flex-direction:row;align-items:center;--resolved-padding:var(--padding,var(--default-padding));--resolved-padding-right:var(--padding-right,calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color:rgba(0,0,0,.67)}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:rgba(0,0,0,.67)}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:rgba(0,0,0,.67)}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:rgba(0,0,0,.67)}:host.border-top{border-top:var(--pinstripe-border)}:host.border-bottom{border-bottom:var(--pinstripe-border)}span{white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}span.container-start{justify-content:flex-start}span.container-middle{justify-content:center;flex:1;width:0;overflow:hidden}span.container-end{justify-content:flex-end}"]}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":13,"character":3},"arguments":["class"]}]}],"borderTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":17,"character":3},"arguments":["class.border-top"]}]}],"borderBottom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":21,"character":3},"arguments":["class.border-bottom"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

package/fesm2015/coolon-angular-ui-powerups.js

@@ -1977,9 +1977,13 @@ ScrollContainerComponent.decorators = [
 ];
 ScrollContainerComponent.ctorParameters = () => [];
 
-class SectionHeaderComponent {
+class SectionHeaderComponent extends DisposableComponent {
     constructor() {
-        this.underline = false;
+        super();
+        // readonly i18n = I18nMarsUi.components.layout.header;
+        this.size = 'medium';
+        this.borderTop = false;
+        this.borderBottom = false;
     }
     ngOnInit() {
     }
@@ -1987,13 +1991,15 @@ class SectionHeaderComponent {
 SectionHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-section-header',
-                template: "<ng-content></ng-content>\n",
-                styles: [":host{--def-border-bottom-color:var(--border-bottom-color,rgba(0,0,0,0.07));display:block;padding:8px 16px;font-size:12px;line-height:12px;color:rgba(0,0,0,.5)}:host.underline{border-bottom:1px solid var(--def-border-bottom-color)}"]
+                template: "<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n",
+                styles: [":host{display:flex;flex-direction:row;align-items:center;--resolved-padding:var(--padding,var(--default-padding));--resolved-padding-right:var(--padding-right,calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color:rgba(0,0,0,.67)}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:rgba(0,0,0,.67)}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:rgba(0,0,0,.67)}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:rgba(0,0,0,.67)}:host.border-top{border-top:var(--pinstripe-border)}:host.border-bottom{border-bottom:var(--pinstripe-border)}span{white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}span.container-start{justify-content:flex-start}span.container-middle{justify-content:center;flex:1;width:0;overflow:hidden}span.container-end{justify-content:flex-end}"]
             },] }
 ];
 SectionHeaderComponent.ctorParameters = () => [];
 SectionHeaderComponent.propDecorators = {
-    underline: [{ type: Input }, { type: HostBinding, args: ['class.underline',] }]
+    size: [{ type: Input }, { type: HostBinding, args: ['class',] }],
+    borderTop: [{ type: Input }, { type: HostBinding, args: ['class.border-top',] }],
+    borderBottom: [{ type: Input }, { type: HostBinding, args: ['class.border-bottom',] }]
 };
 
 class SwitchCaseOption {