@symphony-talent/component-library 3.42.0 → 3.43.0
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/lib/molecules/phaser-card/phaser-card.component.mjs +24 -5
- package/esm2020/projects/component-library/lib/molecules/phaser-card/phaser-card.component.mjs +24 -5
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +22 -3
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +22 -3
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +22 -3
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +22 -3
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/molecules/phaser-card/phaser-card.component.d.ts +9 -1
- package/package.json +1 -1
- package/projects/component-library/lib/molecules/phaser-card/phaser-card.component.d.ts +9 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
1
|
+
import { Component, Input, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "../../atoms/phaser/phaser.component";
|
|
4
4
|
import * as i2 from "../../atoms/icon/icon.component";
|
|
@@ -6,18 +6,37 @@ import * as i3 from "../../atoms/h5/h5.component";
|
|
|
6
6
|
import * as i4 from "../../atoms/h3/h3.component";
|
|
7
7
|
import * as i5 from "@angular/common";
|
|
8
8
|
export class PhaserCardComponent {
|
|
9
|
-
constructor() {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.cardClicked = new EventEmitter();
|
|
11
|
+
this.cardHover = new EventEmitter();
|
|
12
|
+
}
|
|
13
|
+
onCardClick() {
|
|
14
|
+
this.cardClicked.emit(this.model);
|
|
15
|
+
}
|
|
16
|
+
onCardHover() {
|
|
17
|
+
this.cardHover.emit('Card Hover');
|
|
18
|
+
}
|
|
10
19
|
}
|
|
11
20
|
PhaserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
21
|
+
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx", hasAnimation: "hasAnimation", isClickable: "isClickable", hasHover: "hasHover" }, outputs: { cardClicked: "cardClicked", cardHover: "cardHover" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"], components: [{ type: i1.PhaserComponent, selector: "symphony-phaser", inputs: ["phaser", "outlineColor"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i4.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
13
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, decorators: [{
|
|
14
23
|
type: Component,
|
|
15
|
-
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
24
|
+
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"] }]
|
|
16
25
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
17
26
|
type: Input
|
|
18
27
|
}], cardHeightPx: [{
|
|
19
28
|
type: Input
|
|
20
29
|
}], cardWidthPx: [{
|
|
21
30
|
type: Input
|
|
31
|
+
}], hasAnimation: [{
|
|
32
|
+
type: Input
|
|
33
|
+
}], isClickable: [{
|
|
34
|
+
type: Input
|
|
35
|
+
}], hasHover: [{
|
|
36
|
+
type: Input
|
|
37
|
+
}], cardClicked: [{
|
|
38
|
+
type: Output
|
|
39
|
+
}], cardHover: [{
|
|
40
|
+
type: Output
|
|
22
41
|
}] } });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhhc2VyLWNhcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvcGhhc2VyLWNhcmQvcGhhc2VyLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvcGhhc2VyLWNhcmQvcGhhc2VyLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFTdkIsTUFBTSxPQUFPLG1CQUFtQjtJQVU5QjtRQUhVLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNqQyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUVsQyxDQUFDO0lBRWhCLFdBQVc7UUFDVCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBd0IsQ0FBQyxDQUFDO0lBQ3ZELENBQUM7SUFDRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7Z0hBakJVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLG1TQ2ZoQyxvMkNBK0NBOzJGRGhDYSxtQkFBbUI7a0JBTi9CLFNBQVM7K0JBQ0Usc0JBQXNCLGlCQUdqQixpQkFBaUIsQ0FBQyxJQUFJOzBFQUc1QixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBoYXNlckNhcmRNb2RlbCB9IGZyb20gJy4vcGhhc2VyLWNhcmQubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzeW1waG9ueS1waGFzZXItY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9waGFzZXItY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BoYXNlci1jYXJkLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgUGhhc2VyQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1vZGVsOiBQaGFzZXJDYXJkTW9kZWw7XG4gIEBJbnB1dCgpIGNhcmRIZWlnaHRQeDogbnVtYmVyO1xuICBASW5wdXQoKSBjYXJkV2lkdGhQeDogbnVtYmVyO1xuICBASW5wdXQoKSBoYXNBbmltYXRpb246IGJvb2xlYW47XG4gIEBJbnB1dCgpIGlzQ2xpY2thYmxlOiBib29sZWFuO1xuICBASW5wdXQoKSBoYXNIb3ZlcjogYm9vbGVhbjtcbiAgQE91dHB1dCgpIGNhcmRDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgY2FyZEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG9uQ2FyZENsaWNrKCkge1xuICAgIHRoaXMuY2FyZENsaWNrZWQuZW1pdCh0aGlzLm1vZGVsIGFzIFBoYXNlckNhcmRNb2RlbCk7XG4gIH1cbiAgb25DYXJkSG92ZXIoKSB7XG4gICAgdGhpcy5jYXJkSG92ZXIuZW1pdCgnQ2FyZCBIb3ZlcicpO1xuICB9XG59XG4iLCI8ZGl2XG4gICpuZ0lmPVwibW9kZWxcIlxuICBjbGFzcz1cImNhcmQtaXRlbS13cmFwcGVyXCJcbiAgW3N0eWxlLmhlaWdodC5weF09XCJjYXJkSGVpZ2h0UHhcIlxuICBbc3R5bGUud2lkdGgucHhdPVwiY2FyZFdpZHRoUHhcIlxuICBbbmdDbGFzc109XCJ7ICdoYXMtaG92ZXInOiBpc0NsaWNrYWJsZSB9XCJcbiAgW25nQ2xhc3NdPVwieyAnaGFzLWhvdmVyJzogaGFzSG92ZXIgfVwiXG4gIChjbGljayk9XCJpc0NsaWNrYWJsZSAmJiBvbkNhcmRDbGljaygpXCJcbiAgKG1vdXNlZW50ZXIpPVwiaGFzSG92ZXIgJiYgb25DYXJkSG92ZXIoKVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJjYXJkLWl0ZW1cIj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImNhcmQtcGhhc2VyLXdyYXBwZXIgXCJcbiAgICAgIFtuZ0NsYXNzXT1cInsgJ3NuYXAtaW4nOiBoYXNBbmltYXRpb24gfVwiXG4gICAgICBbY2xhc3NdPVwibW9kZWwuYmFja2dyb3VuZENvbG9yXCJcbiAgICA+XG4gICAgICA8c3ltcGhvbnktcGhhc2VyXG4gICAgICAgIFtwaGFzZXJdPVwibW9kZWwucGhhc2VyU3RhdGVcIlxuICAgICAgICBbb3V0bGluZUNvbG9yXT1cIm1vZGVsLnBoYXNlck91dGxpbmVDb2xvclwiXG4gICAgICA+PC9zeW1waG9ueS1waGFzZXI+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImNhcmQtY29udGVudC13cmFwcGVyXCJcbiAgICAgIFtuZ0NsYXNzXT1cInsgJ3NuYXAtaW4tY29udGVudCc6IGhhc0FuaW1hdGlvbiB9XCJcbiAgICA+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC10aXRsZS13cmFwIHNmeC1kLWZsZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNhcmQtaWNvblwiPlxuICAgICAgICAgIDxzeW1waG9ueS1pY29uIFtpY29uXT1cIidzaS1pbmZvJ1wiPjwvc3ltcGhvbnktaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRpdGxlXCI+XG4gICAgICAgICAgPHN5bXBob255LWg1XG4gICAgICAgICAgICBbdGV4dF09XCJtb2RlbC5leWVicm93VGV4dFwiXG4gICAgICAgICAgICB0aXRsZT1cInt7IG1vZGVsLmV5ZWJyb3dUZXh0IH19XCJcbiAgICAgICAgICAgIGNsYXNzPVwic2Z4LWVsbGlwc2VcIlxuICAgICAgICAgID48L3N5bXBob255LWg1PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImNhcmQtZGVzY3JpcHRpb25cIj5cbiAgICAgICAgPHN5bXBob255LWgzXG4gICAgICAgICAgW3RleHRdPVwibW9kZWwubWVzc2FnZUJvZHlcIlxuICAgICAgICAgIHRpdGxlPVwie3sgbW9kZWwubWVzc2FnZUJvZHkgfX1cIlxuICAgICAgICA+PC9zeW1waG9ueS1oMz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
package/esm2020/projects/component-library/lib/molecules/phaser-card/phaser-card.component.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
1
|
+
import { Component, Input, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "../../atoms/phaser/phaser.component";
|
|
4
4
|
import * as i2 from "../../atoms/icon/icon.component";
|
|
@@ -6,18 +6,37 @@ import * as i3 from "../../atoms/h5/h5.component";
|
|
|
6
6
|
import * as i4 from "../../atoms/h3/h3.component";
|
|
7
7
|
import * as i5 from "@angular/common";
|
|
8
8
|
export class PhaserCardComponent {
|
|
9
|
-
constructor() {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.cardClicked = new EventEmitter();
|
|
11
|
+
this.cardHover = new EventEmitter();
|
|
12
|
+
}
|
|
13
|
+
onCardClick() {
|
|
14
|
+
this.cardClicked.emit(this.model);
|
|
15
|
+
}
|
|
16
|
+
onCardHover() {
|
|
17
|
+
this.cardHover.emit('Card Hover');
|
|
18
|
+
}
|
|
10
19
|
}
|
|
11
20
|
PhaserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
21
|
+
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx", hasAnimation: "hasAnimation", isClickable: "isClickable", hasHover: "hasHover" }, outputs: { cardClicked: "cardClicked", cardHover: "cardHover" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"], components: [{ type: i1.PhaserComponent, selector: "symphony-phaser", inputs: ["phaser", "outlineColor"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i4.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
13
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, decorators: [{
|
|
14
23
|
type: Component,
|
|
15
|
-
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
24
|
+
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"] }]
|
|
16
25
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
17
26
|
type: Input
|
|
18
27
|
}], cardHeightPx: [{
|
|
19
28
|
type: Input
|
|
20
29
|
}], cardWidthPx: [{
|
|
21
30
|
type: Input
|
|
31
|
+
}], hasAnimation: [{
|
|
32
|
+
type: Input
|
|
33
|
+
}], isClickable: [{
|
|
34
|
+
type: Input
|
|
35
|
+
}], hasHover: [{
|
|
36
|
+
type: Input
|
|
37
|
+
}], cardClicked: [{
|
|
38
|
+
type: Output
|
|
39
|
+
}], cardHover: [{
|
|
40
|
+
type: Output
|
|
22
41
|
}] } });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhhc2VyLWNhcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvcGhhc2VyLWNhcmQvcGhhc2VyLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvcGhhc2VyLWNhcmQvcGhhc2VyLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsaUJBQWlCLEVBQ2pCLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFTdkIsTUFBTSxPQUFPLG1CQUFtQjtJQVU5QjtRQUhVLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNqQyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUVsQyxDQUFDO0lBRWhCLFdBQVc7UUFDVCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBd0IsQ0FBQyxDQUFDO0lBQ3ZELENBQUM7SUFDRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7Z0hBakJVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLG1TQ2ZoQyxvMkNBK0NBOzJGRGhDYSxtQkFBbUI7a0JBTi9CLFNBQVM7K0JBQ0Usc0JBQXNCLGlCQUdqQixpQkFBaUIsQ0FBQyxJQUFJOzBFQUc1QixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBoYXNlckNhcmRNb2RlbCB9IGZyb20gJy4vcGhhc2VyLWNhcmQubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzeW1waG9ueS1waGFzZXItY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9waGFzZXItY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BoYXNlci1jYXJkLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgUGhhc2VyQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1vZGVsOiBQaGFzZXJDYXJkTW9kZWw7XG4gIEBJbnB1dCgpIGNhcmRIZWlnaHRQeDogbnVtYmVyO1xuICBASW5wdXQoKSBjYXJkV2lkdGhQeDogbnVtYmVyO1xuICBASW5wdXQoKSBoYXNBbmltYXRpb246IGJvb2xlYW47XG4gIEBJbnB1dCgpIGlzQ2xpY2thYmxlOiBib29sZWFuO1xuICBASW5wdXQoKSBoYXNIb3ZlcjogYm9vbGVhbjtcbiAgQE91dHB1dCgpIGNhcmRDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgY2FyZEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG9uQ2FyZENsaWNrKCkge1xuICAgIHRoaXMuY2FyZENsaWNrZWQuZW1pdCh0aGlzLm1vZGVsIGFzIFBoYXNlckNhcmRNb2RlbCk7XG4gIH1cbiAgb25DYXJkSG92ZXIoKSB7XG4gICAgdGhpcy5jYXJkSG92ZXIuZW1pdCgnQ2FyZCBIb3ZlcicpO1xuICB9XG59XG4iLCI8ZGl2XG4gICpuZ0lmPVwibW9kZWxcIlxuICBjbGFzcz1cImNhcmQtaXRlbS13cmFwcGVyXCJcbiAgW3N0eWxlLmhlaWdodC5weF09XCJjYXJkSGVpZ2h0UHhcIlxuICBbc3R5bGUud2lkdGgucHhdPVwiY2FyZFdpZHRoUHhcIlxuICBbbmdDbGFzc109XCJ7ICdoYXMtaG92ZXInOiBpc0NsaWNrYWJsZSB9XCJcbiAgW25nQ2xhc3NdPVwieyAnaGFzLWhvdmVyJzogaGFzSG92ZXIgfVwiXG4gIChjbGljayk9XCJpc0NsaWNrYWJsZSAmJiBvbkNhcmRDbGljaygpXCJcbiAgKG1vdXNlZW50ZXIpPVwiaGFzSG92ZXIgJiYgb25DYXJkSG92ZXIoKVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJjYXJkLWl0ZW1cIj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImNhcmQtcGhhc2VyLXdyYXBwZXIgXCJcbiAgICAgIFtuZ0NsYXNzXT1cInsgJ3NuYXAtaW4nOiBoYXNBbmltYXRpb24gfVwiXG4gICAgICBbY2xhc3NdPVwibW9kZWwuYmFja2dyb3VuZENvbG9yXCJcbiAgICA+XG4gICAgICA8c3ltcGhvbnktcGhhc2VyXG4gICAgICAgIFtwaGFzZXJdPVwibW9kZWwucGhhc2VyU3RhdGVcIlxuICAgICAgICBbb3V0bGluZUNvbG9yXT1cIm1vZGVsLnBoYXNlck91dGxpbmVDb2xvclwiXG4gICAgICA+PC9zeW1waG9ueS1waGFzZXI+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImNhcmQtY29udGVudC13cmFwcGVyXCJcbiAgICAgIFtuZ0NsYXNzXT1cInsgJ3NuYXAtaW4tY29udGVudCc6IGhhc0FuaW1hdGlvbiB9XCJcbiAgICA+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC10aXRsZS13cmFwIHNmeC1kLWZsZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNhcmQtaWNvblwiPlxuICAgICAgICAgIDxzeW1waG9ueS1pY29uIFtpY29uXT1cIidzaS1pbmZvJ1wiPjwvc3ltcGhvbnktaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRpdGxlXCI+XG4gICAgICAgICAgPHN5bXBob255LWg1XG4gICAgICAgICAgICBbdGV4dF09XCJtb2RlbC5leWVicm93VGV4dFwiXG4gICAgICAgICAgICB0aXRsZT1cInt7IG1vZGVsLmV5ZWJyb3dUZXh0IH19XCJcbiAgICAgICAgICAgIGNsYXNzPVwic2Z4LWVsbGlwc2VcIlxuICAgICAgICAgID48L3N5bXBob255LWg1PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImNhcmQtZGVzY3JpcHRpb25cIj5cbiAgICAgICAgPHN5bXBob255LWgzXG4gICAgICAgICAgW3RleHRdPVwibW9kZWwubWVzc2FnZUJvZHlcIlxuICAgICAgICAgIHRpdGxlPVwie3sgbW9kZWwubWVzc2FnZUJvZHkgfX1cIlxuICAgICAgICA+PC9zeW1waG9ueS1oMz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -2505,19 +2505,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2505
2505
|
}] });
|
|
2506
2506
|
|
|
2507
2507
|
class PhaserCardComponent {
|
|
2508
|
-
constructor() {
|
|
2508
|
+
constructor() {
|
|
2509
|
+
this.cardClicked = new EventEmitter();
|
|
2510
|
+
this.cardHover = new EventEmitter();
|
|
2511
|
+
}
|
|
2512
|
+
onCardClick() {
|
|
2513
|
+
this.cardClicked.emit(this.model);
|
|
2514
|
+
}
|
|
2515
|
+
onCardHover() {
|
|
2516
|
+
this.cardHover.emit('Card Hover');
|
|
2517
|
+
}
|
|
2509
2518
|
}
|
|
2510
2519
|
PhaserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2511
|
-
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
2520
|
+
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", cardHeightPx: "cardHeightPx", cardWidthPx: "cardWidthPx", hasAnimation: "hasAnimation", isClickable: "isClickable", hasHover: "hasHover" }, outputs: { cardClicked: "cardClicked", cardHover: "cardHover" }, ngImport: i0, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"], components: [{ type: PhaserComponent, selector: "symphony-phaser", inputs: ["phaser", "outlineColor"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2512
2521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, decorators: [{
|
|
2513
2522
|
type: Component,
|
|
2514
|
-
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n>\n <div class=\"card-item\">\n <div
|
|
2523
|
+
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"cardHeightPx\"\n [style.width.px]=\"cardWidthPx\"\n [ngClass]=\"{ 'has-hover': isClickable }\"\n [ngClass]=\"{ 'has-hover': hasHover }\"\n (click)=\"isClickable && onCardClick()\"\n (mouseenter)=\"hasHover && onCardHover()\"\n>\n <div class=\"card-item\">\n <div\n class=\"card-phaser-wrapper \"\n [ngClass]=\"{ 'snap-in': hasAnimation }\"\n [class]=\"model.backgroundColor\"\n >\n <symphony-phaser\n [phaser]=\"model.phaserState\"\n [outlineColor]=\"model.phaserOutlineColor\"\n ></symphony-phaser>\n </div>\n\n <div\n class=\"card-content-wrapper\"\n [ngClass]=\"{ 'snap-in-content': hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"'si-info'\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h5\n [text]=\"model.eyebrowText\"\n title=\"{{ model.eyebrowText }}\"\n class=\"sfx-ellipse\"\n ></symphony-h5>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-h3\n [text]=\"model.messageBody\"\n title=\"{{ model.messageBody }}\"\n ></symphony-h3>\n </div>\n </div>\n </div>\n</div>\n", styles: [".color-sample{float:left;border-radius:50%;height:30px;width:30px;margin-top:10px;margin-right:20px}.background-color-black{background-color:#000}.background-color-grey{background-color:#bababa}.background-color-light-grey-1{background-color:#d0d0d0}.background-color-light-grey-2{background-color:#d9d9d9}.background-color-light-grey-3{background-color:#ebebeb}.background-color-medium-black{background-color:#464646}.background-color-space-grey{background-color:#141414}.background-color-white{background-color:#fff}.background-color-green{background-color:#00d56b}.background-color-ice-blue{background-color:#03bcce}.background-color-lavender{background-color:#af5af9}.background-color-orange{background-color:#ffa700}.background-color-pink{background-color:#ff6cff}.background-color-purple{background-color:#801afc}.background-color-red{background-color:#f0001e}.background-color-skyblue{background-color:#007dbb}.background-color-turquoise{background-color:#00ebb5}.background-color-yellow{background-color:#fde928}.background-color-cyan{background-color:#00ffd8}.background-color-strong-orange{background-color:#ffa700}.background-color-soft-lime-green{background-color:#67f95a}.background-color-bright-violet{background-color:#7428fd}.background-color-lime-green{background-color:#00bb5e}.card-item-wrapper{position:relative;overflow:hidden;box-shadow:0 4px 4px #00000040;height:420px}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:200px;display:flex;justify-content:center;align-items:center}.card-item-wrapper .card-item{transition:.2s;transform-origin:bottom;animation-duration:2s;animation-iteration-count:1}.card-item-wrapper .card-item .card-content-wrapper{padding:30px;background-color:#fff}.card-item-wrapper .card-title-wrap{margin-bottom:11px}.card-item-wrapper .card-title-wrap h5{font-family:neuzeit_groteskregular,sans-serif;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.card-item-wrapper .card-description h3{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-item-wrapper .card-icon{padding-right:8px}.snap-in{animation:snap-in .75s ease-in-out 0s}@keyframes snap-in{0%{height:420px}25%{height:190px}50%{height:195px}to{height:200px}}.snap-in-content{animation:snap-in-content .75s ease-in-out 0s}@keyframes snap-in-content{0%{transform:translateY(200px);height:0;opacity:0}25%{opacity:1}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);height:220px;opacity:1}}\n"] }]
|
|
2515
2524
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2516
2525
|
type: Input
|
|
2517
2526
|
}], cardHeightPx: [{
|
|
2518
2527
|
type: Input
|
|
2519
2528
|
}], cardWidthPx: [{
|
|
2520
2529
|
type: Input
|
|
2530
|
+
}], hasAnimation: [{
|
|
2531
|
+
type: Input
|
|
2532
|
+
}], isClickable: [{
|
|
2533
|
+
type: Input
|
|
2534
|
+
}], hasHover: [{
|
|
2535
|
+
type: Input
|
|
2536
|
+
}], cardClicked: [{
|
|
2537
|
+
type: Output
|
|
2538
|
+
}], cardHover: [{
|
|
2539
|
+
type: Output
|
|
2521
2540
|
}] } });
|
|
2522
2541
|
|
|
2523
2542
|
class PhaserCardModule {
|