@coolon/angular-ui-powerups 11.1.0 → 11.1.1
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/bundles/coolon-angular-ui-powerups.umd.js +2 -1
- package/bundles/coolon-angular-ui-powerups.umd.js.map +1 -1
- package/bundles/coolon-angular-ui-powerups.umd.min.js +1 -1
- package/bundles/coolon-angular-ui-powerups.umd.min.js.map +1 -1
- package/coolon-angular-ui-powerups.metadata.json +1 -1
- package/esm2015/lib/components/commands/command/command.component.js +2 -1
- package/esm2015/lib/components/commands/command/command.component.js.map +1 -1
- package/esm2015/lib/components/commands/command/command.component.metadata.json +1 -1
- package/esm2015/lib/components/components.module.ngfactory.js.map +1 -1
- package/fesm2015/coolon-angular-ui-powerups.js +2 -1
- package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
- package/lib/components/commands/command/command.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -22,6 +22,7 @@ export class CommandComponent extends PopupAwareComponent {
|
|
|
22
22
|
this.activeFace = this.faces.first();
|
|
23
23
|
this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
|
|
24
24
|
this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
|
|
25
|
+
this.tooltipModel = chain(this.activeFace).map(f => CommandFace.getTooltipOf(f));
|
|
25
26
|
this.iconOnly = this.faces.select(face => {
|
|
26
27
|
return _.isEmpty(CommandFace.getTextOf(face)) && !_.isEmpty(CommandFace.getIconOf(face));
|
|
27
28
|
}).count().equals(this.faces.count());
|
|
@@ -41,7 +42,7 @@ export class CommandComponent extends PopupAwareComponent {
|
|
|
41
42
|
CommandComponent.decorators = [
|
|
42
43
|
{ type: Component, args: [{
|
|
43
44
|
selector: 'aup-command',
|
|
44
|
-
template: "<ng-container *ngIf=\"iconOnly.value\">\n <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n <ng-container [ngSwitch]=\"buttonStyle.value\">\n <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n </ng-container>\n</ng-container>\n",
|
|
45
|
+
template: "<ng-container *ngIf=\"iconOnly.value\">\n <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n <ng-container [ngSwitch]=\"buttonStyle.value\">\n <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n </ng-container>\n</ng-container>\n",
|
|
45
46
|
styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
|
|
46
47
|
},] }
|
|
47
48
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/command/command.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEtG,OAAO,EAEL,OAAO,EACP,GAAG,EAEH,iBAAiB,EACjB,aAAa,EACb,UAAU,EAEX,MAAM,gBAAgB,CAAC;AACxB,OAAO,CAAC,MAAM,QAAQ,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAkB,MAAM,0BAA0B,CAAC;AAG3E;;GAEG;AAMH,MAAM,OAAO,gBAAiB,SAAQ,mBAAmB;
|
|
1
|
+
{"version":3,"file":"command.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/command/command.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEtG,OAAO,EAEL,OAAO,EACP,GAAG,EAEH,iBAAiB,EACjB,aAAa,EACb,UAAU,EAEX,MAAM,gBAAgB,CAAC;AACxB,OAAO,CAAC,MAAM,QAAQ,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAkB,MAAM,0BAA0B,CAAC;AAG3E;;GAEG;AAMH,MAAM,OAAO,gBAAiB,SAAQ,mBAAmB;IA2BvD,YAAY,OAAmB,EAAuC,MAAuB;QAC3F,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAXzB,gBAAW,GAAG,WAAW,CAAC;QAYxB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC,CAAC;gBACX,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;gBAClD,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;aACpE,SAAS,EAAE,CAAC;QACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9E,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7E,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QACjF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YACvC,OAAO,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAA;QAC1F,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAA;IACvC,CAAC;IAED,QAAQ,CAAC,IAAiB;QACxB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,QAAQ;IACR,CAAC;IAED,eAAe;QACb,0DAA0D;IAC5D,CAAC;IAED,OAAO;QACL,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;;;YA/DF,SAAS,SAAC;gBACT,QAAQ,EAAE,aAAa;gBACvB,88CAAuC;;aAExC;;;YAzBkC,UAAU;4CAqDT,MAAM,SAAC,eAAe,cAAG,QAAQ;;;sBAzBlE,KAAK;wBAGL,KAAK;mBAGL,KAAK;4BAGL,KAAK;uBAGL,KAAK;;AAXN;IADU,aAAa,EAAE;8BAChB,OAAO;iDAAU;AAG1B;IADU,aAAa,EAAE;8BACd,UAAU;mDAAc;AAGnC;IADU,iBAAiB,CAAC,WAAW,CAAC;;8CACtB;AAGlB;IADU,aAAa,EAAE;8BACV,UAAU;uDAAc;AAGvC;IADU,iBAAiB,CAAC,eAAe,CAAC;;kDACtB","sourcesContent":["import { AfterViewInit, Component, ElementRef, Inject, Input, OnInit, Optional } from '@angular/core';\n\nimport {\n BooleanValueModelChain,\n Command,\n Dsl,\n ListModelChain,\n StoreInValueModel,\n TrackExternal,\n ValueModel,\n ValueModelChain\n} from '@coolon/pectin';\nimport _ from 'lodash';\nimport { CommandFace } from '../command-face';\nimport { PopupAwareComponent } from '../group/popup-aware.component';\nimport { POPUP_CONTAINER, PopupContainer } from '../group/popup-container';\nimport { AbstractPopupMenuComponent } from '../group/popup-menu/abstract-popup-menu.component';\n\n/**\n *\n */\n@Component({\n selector: 'aup-command',\n templateUrl: './command.component.html',\n styleUrls: ['./command.component.scss']\n})\nexport class CommandComponent extends PopupAwareComponent implements OnInit, AfterViewInit {\n\n @Input() @TrackExternal()\n command: Command<unknown>;\n\n @Input() @TrackExternal()\n faceModel: ValueModel<CommandFace>;\n\n @Input() @StoreInValueModel('faceModel')\n face: CommandFace;\n\n @Input() @TrackExternal()\n busyFaceModel: ValueModel<CommandFace>;\n\n @Input() @StoreInValueModel('busyFaceModel')\n busyFace: CommandFace;\n\n CommandFace = CommandFace;\n\n readonly faces: ListModelChain<CommandFace>;\n readonly buttonStyle: ValueModelChain<string>;\n readonly colorModel: ValueModelChain<'primary' | 'accent' | 'warn' | undefined>;\n private activeFace: ValueModelChain<CommandFace>;\n\n readonly iconOnly: BooleanValueModelChain;\n readonly tooltipModel: ValueModelChain<string>;\n\n constructor(element: ElementRef, @Inject(POPUP_CONTAINER) @Optional() parent?: PopupContainer) {\n super(element, parent);\n const { chain, switchOn } = Dsl.disposeWith(this);\n this.faces = chain(this.command.busy).mapToList(busy => {\n return busy ?\n [this.busyFaceModel.value, this.faceModel.value] :\n [this.faceModel.value, this.busyFaceModel.value];\n }, { allowNil: true, dependsOn: [this.faceModel, this.busyFaceModel] })\n .rejectNil();\n this.activeFace = this.faces.first();\n this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));\n this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));\n this.tooltipModel = chain(this.activeFace).map(f => CommandFace.getTooltipOf(f));\n this.iconOnly = this.faces.select(face => {\n return _.isEmpty(CommandFace.getTextOf(face)) && !_.isEmpty(CommandFace.getIconOf(face))\n }).count().equals(this.faces.count())\n }\n\n isActive(face: CommandFace): boolean {\n return this.activeFace.query().equals(face);\n }\n\n ngOnInit() {\n }\n\n ngAfterViewInit(): void {\n // console.log(this.element.nativeElement.previousSibling)\n }\n\n getFace(): CommandFace | undefined {\n return this.face;\n }\n\n\n}\n\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"CommandComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../group/popup-aware.component","name":"PopupAwareComponent","line":26,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"aup-command","template":"<ng-container *ngIf=\"iconOnly.value\">\n <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n <ng-container [ngSwitch]=\"buttonStyle.value\">\n <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n </ng-container>\n</ng-container>\n","styles":[":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]}]}],"members":{"command":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":28,"character":12}}]}],"faceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":31,"character":12}}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":34,"character":12},"arguments":["faceModel"]}]}],"busyFaceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":37,"character":12}}]}],"busyFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":40,"character":12},"arguments":["busyFaceModel"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"CommandComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../group/popup-aware.component","name":"PopupAwareComponent","line":26,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"aup-command","template":"<ng-container *ngIf=\"iconOnly.value\">\n <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n <ng-container [ngSwitch]=\"buttonStyle.value\">\n <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n </button>\n </ng-container>\n </ng-container>\n</ng-container>\n","styles":[":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]}]}],"members":{"command":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":28,"character":12}}]}],"faceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":31,"character":12}}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":34,"character":12},"arguments":["faceModel"]}]}],"busyFaceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":37,"character":12}}]}],"busyFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":40,"character":12},"arguments":["busyFaceModel"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":53,"character":36},"arguments":[{"__symbolic":"reference","module":"../group/popup-container","name":"POPUP_CONTAINER","line":53,"character":43}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":53,"character":61}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":53,"character":23},{"__symbolic":"reference","module":"../group/popup-container","name":"PopupContainer","line":53,"character":81}]}],"isActive":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getFace":[{"__symbolic":"method"}]}}}}]
|