@symphony-talent/component-library 3.87.0 → 3.88.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/feedback-card/feedback-card.component.mjs +5 -4
- package/esm2020/lib/molecules/feedback-card/feedback-card.model.mjs +1 -1
- package/esm2020/lib/molecules/feedback-card/feedback-card.module.mjs +8 -4
- package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.component.mjs +5 -4
- package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.module.mjs +8 -4
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +37 -34
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +37 -34
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +37 -34
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +37 -34
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/molecules/feedback-card/feedback-card.model.d.ts +7 -0
- package/lib/molecules/feedback-card/feedback-card.module.d.ts +2 -1
- package/package.json +1 -1
- package/projects/component-library/lib/molecules/feedback-card/feedback-card.model.d.ts +7 -0
- package/projects/component-library/lib/molecules/feedback-card/feedback-card.module.d.ts +2 -1
|
@@ -4,7 +4,8 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
import * as i1 from "../../atoms/h4/h4.component";
|
|
5
5
|
import * as i2 from "../../atoms/icon/icon.component";
|
|
6
6
|
import * as i3 from "../../atoms/paragraph/paragraph.component";
|
|
7
|
-
import * as i4 from "
|
|
7
|
+
import * as i4 from "../../atoms/color-sample/color-sample.component";
|
|
8
|
+
import * as i5 from "@angular/common";
|
|
8
9
|
export class FeedbackCardComponent {
|
|
9
10
|
constructor() {
|
|
10
11
|
this.cardClick = new EventEmitter();
|
|
@@ -15,13 +16,13 @@ export class FeedbackCardComponent {
|
|
|
15
16
|
}
|
|
16
17
|
}
|
|
17
18
|
FeedbackCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type:
|
|
19
|
+
FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n <symphony-color-sample\n *ngIf=\"model.additionalDetails.showIcon\"\n [color]=\"model.additionalDetails.iconColor\"\n ></symphony-color-sample>\n <span class=\"display-text\">{{\n model.additionalDetails.displayText\n }}</span>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
19
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, decorators: [{
|
|
20
21
|
type: Component,
|
|
21
|
-
args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"] }]
|
|
22
|
+
args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n <symphony-color-sample\n *ngIf=\"model.additionalDetails.showIcon\"\n [color]=\"model.additionalDetails.iconColor\"\n ></symphony-color-sample>\n <span class=\"display-text\">{{\n model.additionalDetails.displayText\n }}</span>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"] }]
|
|
22
23
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
23
24
|
type: Input
|
|
24
25
|
}], cardClick: [{
|
|
25
26
|
type: Output
|
|
26
27
|
}] } });
|
|
27
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21vbGVjdWxlcy9mZWVkYmFjay1jYXJkL2ZlZWRiYWNrLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvZmVlZGJhY2stY2FyZC9mZWVkYmFjay1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEVBQ1osaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBcUIsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7Ozs7OztBQVE3RSxNQUFNLE9BQU8scUJBQXFCO0lBUWhDO1FBTlUsY0FBUyxHQUFvQyxJQUFJLFlBQVksRUFFcEUsQ0FBQztRQUVKLHNCQUFpQixHQUFHLGlCQUFpQixDQUFDO0lBRXZCLENBQUM7SUFFaEIsV0FBVyxDQUFDLFVBQVU7UUFDcEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xDLENBQUM7O2tIQVpVLHFCQUFxQjtzR0FBckIscUJBQXFCLCtIQ2hCbEMscXZFQWlFQTsyRkRqRGEscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNFLHdCQUF3QixpQkFHbkIsaUJBQWlCLENBQUMsSUFBSTswRUFHNUIsS0FBSztzQkFBYixLQUFLO2dCQUNJLFNBQVM7c0JBQWxCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIE9uSW5pdCxcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZlZWRiYWNrQ2FyZE1vZGVsLCBGZWVkYmFja0NhcmRTdGF0ZSB9IGZyb20gJy4vZmVlZGJhY2stY2FyZC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N5bXBob255LWZlZWRiYWNrLWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vZmVlZGJhY2stY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ZlZWRiYWNrLWNhcmQuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBGZWVkYmFja0NhcmRDb21wb25lbnQge1xuICBASW5wdXQoKSBtb2RlbDogRmVlZGJhY2tDYXJkTW9kZWw7XG4gIEBPdXRwdXQoKSBjYXJkQ2xpY2s6IEV2ZW50RW1pdHRlcjxGZWVkYmFja0NhcmRNb2RlbD4gPSBuZXcgRXZlbnRFbWl0dGVyPFxuICAgIEZlZWRiYWNrQ2FyZE1vZGVsXG4gID4oKTtcblxuICBGZWVkYmFja0NhcmRTdGF0ZSA9IEZlZWRiYWNrQ2FyZFN0YXRlO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBvbkNhcmRDbGljayhjbGlja0V2ZW50KSB7XG4gICAgdGhpcy5jYXJkQ2xpY2suZW1pdCh0aGlzLm1vZGVsKTtcbiAgfVxufVxuIiwiPGRpdiAqbmdJZj1cIm1vZGVsXCIgKGNsaWNrKT1cIm9uQ2FyZENsaWNrKCRldmVudClcIiBjbGFzcz1cImNhcmQtaXRlbS13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJjYXJkLWl0ZW0gc2Z4LWQtZmxleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRpdGxlLXdyYXAgc2Z4LWQtZmxleCBzZngtcGItMTUgc2Z4LW1iLTE1XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC10aXRsZVwiPlxuICAgICAgICA8c3ltcGhvbnktaDQ+e3sgbW9kZWwudGl0bGUgfX08L3N5bXBob255LWg0PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1pY29uXCI+XG4gICAgICAgIDxzeW1waG9ueS1pY29uXG4gICAgICAgICAgKm5nSWY9XCJtb2RlbC5zaG93RWRpdEljb25cIlxuICAgICAgICAgIGNsYXNzPVwiZmVlZGJhY2stZWRpdFwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWVkaXQnXCJcbiAgICAgICAgICBbc2l6ZV09XCInMTUuNXB4J1wiXG4gICAgICAgID48L3N5bXBob255LWljb24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiY2FyZC1kZXNjcmlwdGlvblwiICpuZ0Zvcj1cImxldCBib2R5VGV4dCBvZiBtb2RlbC5ib2R5XCI+XG4gICAgICA8c3ltcGhvbnktcGFyYWdyYXBoIGNsYXNzPVwic2Z4LWQtYmxvY2tcIj5cbiAgICAgICAge3sgYm9keVRleHQgfX1cbiAgICAgIDwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5hZGRpdGlvbmFsRGV0YWlsc1wiIGNsYXNzPVwiYWRkaXRpb25hbC1kZXRhaWxzXCI+XG4gICAgICA8c3ltcGhvbnktY29sb3Itc2FtcGxlXG4gICAgICAgICpuZ0lmPVwibW9kZWwuYWRkaXRpb25hbERldGFpbHMuc2hvd0ljb25cIlxuICAgICAgICBbY29sb3JdPVwibW9kZWwuYWRkaXRpb25hbERldGFpbHMuaWNvbkNvbG9yXCJcbiAgICAgID48L3N5bXBob255LWNvbG9yLXNhbXBsZT5cbiAgICAgIDxzcGFuIGNsYXNzPVwiZGlzcGxheS10ZXh0XCI+e3tcbiAgICAgICAgbW9kZWwuYWRkaXRpb25hbERldGFpbHMuZGlzcGxheVRleHRcbiAgICAgIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLWZvb3RlciBzZngtZC1mbGV4XCIgW25nU3dpdGNoXT1cIm1vZGVsLmZlZWRiYWNrU3RhdGVcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidZZXMnXCI+XG4gICAgICAgIDxzeW1waG9ueS1pY29uXG4gICAgICAgICAgKm5nSWY9XCJtb2RlbC5zaG93RmVlZGJhY2tJY29uXCJcbiAgICAgICAgICBjbGFzcz1cInNmeC1tci0xMCBjb2xvci1ncmVlblwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWZlZWRiYWNrLXllcydcIlxuICAgICAgICA+PC9zeW1waG9ueS1pY29uPlxuICAgICAgICA8c3ltcGhvbnktcGFyYWdyYXBoPlllczwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidObydcIj5cbiAgICAgICAgPHN5bXBob255LWljb25cbiAgICAgICAgICAqbmdJZj1cIm1vZGVsLnNob3dGZWVkYmFja0ljb25cIlxuICAgICAgICAgIGNsYXNzPVwic2Z4LW1yLTEwIGNvbG9yLXJlZFwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWZlZWRiYWNrLW5vJ1wiXG4gICAgICAgID48L3N5bXBob255LWljb24+XG4gICAgICAgIDxzeW1waG9ueS1wYXJhZ3JhcGg+Tm88L3N5bXBob255LXBhcmFncmFwaD5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInTm90IE5vdydcIj5cbiAgICAgICAgPHN5bXBob255LWljb25cbiAgICAgICAgICAqbmdJZj1cIm1vZGVsLnNob3dGZWVkYmFja0ljb25cIlxuICAgICAgICAgIGNsYXNzPVwic2Z4LW1yLTEwIGNvbG9yLW9yYW5nZVwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWZlZWRiYWNrLW1heWJlJ1wiXG4gICAgICAgID48L3N5bXBob255LWljb24+XG4gICAgICAgIDxzeW1waG9ueS1wYXJhZ3JhcGg+Tm90IE5vdzwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidOb25lJ1wiPlxuICAgICAgICA8c3ltcGhvbnktcGFyYWdyYXBoIGNsYXNzPVwic2Z4LWJvbGRcIlxuICAgICAgICAgID5Qcm92aWRlIEZlZWRiYWNrPC9zeW1waG9ueS1wYXJhZ3JhcGhcbiAgICAgICAgPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -5,4 +5,4 @@ export var FeedbackCardState;
|
|
|
5
5
|
FeedbackCardState["No"] = "No";
|
|
6
6
|
FeedbackCardState["NotNow"] = "Not Now";
|
|
7
7
|
})(FeedbackCardState || (FeedbackCardState = {}));
|
|
8
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
8
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stY2FyZC5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvbW9sZWN1bGVzL2ZlZWRiYWNrLWNhcmQvZmVlZGJhY2stY2FyZC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZQSxNQUFNLENBQU4sSUFBWSxpQkFLWDtBQUxELFdBQVksaUJBQWlCO0lBQzNCLGtDQUFhLENBQUE7SUFDYixnQ0FBVyxDQUFBO0lBQ1gsOEJBQVMsQ0FBQTtJQUNULHVDQUFrQixDQUFBO0FBQ3BCLENBQUMsRUFMVyxpQkFBaUIsS0FBakIsaUJBQWlCLFFBSzVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JOYW1lcyB9IGZyb20gXCIuLi8uLi9hdG9tcy9jb2xvci1zYW1wbGUvY29sb3Itc2FtcGxlLmVudW1cIjtcblxuZXhwb3J0IGludGVyZmFjZSBGZWVkYmFja0NhcmRNb2RlbCB7XG4gIGlkZW50aWZpZXI/OiBudW1iZXI7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGJvZHk6IHN0cmluZ1tdO1xuICBmZWVkYmFja1N0YXRlOiBGZWVkYmFja0NhcmRTdGF0ZTtcbiAgc2hvd0VkaXRJY29uOiBib29sZWFuO1xuICBzaG93RmVlZGJhY2tJY29uOiBib29sZWFuO1xuICBhZGRpdGlvbmFsRGV0YWlscz86IEZlZWRiYWNrQ2FyZEFkZGl0aW9uYWxEZXRhaWxzO1xufVxuXG5leHBvcnQgZW51bSBGZWVkYmFja0NhcmRTdGF0ZSB7XG4gIE5vbmUgPSAnTm9uZScsXG4gIFllcyA9ICdZZXMnLFxuICBObyA9ICdObycsXG4gIE5vdE5vdyA9ICdOb3QgTm93J1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZlZWRiYWNrQ2FyZEFkZGl0aW9uYWxEZXRhaWxzIHtcbiAgc2hvd0ljb246IGJvb2xlYW47XG4gIGljb25Db2xvcjogQ29sb3JOYW1lcztcbiAgZGlzcGxheVRleHQ6IHN0cmluZztcbn1cbiJdfQ==
|
|
@@ -6,6 +6,7 @@ import { IconModule } from '../../atoms/icon/icon.module';
|
|
|
6
6
|
import { H5Module } from '../../atoms/h5/h5.module';
|
|
7
7
|
import { IconWrapperModule } from '../../atoms/icon-wrapper/icon-wrapper.module';
|
|
8
8
|
import { ParagraphModule } from '../../atoms/paragraph/paragraph.module';
|
|
9
|
+
import { ColorSampleModule } from '../../atoms/color-sample/color-sample.module';
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
10
11
|
export class FeedbackCardModule {
|
|
11
12
|
}
|
|
@@ -15,14 +16,16 @@ FeedbackCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
|
|
|
15
16
|
IconModule,
|
|
16
17
|
H5Module,
|
|
17
18
|
IconWrapperModule,
|
|
18
|
-
ParagraphModule
|
|
19
|
+
ParagraphModule,
|
|
20
|
+
ColorSampleModule], exports: [FeedbackCardComponent] });
|
|
19
21
|
FeedbackCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, imports: [[
|
|
20
22
|
CommonModule,
|
|
21
23
|
H4Module,
|
|
22
24
|
IconModule,
|
|
23
25
|
H5Module,
|
|
24
26
|
IconWrapperModule,
|
|
25
|
-
ParagraphModule
|
|
27
|
+
ParagraphModule,
|
|
28
|
+
ColorSampleModule
|
|
26
29
|
]] });
|
|
27
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, decorators: [{
|
|
28
31
|
type: NgModule,
|
|
@@ -34,9 +37,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
34
37
|
IconModule,
|
|
35
38
|
H5Module,
|
|
36
39
|
IconWrapperModule,
|
|
37
|
-
ParagraphModule
|
|
40
|
+
ParagraphModule,
|
|
41
|
+
ColorSampleModule
|
|
38
42
|
],
|
|
39
43
|
exports: [FeedbackCardComponent]
|
|
40
44
|
}]
|
|
41
45
|
}] });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stY2FyZC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21vbGVjdWxlcy9mZWVkYmFjay1jYXJkL2ZlZWRiYWNrLWNhcmQubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNwRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUN6RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQzs7QUFlakYsTUFBTSxPQUFPLGtCQUFrQjs7K0dBQWxCLGtCQUFrQjtnSEFBbEIsa0JBQWtCLGlCQVpkLHFCQUFxQixhQUVsQyxZQUFZO1FBQ1osUUFBUTtRQUNSLFVBQVU7UUFDVixRQUFRO1FBQ1IsaUJBQWlCO1FBQ2pCLGVBQWU7UUFDZixpQkFBaUIsYUFFVCxxQkFBcUI7Z0hBRXBCLGtCQUFrQixZQVhwQjtZQUNQLFlBQVk7WUFDWixRQUFRO1lBQ1IsVUFBVTtZQUNWLFFBQVE7WUFDUixpQkFBaUI7WUFDakIsZUFBZTtZQUNmLGlCQUFpQjtTQUNsQjsyRkFHVSxrQkFBa0I7a0JBYjlCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMscUJBQXFCLENBQUM7b0JBQ3JDLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFFBQVE7d0JBQ1IsVUFBVTt3QkFDVixRQUFRO3dCQUNSLGlCQUFpQjt3QkFDakIsZUFBZTt3QkFDZixpQkFBaUI7cUJBQ2xCO29CQUNELE9BQU8sRUFBRSxDQUFDLHFCQUFxQixDQUFDO2lCQUNqQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRmVlZGJhY2tDYXJkQ29tcG9uZW50IH0gZnJvbSAnLi9mZWVkYmFjay1jYXJkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBINE1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL2g0L2g0Lm1vZHVsZSc7XG5pbXBvcnQgeyBJY29uTW9kdWxlIH0gZnJvbSAnLi4vLi4vYXRvbXMvaWNvbi9pY29uLm1vZHVsZSc7XG5pbXBvcnQgeyBINU1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL2g1L2g1Lm1vZHVsZSc7XG5pbXBvcnQgeyBJY29uV3JhcHBlck1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL2ljb24td3JhcHBlci9pY29uLXdyYXBwZXIubW9kdWxlJztcbmltcG9ydCB7IFBhcmFncmFwaE1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL3BhcmFncmFwaC9wYXJhZ3JhcGgubW9kdWxlJztcbmltcG9ydCB7IENvbG9yU2FtcGxlTW9kdWxlIH0gZnJvbSAnLi4vLi4vYXRvbXMvY29sb3Itc2FtcGxlL2NvbG9yLXNhbXBsZS5tb2R1bGUnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtGZWVkYmFja0NhcmRDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEg0TW9kdWxlLFxuICAgIEljb25Nb2R1bGUsXG4gICAgSDVNb2R1bGUsXG4gICAgSWNvbldyYXBwZXJNb2R1bGUsXG4gICAgUGFyYWdyYXBoTW9kdWxlLFxuICAgIENvbG9yU2FtcGxlTW9kdWxlXG4gIF0sXG4gIGV4cG9ydHM6IFtGZWVkYmFja0NhcmRDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIEZlZWRiYWNrQ2FyZE1vZHVsZSB7fVxuIl19
|
package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.component.mjs
CHANGED
|
@@ -4,7 +4,8 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
import * as i1 from "../../atoms/h4/h4.component";
|
|
5
5
|
import * as i2 from "../../atoms/icon/icon.component";
|
|
6
6
|
import * as i3 from "../../atoms/paragraph/paragraph.component";
|
|
7
|
-
import * as i4 from "
|
|
7
|
+
import * as i4 from "../../atoms/color-sample/color-sample.component";
|
|
8
|
+
import * as i5 from "@angular/common";
|
|
8
9
|
export class FeedbackCardComponent {
|
|
9
10
|
constructor() {
|
|
10
11
|
this.cardClick = new EventEmitter();
|
|
@@ -15,13 +16,13 @@ export class FeedbackCardComponent {
|
|
|
15
16
|
}
|
|
16
17
|
}
|
|
17
18
|
FeedbackCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type:
|
|
19
|
+
FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n <symphony-color-sample\n *ngIf=\"model.additionalDetails.showIcon\"\n [color]=\"model.additionalDetails.iconColor\"\n ></symphony-color-sample>\n <span class=\"display-text\">{{\n model.additionalDetails.displayText\n }}</span>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"], components: [{ type: i1.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
19
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, decorators: [{
|
|
20
21
|
type: Component,
|
|
21
|
-
args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"] }]
|
|
22
|
+
args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n <symphony-color-sample\n *ngIf=\"model.additionalDetails.showIcon\"\n [color]=\"model.additionalDetails.iconColor\"\n ></symphony-color-sample>\n <span class=\"display-text\">{{\n model.additionalDetails.displayText\n }}</span>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"] }]
|
|
22
23
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
23
24
|
type: Input
|
|
24
25
|
}], cardClick: [{
|
|
25
26
|
type: Output
|
|
26
27
|
}] } });
|
|
27
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21vbGVjdWxlcy9mZWVkYmFjay1jYXJkL2ZlZWRiYWNrLWNhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvZmVlZGJhY2stY2FyZC9mZWVkYmFjay1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEVBQ1osaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBcUIsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7Ozs7OztBQVE3RSxNQUFNLE9BQU8scUJBQXFCO0lBUWhDO1FBTlUsY0FBUyxHQUFvQyxJQUFJLFlBQVksRUFFcEUsQ0FBQztRQUVKLHNCQUFpQixHQUFHLGlCQUFpQixDQUFDO0lBRXZCLENBQUM7SUFFaEIsV0FBVyxDQUFDLFVBQVU7UUFDcEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xDLENBQUM7O2tIQVpVLHFCQUFxQjtzR0FBckIscUJBQXFCLCtIQ2hCbEMscXZFQWlFQTsyRkRqRGEscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNFLHdCQUF3QixpQkFHbkIsaUJBQWlCLENBQUMsSUFBSTswRUFHNUIsS0FBSztzQkFBYixLQUFLO2dCQUNJLFNBQVM7c0JBQWxCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIE9uSW5pdCxcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZlZWRiYWNrQ2FyZE1vZGVsLCBGZWVkYmFja0NhcmRTdGF0ZSB9IGZyb20gJy4vZmVlZGJhY2stY2FyZC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N5bXBob255LWZlZWRiYWNrLWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vZmVlZGJhY2stY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ZlZWRiYWNrLWNhcmQuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBGZWVkYmFja0NhcmRDb21wb25lbnQge1xuICBASW5wdXQoKSBtb2RlbDogRmVlZGJhY2tDYXJkTW9kZWw7XG4gIEBPdXRwdXQoKSBjYXJkQ2xpY2s6IEV2ZW50RW1pdHRlcjxGZWVkYmFja0NhcmRNb2RlbD4gPSBuZXcgRXZlbnRFbWl0dGVyPFxuICAgIEZlZWRiYWNrQ2FyZE1vZGVsXG4gID4oKTtcblxuICBGZWVkYmFja0NhcmRTdGF0ZSA9IEZlZWRiYWNrQ2FyZFN0YXRlO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBvbkNhcmRDbGljayhjbGlja0V2ZW50KSB7XG4gICAgdGhpcy5jYXJkQ2xpY2suZW1pdCh0aGlzLm1vZGVsKTtcbiAgfVxufVxuIiwiPGRpdiAqbmdJZj1cIm1vZGVsXCIgKGNsaWNrKT1cIm9uQ2FyZENsaWNrKCRldmVudClcIiBjbGFzcz1cImNhcmQtaXRlbS13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJjYXJkLWl0ZW0gc2Z4LWQtZmxleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRpdGxlLXdyYXAgc2Z4LWQtZmxleCBzZngtcGItMTUgc2Z4LW1iLTE1XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC10aXRsZVwiPlxuICAgICAgICA8c3ltcGhvbnktaDQ+e3sgbW9kZWwudGl0bGUgfX08L3N5bXBob255LWg0PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1pY29uXCI+XG4gICAgICAgIDxzeW1waG9ueS1pY29uXG4gICAgICAgICAgKm5nSWY9XCJtb2RlbC5zaG93RWRpdEljb25cIlxuICAgICAgICAgIGNsYXNzPVwiZmVlZGJhY2stZWRpdFwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWVkaXQnXCJcbiAgICAgICAgICBbc2l6ZV09XCInMTUuNXB4J1wiXG4gICAgICAgID48L3N5bXBob255LWljb24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiY2FyZC1kZXNjcmlwdGlvblwiICpuZ0Zvcj1cImxldCBib2R5VGV4dCBvZiBtb2RlbC5ib2R5XCI+XG4gICAgICA8c3ltcGhvbnktcGFyYWdyYXBoIGNsYXNzPVwic2Z4LWQtYmxvY2tcIj5cbiAgICAgICAge3sgYm9keVRleHQgfX1cbiAgICAgIDwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5hZGRpdGlvbmFsRGV0YWlsc1wiIGNsYXNzPVwiYWRkaXRpb25hbC1kZXRhaWxzXCI+XG4gICAgICA8c3ltcGhvbnktY29sb3Itc2FtcGxlXG4gICAgICAgICpuZ0lmPVwibW9kZWwuYWRkaXRpb25hbERldGFpbHMuc2hvd0ljb25cIlxuICAgICAgICBbY29sb3JdPVwibW9kZWwuYWRkaXRpb25hbERldGFpbHMuaWNvbkNvbG9yXCJcbiAgICAgID48L3N5bXBob255LWNvbG9yLXNhbXBsZT5cbiAgICAgIDxzcGFuIGNsYXNzPVwiZGlzcGxheS10ZXh0XCI+e3tcbiAgICAgICAgbW9kZWwuYWRkaXRpb25hbERldGFpbHMuZGlzcGxheVRleHRcbiAgICAgIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLWZvb3RlciBzZngtZC1mbGV4XCIgW25nU3dpdGNoXT1cIm1vZGVsLmZlZWRiYWNrU3RhdGVcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidZZXMnXCI+XG4gICAgICAgIDxzeW1waG9ueS1pY29uXG4gICAgICAgICAgKm5nSWY9XCJtb2RlbC5zaG93RmVlZGJhY2tJY29uXCJcbiAgICAgICAgICBjbGFzcz1cInNmeC1tci0xMCBjb2xvci1ncmVlblwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWZlZWRiYWNrLXllcydcIlxuICAgICAgICA+PC9zeW1waG9ueS1pY29uPlxuICAgICAgICA8c3ltcGhvbnktcGFyYWdyYXBoPlllczwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidObydcIj5cbiAgICAgICAgPHN5bXBob255LWljb25cbiAgICAgICAgICAqbmdJZj1cIm1vZGVsLnNob3dGZWVkYmFja0ljb25cIlxuICAgICAgICAgIGNsYXNzPVwic2Z4LW1yLTEwIGNvbG9yLXJlZFwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWZlZWRiYWNrLW5vJ1wiXG4gICAgICAgID48L3N5bXBob255LWljb24+XG4gICAgICAgIDxzeW1waG9ueS1wYXJhZ3JhcGg+Tm88L3N5bXBob255LXBhcmFncmFwaD5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInTm90IE5vdydcIj5cbiAgICAgICAgPHN5bXBob255LWljb25cbiAgICAgICAgICAqbmdJZj1cIm1vZGVsLnNob3dGZWVkYmFja0ljb25cIlxuICAgICAgICAgIGNsYXNzPVwic2Z4LW1yLTEwIGNvbG9yLW9yYW5nZVwiXG4gICAgICAgICAgW2ljb25dPVwiJ3NpLWZlZWRiYWNrLW1heWJlJ1wiXG4gICAgICAgID48L3N5bXBob255LWljb24+XG4gICAgICAgIDxzeW1waG9ueS1wYXJhZ3JhcGg+Tm90IE5vdzwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidOb25lJ1wiPlxuICAgICAgICA8c3ltcGhvbnktcGFyYWdyYXBoIGNsYXNzPVwic2Z4LWJvbGRcIlxuICAgICAgICAgID5Qcm92aWRlIEZlZWRiYWNrPC9zeW1waG9ueS1wYXJhZ3JhcGhcbiAgICAgICAgPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.model.mjs
CHANGED
|
@@ -5,4 +5,4 @@ export var FeedbackCardState;
|
|
|
5
5
|
FeedbackCardState["No"] = "No";
|
|
6
6
|
FeedbackCardState["NotNow"] = "Not Now";
|
|
7
7
|
})(FeedbackCardState || (FeedbackCardState = {}));
|
|
8
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
8
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stY2FyZC5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvbW9sZWN1bGVzL2ZlZWRiYWNrLWNhcmQvZmVlZGJhY2stY2FyZC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZQSxNQUFNLENBQU4sSUFBWSxpQkFLWDtBQUxELFdBQVksaUJBQWlCO0lBQzNCLGtDQUFhLENBQUE7SUFDYixnQ0FBVyxDQUFBO0lBQ1gsOEJBQVMsQ0FBQTtJQUNULHVDQUFrQixDQUFBO0FBQ3BCLENBQUMsRUFMVyxpQkFBaUIsS0FBakIsaUJBQWlCLFFBSzVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JOYW1lcyB9IGZyb20gXCIuLi8uLi9hdG9tcy9jb2xvci1zYW1wbGUvY29sb3Itc2FtcGxlLmVudW1cIjtcblxuZXhwb3J0IGludGVyZmFjZSBGZWVkYmFja0NhcmRNb2RlbCB7XG4gIGlkZW50aWZpZXI/OiBudW1iZXI7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGJvZHk6IHN0cmluZ1tdO1xuICBmZWVkYmFja1N0YXRlOiBGZWVkYmFja0NhcmRTdGF0ZTtcbiAgc2hvd0VkaXRJY29uOiBib29sZWFuO1xuICBzaG93RmVlZGJhY2tJY29uOiBib29sZWFuO1xuICBhZGRpdGlvbmFsRGV0YWlscz86IEZlZWRiYWNrQ2FyZEFkZGl0aW9uYWxEZXRhaWxzO1xufVxuXG5leHBvcnQgZW51bSBGZWVkYmFja0NhcmRTdGF0ZSB7XG4gIE5vbmUgPSAnTm9uZScsXG4gIFllcyA9ICdZZXMnLFxuICBObyA9ICdObycsXG4gIE5vdE5vdyA9ICdOb3QgTm93J1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZlZWRiYWNrQ2FyZEFkZGl0aW9uYWxEZXRhaWxzIHtcbiAgc2hvd0ljb246IGJvb2xlYW47XG4gIGljb25Db2xvcjogQ29sb3JOYW1lcztcbiAgZGlzcGxheVRleHQ6IHN0cmluZztcbn1cbiJdfQ==
|
package/esm2020/projects/component-library/lib/molecules/feedback-card/feedback-card.module.mjs
CHANGED
|
@@ -6,6 +6,7 @@ import { IconModule } from '../../atoms/icon/icon.module';
|
|
|
6
6
|
import { H5Module } from '../../atoms/h5/h5.module';
|
|
7
7
|
import { IconWrapperModule } from '../../atoms/icon-wrapper/icon-wrapper.module';
|
|
8
8
|
import { ParagraphModule } from '../../atoms/paragraph/paragraph.module';
|
|
9
|
+
import { ColorSampleModule } from '../../atoms/color-sample/color-sample.module';
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
10
11
|
export class FeedbackCardModule {
|
|
11
12
|
}
|
|
@@ -15,14 +16,16 @@ FeedbackCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
|
|
|
15
16
|
IconModule,
|
|
16
17
|
H5Module,
|
|
17
18
|
IconWrapperModule,
|
|
18
|
-
ParagraphModule
|
|
19
|
+
ParagraphModule,
|
|
20
|
+
ColorSampleModule], exports: [FeedbackCardComponent] });
|
|
19
21
|
FeedbackCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, imports: [[
|
|
20
22
|
CommonModule,
|
|
21
23
|
H4Module,
|
|
22
24
|
IconModule,
|
|
23
25
|
H5Module,
|
|
24
26
|
IconWrapperModule,
|
|
25
|
-
ParagraphModule
|
|
27
|
+
ParagraphModule,
|
|
28
|
+
ColorSampleModule
|
|
26
29
|
]] });
|
|
27
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, decorators: [{
|
|
28
31
|
type: NgModule,
|
|
@@ -34,9 +37,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
34
37
|
IconModule,
|
|
35
38
|
H5Module,
|
|
36
39
|
IconWrapperModule,
|
|
37
|
-
ParagraphModule
|
|
40
|
+
ParagraphModule,
|
|
41
|
+
ColorSampleModule
|
|
38
42
|
],
|
|
39
43
|
exports: [FeedbackCardComponent]
|
|
40
44
|
}]
|
|
41
45
|
}] });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stY2FyZC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21vbGVjdWxlcy9mZWVkYmFjay1jYXJkL2ZlZWRiYWNrLWNhcmQubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNwRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUN6RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQzs7QUFlakYsTUFBTSxPQUFPLGtCQUFrQjs7K0dBQWxCLGtCQUFrQjtnSEFBbEIsa0JBQWtCLGlCQVpkLHFCQUFxQixhQUVsQyxZQUFZO1FBQ1osUUFBUTtRQUNSLFVBQVU7UUFDVixRQUFRO1FBQ1IsaUJBQWlCO1FBQ2pCLGVBQWU7UUFDZixpQkFBaUIsYUFFVCxxQkFBcUI7Z0hBRXBCLGtCQUFrQixZQVhwQjtZQUNQLFlBQVk7WUFDWixRQUFRO1lBQ1IsVUFBVTtZQUNWLFFBQVE7WUFDUixpQkFBaUI7WUFDakIsZUFBZTtZQUNmLGlCQUFpQjtTQUNsQjsyRkFHVSxrQkFBa0I7a0JBYjlCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMscUJBQXFCLENBQUM7b0JBQ3JDLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFFBQVE7d0JBQ1IsVUFBVTt3QkFDVixRQUFRO3dCQUNSLGlCQUFpQjt3QkFDakIsZUFBZTt3QkFDZixpQkFBaUI7cUJBQ2xCO29CQUNELE9BQU8sRUFBRSxDQUFDLHFCQUFxQixDQUFDO2lCQUNqQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRmVlZGJhY2tDYXJkQ29tcG9uZW50IH0gZnJvbSAnLi9mZWVkYmFjay1jYXJkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBINE1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL2g0L2g0Lm1vZHVsZSc7XG5pbXBvcnQgeyBJY29uTW9kdWxlIH0gZnJvbSAnLi4vLi4vYXRvbXMvaWNvbi9pY29uLm1vZHVsZSc7XG5pbXBvcnQgeyBINU1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL2g1L2g1Lm1vZHVsZSc7XG5pbXBvcnQgeyBJY29uV3JhcHBlck1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL2ljb24td3JhcHBlci9pY29uLXdyYXBwZXIubW9kdWxlJztcbmltcG9ydCB7IFBhcmFncmFwaE1vZHVsZSB9IGZyb20gJy4uLy4uL2F0b21zL3BhcmFncmFwaC9wYXJhZ3JhcGgubW9kdWxlJztcbmltcG9ydCB7IENvbG9yU2FtcGxlTW9kdWxlIH0gZnJvbSAnLi4vLi4vYXRvbXMvY29sb3Itc2FtcGxlL2NvbG9yLXNhbXBsZS5tb2R1bGUnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtGZWVkYmFja0NhcmRDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEg0TW9kdWxlLFxuICAgIEljb25Nb2R1bGUsXG4gICAgSDVNb2R1bGUsXG4gICAgSWNvbldyYXBwZXJNb2R1bGUsXG4gICAgUGFyYWdyYXBoTW9kdWxlLFxuICAgIENvbG9yU2FtcGxlTW9kdWxlXG4gIF0sXG4gIGV4cG9ydHM6IFtGZWVkYmFja0NhcmRDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIEZlZWRiYWNrQ2FyZE1vZHVsZSB7fVxuIl19
|
|
@@ -2441,6 +2441,21 @@ var FeedbackCardState;
|
|
|
2441
2441
|
FeedbackCardState["NotNow"] = "Not Now";
|
|
2442
2442
|
})(FeedbackCardState || (FeedbackCardState = {}));
|
|
2443
2443
|
|
|
2444
|
+
class ColorSampleComponent {
|
|
2445
|
+
constructor() { }
|
|
2446
|
+
ngOnInit() {
|
|
2447
|
+
this.bgColor = this.color;
|
|
2448
|
+
}
|
|
2449
|
+
}
|
|
2450
|
+
ColorSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2451
|
+
ColorSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSampleComponent, selector: "symphony-color-sample", inputs: { color: "color" }, ngImport: i0, template: "<div\n class=\"color-sample\"\n [ngClass]=\"bgColor\"\n [ngStyle]=\"{\n border: color === 'background-color-white' ? '1px solid #000' : 'none'\n }\"\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}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, decorators: [{
|
|
2453
|
+
type: Component,
|
|
2454
|
+
args: [{ selector: 'symphony-color-sample', template: "<div\n class=\"color-sample\"\n [ngClass]=\"bgColor\"\n [ngStyle]=\"{\n border: color === 'background-color-white' ? '1px solid #000' : 'none'\n }\"\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}\n"] }]
|
|
2455
|
+
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
|
|
2456
|
+
type: Input
|
|
2457
|
+
}] } });
|
|
2458
|
+
|
|
2444
2459
|
class FeedbackCardComponent {
|
|
2445
2460
|
constructor() {
|
|
2446
2461
|
this.cardClick = new EventEmitter();
|
|
@@ -2451,16 +2466,30 @@ class FeedbackCardComponent {
|
|
|
2451
2466
|
}
|
|
2452
2467
|
}
|
|
2453
2468
|
FeedbackCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2454
|
-
FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2469
|
+
FeedbackCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackCardComponent, selector: "symphony-feedback-card", inputs: { model: "model" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n <symphony-color-sample\n *ngIf=\"model.additionalDetails.showIcon\"\n [color]=\"model.additionalDetails.iconColor\"\n ></symphony-color-sample>\n <span class=\"display-text\">{{\n model.additionalDetails.displayText\n }}</span>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: ColorSampleComponent, selector: "symphony-color-sample", inputs: ["color"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2455
2470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, decorators: [{
|
|
2456
2471
|
type: Component,
|
|
2457
|
-
args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}\n"] }]
|
|
2472
|
+
args: [{ selector: 'symphony-feedback-card', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\" (click)=\"onCardClick($event)\" class=\"card-item-wrapper\">\n <div class=\"card-item sfx-d-flex\">\n <div class=\"card-title-wrap sfx-d-flex sfx-pb-15 sfx-mb-15\">\n <div class=\"card-title\">\n <symphony-h4>{{ model.title }}</symphony-h4>\n </div>\n <div class=\"card-icon\">\n <symphony-icon\n *ngIf=\"model.showEditIcon\"\n class=\"feedback-edit\"\n [icon]=\"'si-edit'\"\n [size]=\"'15.5px'\"\n ></symphony-icon>\n </div>\n </div>\n <div class=\"card-description\" *ngFor=\"let bodyText of model.body\">\n <symphony-paragraph class=\"sfx-d-block\">\n {{ bodyText }}\n </symphony-paragraph>\n </div>\n <div *ngIf=\"model.additionalDetails\" class=\"additional-details\">\n <symphony-color-sample\n *ngIf=\"model.additionalDetails.showIcon\"\n [color]=\"model.additionalDetails.iconColor\"\n ></symphony-color-sample>\n <span class=\"display-text\">{{\n model.additionalDetails.displayText\n }}</span>\n </div>\n <div class=\"card-footer sfx-d-flex\" [ngSwitch]=\"model.feedbackState\">\n <ng-container *ngSwitchCase=\"'Yes'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-green\"\n [icon]=\"'si-feedback-yes'\"\n ></symphony-icon>\n <symphony-paragraph>Yes</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'No'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-red\"\n [icon]=\"'si-feedback-no'\"\n ></symphony-icon>\n <symphony-paragraph>No</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Not Now'\">\n <symphony-icon\n *ngIf=\"model.showFeedbackIcon\"\n class=\"sfx-mr-10 color-orange\"\n [icon]=\"'si-feedback-maybe'\"\n ></symphony-icon>\n <symphony-paragraph>Not Now</symphony-paragraph>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'None'\">\n <symphony-paragraph class=\"sfx-bold\"\n >Provide Feedback</symphony-paragraph\n >\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%}.card-item{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer;min-height:218px;flex-direction:column}.card-title-wrap{border-bottom:1px solid #d9d9d9}.card-title-wrap .card-title h4{font-size:16px}.card-icon{margin-left:auto}.card-icon i{vertical-align:text-top}.card-description p.body-copy-primary{margin:0}.card-footer{margin-top:auto;align-self:flex-end}.card-footer p.body-copy-primary{margin:0;line-height:24px}.card-footer .sfx-bold p{font-family:neuzeit_groteskbold,sans-serif}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}.additional-details .color-sample{height:20px!important;width:20px!important}.additional-details .display-text{margin-top:10px;display:inline-block}\n"] }]
|
|
2458
2473
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2459
2474
|
type: Input
|
|
2460
2475
|
}], cardClick: [{
|
|
2461
2476
|
type: Output
|
|
2462
2477
|
}] } });
|
|
2463
2478
|
|
|
2479
|
+
class ColorSampleModule {
|
|
2480
|
+
}
|
|
2481
|
+
ColorSampleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2482
|
+
ColorSampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, declarations: [ColorSampleComponent], imports: [CommonModule], exports: [ColorSampleComponent] });
|
|
2483
|
+
ColorSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, imports: [[CommonModule]] });
|
|
2484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, decorators: [{
|
|
2485
|
+
type: NgModule,
|
|
2486
|
+
args: [{
|
|
2487
|
+
declarations: [ColorSampleComponent],
|
|
2488
|
+
imports: [CommonModule],
|
|
2489
|
+
exports: [ColorSampleComponent],
|
|
2490
|
+
}]
|
|
2491
|
+
}] });
|
|
2492
|
+
|
|
2464
2493
|
class FeedbackCardModule {
|
|
2465
2494
|
}
|
|
2466
2495
|
FeedbackCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -2469,14 +2498,16 @@ FeedbackCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
|
|
|
2469
2498
|
IconModule,
|
|
2470
2499
|
H5Module,
|
|
2471
2500
|
IconWrapperModule,
|
|
2472
|
-
ParagraphModule
|
|
2501
|
+
ParagraphModule,
|
|
2502
|
+
ColorSampleModule], exports: [FeedbackCardComponent] });
|
|
2473
2503
|
FeedbackCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, imports: [[
|
|
2474
2504
|
CommonModule,
|
|
2475
2505
|
H4Module,
|
|
2476
2506
|
IconModule,
|
|
2477
2507
|
H5Module,
|
|
2478
2508
|
IconWrapperModule,
|
|
2479
|
-
ParagraphModule
|
|
2509
|
+
ParagraphModule,
|
|
2510
|
+
ColorSampleModule
|
|
2480
2511
|
]] });
|
|
2481
2512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, decorators: [{
|
|
2482
2513
|
type: NgModule,
|
|
@@ -2488,7 +2519,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2488
2519
|
IconModule,
|
|
2489
2520
|
H5Module,
|
|
2490
2521
|
IconWrapperModule,
|
|
2491
|
-
ParagraphModule
|
|
2522
|
+
ParagraphModule,
|
|
2523
|
+
ColorSampleModule
|
|
2492
2524
|
],
|
|
2493
2525
|
exports: [FeedbackCardComponent]
|
|
2494
2526
|
}]
|
|
@@ -2901,21 +2933,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2901
2933
|
}]
|
|
2902
2934
|
}] });
|
|
2903
2935
|
|
|
2904
|
-
class ColorSampleComponent {
|
|
2905
|
-
constructor() { }
|
|
2906
|
-
ngOnInit() {
|
|
2907
|
-
this.bgColor = this.color;
|
|
2908
|
-
}
|
|
2909
|
-
}
|
|
2910
|
-
ColorSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2911
|
-
ColorSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColorSampleComponent, selector: "symphony-color-sample", inputs: { color: "color" }, ngImport: i0, template: "<div\n class=\"color-sample\"\n [ngClass]=\"bgColor\"\n [ngStyle]=\"{\n border: color === 'background-color-white' ? '1px solid #000' : 'none'\n }\"\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}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, decorators: [{
|
|
2913
|
-
type: Component,
|
|
2914
|
-
args: [{ selector: 'symphony-color-sample', template: "<div\n class=\"color-sample\"\n [ngClass]=\"bgColor\"\n [ngStyle]=\"{\n border: color === 'background-color-white' ? '1px solid #000' : 'none'\n }\"\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}\n"] }]
|
|
2915
|
-
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
|
|
2916
|
-
type: Input
|
|
2917
|
-
}] } });
|
|
2918
|
-
|
|
2919
2936
|
class ColorSwatchComponent {
|
|
2920
2937
|
constructor() {
|
|
2921
2938
|
this.colorSwatchModel = {
|
|
@@ -2940,20 +2957,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2940
2957
|
type: Input
|
|
2941
2958
|
}] } });
|
|
2942
2959
|
|
|
2943
|
-
class ColorSampleModule {
|
|
2944
|
-
}
|
|
2945
|
-
ColorSampleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2946
|
-
ColorSampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, declarations: [ColorSampleComponent], imports: [CommonModule], exports: [ColorSampleComponent] });
|
|
2947
|
-
ColorSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, imports: [[CommonModule]] });
|
|
2948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, decorators: [{
|
|
2949
|
-
type: NgModule,
|
|
2950
|
-
args: [{
|
|
2951
|
-
declarations: [ColorSampleComponent],
|
|
2952
|
-
imports: [CommonModule],
|
|
2953
|
-
exports: [ColorSampleComponent],
|
|
2954
|
-
}]
|
|
2955
|
-
}] });
|
|
2956
|
-
|
|
2957
2960
|
class ColorSwatchModule {
|
|
2958
2961
|
}
|
|
2959
2962
|
ColorSwatchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|