@coolon/angular-ui-powerups 12.4.0-alpha.64 → 12.4.0-alpha.65
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 +8 -0
- package/bundles/coolon-angular-ui-powerups.umd.js.map +1 -1
- package/coolon-angular-ui-powerups.metadata.json +1 -1
- package/esm2015/lib/components/commands/command-face/command-face.component.js +4 -0
- package/esm2015/lib/components/commands/command-face/command-face.component.js.map +1 -1
- package/esm2015/lib/components/commands/command-face/command-face.component.metadata.json +1 -1
- package/fesm2015/coolon-angular-ui-powerups.js +4 -0
- package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
- package/lib/components/commands/command-face/command-face.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -26,6 +26,9 @@ export class CommandFaceComponent extends DisposableComponent {
|
|
|
26
26
|
this.activeIcon = activeFace.pluck("icon");
|
|
27
27
|
this.activeColor = activeFace.pluck("color");
|
|
28
28
|
}
|
|
29
|
+
set face(face) {
|
|
30
|
+
this.facesModel.value = [face];
|
|
31
|
+
}
|
|
29
32
|
get requiresMissingIconInLayout() {
|
|
30
33
|
return this.includeMissingIconInLayout && !this.activeIcon.value;
|
|
31
34
|
}
|
|
@@ -55,6 +58,7 @@ CommandFaceComponent.decorators = [
|
|
|
55
58
|
CommandFaceComponent.ctorParameters = () => [];
|
|
56
59
|
CommandFaceComponent.propDecorators = {
|
|
57
60
|
_rawFaces: [{ type: Input, args: ['faces',] }],
|
|
61
|
+
face: [{ type: Input }],
|
|
58
62
|
ignoreIcon: [{ type: Input }],
|
|
59
63
|
ignoreText: [{ type: Input }],
|
|
60
64
|
includeMissingIconInLayout: [{ type: Input }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-face.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/command-face/command-face.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAU,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGzF,OAAO,EACL,GAAG,EAEH,gBAAgB,EAChB,gBAAgB,EAGjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;GASG;AAOH,MAAM,OAAO,oBAAwB,SAAQ,mBAAmB;
|
|
1
|
+
{"version":3,"file":"command-face.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/command-face/command-face.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAU,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGzF,OAAO,EACL,GAAG,EAEH,gBAAgB,EAChB,gBAAgB,EAGjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;GASG;AAOH,MAAM,OAAO,oBAAwB,SAAQ,mBAAmB;IA+B9D;QACE,KAAK,EAAE,CAAC;QA9BO,eAAU,GAAG,IAAI,gBAAgB,EAAe,CAAC;QAYlE,eAAU,GAAG,KAAK,CAAC;QAGnB,eAAU,GAAG,KAAK,CAAC;QAGnB,+BAA0B,GAAG,KAAK,CAAC;QAajC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzF,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACtF,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC1C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9C,CAAC;IA9BD,IACI,IAAI,CAAC,IAAiB;QACxB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAeD,IACI,2BAA2B;QAC7B,OAAO,IAAI,CAAC,0BAA0B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACnE,CAAC;IAWD,QAAQ;IACR,CAAC;IAED,iBAAiB,CAAC,IAAyB;QACzC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,0BAA0B,CAAC;IAC5E,CAAC;IAED,YAAY,CAAC,IAAwB;QACnC,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClH,CAAC;IAED,UAAU,CAAC,IAAwB;QACjC,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;IACxF,CAAC;IAED,IACI,KAAK;QACP,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;IAChC,CAAC;;;YAhEF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,oSAA4C;gBAE5C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aACtC;;;;wBAME,KAAK,SAAC,OAAO;mBAGb,KAAK;yBAKL,KAAK;yBAGL,KAAK;yCAGL,KAAK;0CAOL,WAAW,SAAC,iBAAiB;oBA6B7B,WAAW,SAAC,YAAY;;AAjDzB;IADiB,gBAAgB,CAAC,YAAY,CAAC;;uDACtB","sourcesContent":["import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\nimport {\n Dsl,\n ListModelChain,\n MutableListModel,\n StoreInListModel,\n StoreInValueModel,\n ValueModelChain\n} from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandFace } from '../command-face';\n\n/**\n * Custom CSS:\n * @example\n * root: { // globally\n * --aup-command-face-icon-gap: 8px;\n * }\n * aup-command-face { // per instance\n * --icon-gap: 4px;\n * }\n */\n@Component({\n selector: 'aup-command-face',\n templateUrl: './command-face.component.html',\n styleUrls: ['./command-face.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class CommandFaceComponent<T> extends DisposableComponent implements OnInit {\n\n private readonly facesModel = new MutableListModel<CommandFace>();\n\n // tslint:disable-next-line:no-input-rename\n @Input('faces') @StoreInListModel('facesModel')\n _rawFaces: CommandFace[];\n\n @Input()\n set face(face: CommandFace) {\n this.facesModel.value = [face];\n }\n\n @Input()\n ignoreIcon = false;\n\n @Input()\n ignoreText = false;\n\n @Input()\n includeMissingIconInLayout = false;\n\n readonly faceAdapters: ListModelChain<CommandFace.Adapter>;\n private activeIcon: ValueModelChain<string>;\n private activeColor: ValueModelChain<string>;\n\n @HostBinding('class.hide-icon')\n get requiresMissingIconInLayout() {\n return this.includeMissingIconInLayout && !this.activeIcon.value;\n }\n\n constructor() {\n super();\n const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n this.faceAdapters = chain(this.facesModel).map(face => new CommandFace.Adapter(face));\n const activeFace = this.faceAdapters.first();\n this.activeIcon = activeFace.pluck(\"icon\")\n this.activeColor = activeFace.pluck(\"color\")\n }\n\n ngOnInit() {\n }\n\n shouldIncludeIcon(face: CommandFace.Adapter) {\n return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;\n }\n\n hasIconStart(face:CommandFace.Adapter): boolean {\n return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === CommandFace.Position.START);\n }\n\n hasIconEnd(face:CommandFace.Adapter): boolean {\n return this.shouldIncludeIcon(face) && face.iconPosition === CommandFace.Position.END;\n }\n\n @HostBinding('attr.color')\n get color(): string {\n return this.activeColor.value;\n }\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"CommandFaceComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":30,"character":45},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"aup-command-face","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":28,"character":17},"member":"None"},"template":"<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n <span *ngIf=\"face.text\">{{face.text}}</span>\n <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n","styles":["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"]}]}],"members":{"_rawFaces":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["faces"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInListModel","line":35,"character":19},"arguments":["facesModel"]}]}],"
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"CommandFaceComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":30,"character":45},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"aup-command-face","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":28,"character":17},"member":"None"},"template":"<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n <span *ngIf=\"face.text\">{{face.text}}</span>\n <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n","styles":["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"]}]}],"members":{"_rawFaces":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["faces"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInListModel","line":35,"character":19},"arguments":["facesModel"]}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"ignoreIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"ignoreText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"includeMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"requiresMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":56,"character":3},"arguments":["class.hide-icon"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"shouldIncludeIcon":[{"__symbolic":"method"}],"hasIconStart":[{"__symbolic":"method"}],"hasIconEnd":[{"__symbolic":"method"}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":3},"arguments":["attr.color"]}]}]}}}}]
|
|
@@ -770,6 +770,9 @@ class CommandFaceComponent extends DisposableComponent {
|
|
|
770
770
|
this.activeIcon = activeFace.pluck("icon");
|
|
771
771
|
this.activeColor = activeFace.pluck("color");
|
|
772
772
|
}
|
|
773
|
+
set face(face) {
|
|
774
|
+
this.facesModel.value = [face];
|
|
775
|
+
}
|
|
773
776
|
get requiresMissingIconInLayout() {
|
|
774
777
|
return this.includeMissingIconInLayout && !this.activeIcon.value;
|
|
775
778
|
}
|
|
@@ -799,6 +802,7 @@ CommandFaceComponent.decorators = [
|
|
|
799
802
|
CommandFaceComponent.ctorParameters = () => [];
|
|
800
803
|
CommandFaceComponent.propDecorators = {
|
|
801
804
|
_rawFaces: [{ type: Input, args: ['faces',] }],
|
|
805
|
+
face: [{ type: Input }],
|
|
802
806
|
ignoreIcon: [{ type: Input }],
|
|
803
807
|
ignoreText: [{ type: Input }],
|
|
804
808
|
includeMissingIconInLayout: [{ type: Input }],
|