@sd-angular/core 1.1.2 → 1.1.3

package/fesm2015/sd-angular-core-group.js

@@ -9,6 +9,9 @@ class SdGroupComponent {
         this.isExpanded = true;
         this.expandable = false;
         this.onExpand = () => {
+            if (this.expandable) {
+                return;
+            }
             this.isExpanded = !this.isExpanded;
         };
         this.open = () => {
@@ -18,19 +21,22 @@ class SdGroupComponent {
             this.isExpanded = false;
         };
     }
-    _isExpanded(val) {
+    set _isExpanded(val) {
         this.isExpanded = (val === '') || val;
     }
-    _expandable(val) {
+    set _expandable(val) {
         this.expandable = (val === '') || val;
     }
     ngOnInit() {
+        if (this.expandable) {
+            this.isExpanded = true;
+        }
     }
 }
 SdGroupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sd-group',
-                template: "<div class=\"c-sd-group\">\r\n  <div (click)=\"onExpand()\" class=\"c-sd-group-header\">\r\n    <div #headerTitle>\r\n      <ng-content select=\"[sdGroupTitle]\"></ng-content>\r\n    </div>\r\n    <sd-header-title *ngIf=\"!headerTitle?.children?.length\" [title]=\"title\"\r\n      [description]=\"description\" [iconLeft]=\"isExpanded?'keyboard_arrow_down':'chevron_right'\">\r\n    </sd-header-title>\r\n    <!-- <ng-container *ngIf=\"configHeader\">\r\n      <sd-header-title *ngIf=\"!configHeader.isViewIconRight\" \r\n        [title]=\"configHeader?.title\" \r\n        [description]=\"configHeader?.description\"\r\n        [iconLeft]=\"isExpand?'keyboard_arrow_down':'chevron_right'\">\r\n      </sd-header-title>\r\n      <sd-header-title *ngIf=\"configHeader.isViewIconRight\" \r\n        class=\"w-100\"\r\n        [title]=\"configHeader?.title\" \r\n        [description]=\"configHeader?.description\"\r\n        [iconRight]=\"isExpand?'keyboard_arrow_down':'chevron_right'\">\r\n      </sd-header-title>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!configHeader\">\r\n      <ng-content select=\"[sdGroupHeader]\"></ng-content>\r\n    </ng-container> -->\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isExpanded\">\r\n    <div class=\"c-sd-group-body\">\r\n      <ng-content select=\"[sdGroupBody]\"></ng-content>\r\n    </div>\r\n  </ng-container>\r\n  <ng-content select=\"[sdGroupFooter]\"></ng-content>\r\n</div>",
+                template: "<div class=\"c-sd-group\">\r\n  <div (click)=\"onExpand()\" class=\"c-sd-group-header\">\r\n    <div #headerTitle>\r\n      <ng-content select=\"[sdGroupTitle]\"></ng-content>\r\n    </div>\r\n    <sd-header-title *ngIf=\"!headerTitle?.children?.length\" [title]=\"title\"\r\n      [tooltip]=\"tooltip\"\r\n      [description]=\"description\" \r\n      [icon]=\"icon || (isExpanded ? 'keyboard_arrow_down':'chevron_right')\">\r\n      <div sdHeaderRight>\r\n        <ng-content select=\"[sdGroupHeaderRight]\"></ng-content>\r\n      </div>\r\n    </sd-header-title>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isExpanded\">\r\n    <div [style.height]=\"height\" class=\"c-sd-group-body\">\r\n      <ng-content select=\"[sdGroupBody]\"></ng-content>\r\n    </div>\r\n  </ng-container>\r\n  <ng-content select=\"[sdGroupFooter]\"></ng-content>\r\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".c-sd-group{background:#fff;border:1px solid #f0f0f0;border-radius:4px;overflow:hidden}.c-sd-group .c-sd-group-header{align-items:center;background:#fff;cursor:pointer;display:flex;padding:12px}.c-sd-group .c-sd-group-header:hover{background:#f5f5f5}.c-sd-group .c-sd-group-body{display:flex;flex-direction:column;padding:8px 12px}"]
             },] }
@@ -40,6 +46,7 @@ SdGroupComponent.propDecorators = {
     title: [{ type: Input }],
     description: [{ type: Input }],
     icon: [{ type: Input }],
+    tooltip: [{ type: Input }],
     height: [{ type: Input }],
     _isExpanded: [{ type: Input, args: ['isExpanded',] }],
     _expandable: [{ type: Input, args: ['expandable',] }]

package/fesm2015/sd-angular-core-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-group.js","sources":["../../../../projects/sd-core/group/src/lib/group/group.component.ts","../../../../projects/sd-core/group/src/lib/group.module.ts","../../../../projects/sd-core/group/sd-angular-core-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\r\nimport { Configheader } from '../group.model';\r\n\r\n@Component({\r\n  selector: 'sd-group',\r\n  templateUrl: './group.component.html',\r\n  styleUrls: ['./group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdGroupComponent implements OnInit {\r\n  @Input() title: string;\r\n  @Input() description: string;\r\n  @Input() icon: string;\r\n  @Input() height = 'auto';\r\n  isExpanded = true;\r\n  @Input('isExpanded') _isExpanded(val: boolean | '') {\r\n    this.isExpanded = (val === '') || val;\r\n  }\r\n\r\n  expandable = false;\r\n  @Input('expandable') _expandable(val: boolean | '') {\r\n    this.expandable = (val === '') || val;\r\n  }\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  onExpand = () => {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  open = () => {\r\n    this.isExpanded = true;\r\n  }\r\n\r\n  close = () => {\r\n    this.isExpanded = false;\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdGroupComponent } from './group/group.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdHeaderTitleModule } from '@sd-angular/core/header-title';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    SdHeaderTitleModule\r\n  ],\r\n  declarations: [SdGroupComponent],\r\n  exports: [SdGroupComponent]\r\n})\r\nexport class SdGroupModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {SdGroupComponent as ɵa} from './src/lib/group/group.component';"],"names":[],"mappings":";;;;;MASa,gBAAgB;IAc3B;QAVS,WAAM,GAAG,MAAM,CAAC;QACzB,eAAU,GAAG,IAAI,CAAC;QAKlB,eAAU,GAAG,KAAK,CAAC;QASnB,aAAQ,GAAG;YACT,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;SACpC,CAAA;QAED,SAAI,GAAG;YACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAA;QAED,UAAK,GAAG;YACN,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;SACzB,CAAA;KAfe;IARK,WAAW,CAAC,GAAiB;QAChD,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;KACvC;IAGoB,WAAW,CAAC,GAAiB;QAChD,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;KACvC;IAGD,QAAQ;KACP;;;YAvBF,SAAS,SAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,o6CAAqC;gBAErC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;oBAEE,KAAK;0BACL,KAAK;mBACL,KAAK;qBACL,KAAK;0BAEL,KAAK,SAAC,YAAY;0BAKlB,KAAK,SAAC,YAAY;;;MCLR,aAAa;;;YATzB,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,mBAAmB;iBACpB;gBACD,YAAY,EAAE,CAAC,gBAAgB,CAAC;gBAChC,OAAO,EAAE,CAAC,gBAAgB,CAAC;aAC5B;;;ACdD;;;;;;"}
+{"version":3,"file":"sd-angular-core-group.js","sources":["../../../../projects/sd-core/group/src/lib/group.component.ts","../../../../projects/sd-core/group/src/lib/group.module.ts","../../../../projects/sd-core/group/sd-angular-core-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-group',\r\n  templateUrl: './group.component.html',\r\n  styleUrls: ['./group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdGroupComponent implements OnInit {\r\n  @Input() title: string;\r\n  @Input() description: string;\r\n  @Input() icon: string;\r\n  @Input() tooltip: string;\r\n  @Input() height = 'auto';\r\n\r\n  isExpanded = true;\r\n  @Input('isExpanded') set _isExpanded(val: boolean | '') {\r\n    this.isExpanded = (val === '') || val;\r\n  }\r\n\r\n  expandable = false;\r\n  @Input('expandable') set _expandable(val: boolean | '') {\r\n    this.expandable = (val === '') || val;\r\n  }\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n    if(this.expandable){\r\n      this.isExpanded = true;\r\n    }\r\n  }\r\n\r\n  onExpand = () => {\r\n    if(this.expandable){\r\n      return;\r\n    }\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  open = () => {\r\n    this.isExpanded = true;\r\n  }\r\n\r\n  close = () => {\r\n    this.isExpanded = false;\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdHeaderTitleModule } from '@sd-angular/core/header-title';\r\nimport { SdGroupComponent } from './group.component';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    SdHeaderTitleModule\r\n  ],\r\n  declarations: [SdGroupComponent],\r\n  exports: [SdGroupComponent]\r\n})\r\nexport class SdGroupModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {SdGroupComponent as ɵa} from './src/lib/group.component';"],"names":[],"mappings":";;;;;MAQa,gBAAgB;IAiB3B;QAZS,WAAM,GAAG,MAAM,CAAC;QAEzB,eAAU,GAAG,IAAI,CAAC;QAKlB,eAAU,GAAG,KAAK,CAAC;QAanB,aAAQ,GAAG;YACT,IAAG,IAAI,CAAC,UAAU,EAAC;gBACjB,OAAO;aACR;YACD,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;SACpC,CAAA;QAED,SAAI,GAAG;YACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAA;QAED,UAAK,GAAG;YACN,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;SACzB,CAAA;KArBe;IAThB,IAAyB,WAAW,CAAC,GAAiB;QACpD,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;KACvC;IAGD,IAAyB,WAAW,CAAC,GAAiB;QACpD,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;KACvC;IAID,QAAQ;QACN,IAAG,IAAI,CAAC,UAAU,EAAC;YACjB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;KACF;;;YA7BF,SAAS,SAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,81BAAqC;gBAErC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;oBAEE,KAAK;0BACL,KAAK;mBACL,KAAK;sBACL,KAAK;qBACL,KAAK;0BAGL,KAAK,SAAC,YAAY;0BAKlB,KAAK,SAAC,YAAY;;;MCNR,aAAa;;;YATzB,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,mBAAmB;iBACpB;gBACD,YAAY,EAAE,CAAC,gBAAgB,CAAC;gBAChC,OAAO,EAAE,CAAC,gBAAgB,CAAC;aAC5B;;;ACdD;;;;;;"}

package/fesm2015/sd-angular-core-header-title.js

@@ -1,6 +1,7 @@
 import { Component, Input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 class SdHeaderTitleComponent {
     constructor() { }
@@ -10,16 +11,16 @@ class SdHeaderTitleComponent {
 SdHeaderTitleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sd-header-title',
-                template: "<div class=\"d-flex\">\r\n  <div *ngIf=\"iconLeft\" class=\"c-header-icon-left\">\r\n    <mat-icon style=\"color: #757575;\"\r\n      class=\"material-symbols-outlined\">{{iconLeft}}</mat-icon>\r\n  </div>\r\n  <div class=\"flex-column\">\r\n    <div class=\"c-title\">{{title}}</div>\r\n    <div *ngIf=\"description\" class=\"c-description\">{{description}}</div>\r\n  </div>\r\n  <div *ngIf=\"iconRight\" class=\"c-header-icon-right\">\r\n    <mat-icon style=\"color: #757575;\"\r\n      class=\"material-symbols-outlined\">{{iconRight}}</mat-icon>\r\n  </div>\r\n</div>\r\n",
-                styles: [".c-header-icon-left{margin-right:12px}.c-header-icon-left,.c-header-icon-right{align-items:center;display:flex;height:28px;width:28px}.c-header-icon-right{margin-left:auto}.c-title{font-size:20px;font-weight:500;line-height:28px}.c-description{font-size:14px;line-height:20px}"]
+                template: "<div class=\"d-flex\">\r\n  <div *ngIf=\"icon\" class=\"flex-shrink-1 c-header-icon\">\r\n    <mat-icon style=\"color: #757575;\"\r\n      class=\"material-symbols-outlined\">{{icon}}</mat-icon>\r\n  </div>\r\n  <div class=\"d-flex flex-column w-100 overflow-hidden\">\r\n    <div class=\"d-flex\">\r\n      <span class=\"c-header-title\">{{title}}</span>\r\n      <ng-container *ngIf=\"tooltip\">\r\n        <mat-icon\r\n          [matTooltip]=\"tooltip\"\r\n          class=\"material-icons-outlined c-header-icon-tooltip\"> info </mat-icon>\r\n      </ng-container>\r\n    </div>\r\n    <span *ngIf=\"description\" class=\"c-header-description\">{{description}}</span>\r\n  </div>\r\n  <div class=\"flex-shrink-1\">\r\n    <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
+                styles: [".c-header-icon{align-items:center;display:flex;height:28px;margin-right:8px;width:28px}.c-header-title{font-size:20px;font-weight:500;line-height:28px}.c-header-icon-tooltip{align-items:center;color:#757575;display:flex;font-size:20px;height:28px!important;margin-left:10px}.c-header-description{font-size:14px;line-height:20px}"]
             },] }
 ];
 SdHeaderTitleComponent.ctorParameters = () => [];
 SdHeaderTitleComponent.propDecorators = {
     title: [{ type: Input }],
-    iconLeft: [{ type: Input }],
-    iconRight: [{ type: Input }],
-    description: [{ type: Input }]
+    icon: [{ type: Input }],
+    description: [{ type: Input }],
+    tooltip: [{ type: Input }]
 };
 
 class SdHeaderTitleModule {
@@ -28,7 +29,8 @@ SdHeaderTitleModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    MatIconModule
+                    MatIconModule,
+                    MatTooltipModule
                 ],
                 declarations: [SdHeaderTitleComponent],
                 exports: [SdHeaderTitleComponent]

package/fesm2015/sd-angular-core-header-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-header-title.js","sources":["../../../../projects/sd-core/header-title/src/lib/header-title/header-title.component.ts","../../../../projects/sd-core/header-title/src/lib/header-title.module.ts","../../../../projects/sd-core/header-title/sd-angular-core-header-title.ts"],"sourcesContent":["import { Component, OnInit, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-header-title',\r\n  templateUrl: './header-title.component.html',\r\n  styleUrls: ['./header-title.component.scss']\r\n})\r\nexport class SdHeaderTitleComponent implements OnInit {\r\n\r\n  @Input() title: string;\r\n  @Input() iconLeft: string;\r\n  @Input() iconRight: string;\r\n  @Input() description: string;\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdHeaderTitleComponent } from './header-title/header-title.component';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule\r\n  ],\r\n  declarations: [SdHeaderTitleComponent],\r\n  exports: [SdHeaderTitleComponent]\r\n})\r\nexport class SdHeaderTitleModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {SdHeaderTitleComponent as ɵa} from './src/lib/header-title/header-title.component';"],"names":[],"mappings":";;;;MAOa,sBAAsB;IAOjC,iBAAiB;IAEjB,QAAQ;KACP;;;YAfF,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;gBAC3B,4kBAA4C;;aAE7C;;;;oBAGE,KAAK;uBACL,KAAK;wBACL,KAAK;0BACL,KAAK;;;MCCK,mBAAmB;;;YAR/B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;iBACd;gBACD,YAAY,EAAE,CAAC,sBAAsB,CAAC;gBACtC,OAAO,EAAE,CAAC,sBAAsB,CAAC;aAClC;;;ACZD;;;;;;"}
+{"version":3,"file":"sd-angular-core-header-title.js","sources":["../../../../projects/sd-core/header-title/src/lib/header-title.component.ts","../../../../projects/sd-core/header-title/src/lib/header-title.module.ts","../../../../projects/sd-core/header-title/sd-angular-core-header-title.ts"],"sourcesContent":["import { Component, OnInit, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-header-title',\r\n  templateUrl: './header-title.component.html',\r\n  styleUrls: ['./header-title.component.scss']\r\n})\r\nexport class SdHeaderTitleComponent implements OnInit {\r\n\r\n  @Input() title: string;\r\n  @Input() icon: string;\r\n  @Input() description: string;\r\n  @Input() tooltip: string;\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdHeaderTitleComponent } from './header-title.component';\r\nimport {MatTooltipModule} from '@angular/material/tooltip';\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    MatTooltipModule\r\n  ],\r\n  declarations: [SdHeaderTitleComponent],\r\n  exports: [SdHeaderTitleComponent]\r\n})\r\nexport class SdHeaderTitleModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {SdHeaderTitleComponent as ɵa} from './src/lib/header-title.component';"],"names":[],"mappings":";;;;;MAOa,sBAAsB;IAOjC,iBAAiB;IAEjB,QAAQ;KACP;;;YAfF,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;gBAC3B,gzBAA4C;;aAE7C;;;;oBAGE,KAAK;mBACL,KAAK;0BACL,KAAK;sBACL,KAAK;;;MCEK,mBAAmB;;;YAT/B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,gBAAgB;iBACjB;gBACD,YAAY,EAAE,CAAC,sBAAsB,CAAC;gBACtC,OAAO,EAAE,CAAC,sBAAsB,CAAC;aAClC;;;ACbD;;;;;;"}