@symphony-talent/component-library 3.86.1 → 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/atoms/contextual-menu/contextual-menu.component.mjs +2 -2
- package/esm2020/lib/atoms/input-checkbox/input-checkbox.component.mjs +2 -2
- package/esm2020/lib/atoms/input-chips/input-chips.component.mjs +2 -2
- package/esm2020/lib/atoms/input-dropdown/input-dropdown.component.mjs +2 -2
- package/esm2020/lib/atoms/input-editable-text/input-editable-text.component.mjs +2 -2
- package/esm2020/lib/atoms/input-radio/input-radio.component.mjs +2 -2
- package/esm2020/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs +2 -2
- package/esm2020/lib/atoms/input-text/input-text.component.mjs +2 -2
- package/esm2020/lib/atoms/notifications/notifications.component.mjs +2 -2
- package/esm2020/lib/atoms/pill/pill.component.mjs +2 -2
- package/esm2020/lib/atoms/tooltip-wrapper/tooltip-wrapper.component.mjs +2 -2
- package/esm2020/lib/molecules/card/card.component.mjs +2 -2
- 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/lib/molecules/phaser-card/phaser-card.component.mjs +2 -2
- package/esm2020/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.component.mjs +3 -3
- package/esm2020/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.mjs +1 -1
- package/esm2020/lib/organisms/feedback-login-modal/feedback-login-modal.component.mjs +2 -2
- package/esm2020/lib/templates/feedback-detail-template/feedback-detail-template.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/contextual-menu/contextual-menu.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-checkbox/input-checkbox.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-chips/input-chips.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-dropdown/input-dropdown.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-editable-text/input-editable-text.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-radio/input-radio.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/input-text/input-text.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/notifications/notifications.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/pill/pill.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/tooltip-wrapper/tooltip-wrapper.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/molecules/card/card.component.mjs +2 -2
- 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/esm2020/projects/component-library/lib/molecules/phaser-card/phaser-card.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.component.mjs +3 -3
- package/esm2020/projects/component-library/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/organisms/feedback-login-modal/feedback-login-modal.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/templates/feedback-detail-template/feedback-detail-template.component.mjs +2 -2
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +69 -66
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +69 -66
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +69 -66
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +69 -66
- 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/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.d.ts +1 -0
- 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
- package/projects/component-library/lib/organisms/feedback-detail-interest-form/feedback-detail-interest-form.model.d.ts +1 -0
|
@@ -228,10 +228,10 @@ class ContextualMenuComponent {
|
|
|
228
228
|
}
|
|
229
229
|
}
|
|
230
230
|
ContextualMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
231
|
-
ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px
|
|
231
|
+
ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"], directives: [{ type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trimId": TrimIdPipe } });
|
|
232
232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, decorators: [{
|
|
233
233
|
type: Component,
|
|
234
|
-
args: [{ selector: 'symphony-contextual-menu', template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px
|
|
234
|
+
args: [{ selector: 'symphony-contextual-menu', template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n [ngClass]=\"{\n 'has-border': model.hasBorder\n }\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <i class=\"si-more-options\"></i>\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n <a\n class=\"dropdown-item\"\n href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n >{{ item }}</a\n >\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"] }]
|
|
235
235
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
236
236
|
type: Input
|
|
237
237
|
}], itemClick: [{
|
|
@@ -472,10 +472,10 @@ class TooltipWrapperComponent {
|
|
|
472
472
|
constructor() { }
|
|
473
473
|
}
|
|
474
474
|
TooltipWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
475
|
-
TooltipWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: { placement: "placement", tooltipHtml: "tooltipHtml" }, ngImport: i0, template: "<ng-template #popTemplate\n ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n class=\"sfx-d-inline-block\"\n [tooltip]=\"popTemplate\"\n placement=\"{{ placement }}\"\n containerClass=\"sfx-info-tooltip item-tooltip\"\n [adaptivePosition]=\"false\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px
|
|
475
|
+
TooltipWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: { placement: "placement", tooltipHtml: "tooltipHtml" }, ngImport: i0, template: "<ng-template #popTemplate\n ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n class=\"sfx-d-inline-block\"\n [tooltip]=\"popTemplate\"\n placement=\"{{ placement }}\"\n containerClass=\"sfx-info-tooltip item-tooltip\"\n [adaptivePosition]=\"false\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"], directives: [{ type: i1$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
476
476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TooltipWrapperComponent, decorators: [{
|
|
477
477
|
type: Component,
|
|
478
|
-
args: [{ selector: 'symphony-tooltip-wrapper', encapsulation: ViewEncapsulation.None, template: "<ng-template #popTemplate\n ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n class=\"sfx-d-inline-block\"\n [tooltip]=\"popTemplate\"\n placement=\"{{ placement }}\"\n containerClass=\"sfx-info-tooltip item-tooltip\"\n [adaptivePosition]=\"false\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px
|
|
478
|
+
args: [{ selector: 'symphony-tooltip-wrapper', encapsulation: ViewEncapsulation.None, template: "<ng-template #popTemplate\n ><div style=\"text-align: left\" [innerHtml]=\"tooltipHtml\"></div\n></ng-template>\n<span\n class=\"sfx-d-inline-block\"\n [tooltip]=\"popTemplate\"\n placement=\"{{ placement }}\"\n containerClass=\"sfx-info-tooltip item-tooltip\"\n [adaptivePosition]=\"false\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [".sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip.item-tooltip{min-width:80px;opacity:1}.sfx-info-tooltip.item-tooltip .tooltip-inner{border-radius:10px!important;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip.item-tooltip.right{left:5px!important}.sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#fff}.sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#fff}.sfx-info-tooltip.item-tooltip.left{left:-5px!important}.sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:250px;font-size:13px;color:#000}\n"] }]
|
|
479
479
|
}], ctorParameters: function () { return []; }, propDecorators: { placement: [{
|
|
480
480
|
type: Input
|
|
481
481
|
}], tooltipHtml: [{
|
|
@@ -1172,10 +1172,10 @@ class InputCheckboxComponent {
|
|
|
1172
1172
|
}
|
|
1173
1173
|
}
|
|
1174
1174
|
InputCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1175
|
-
InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1175
|
+
InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputCheckboxComponent, selector: "symphony-input-checkbox", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1176
1176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputCheckboxComponent, decorators: [{
|
|
1177
1177
|
type: Component,
|
|
1178
|
-
args: [{ selector: 'symphony-input-checkbox', template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"] }]
|
|
1178
|
+
args: [{ selector: 'symphony-input-checkbox', template: "<div class=\"sfx-checkbox\" (click)=\"onClick()\">\n <input\n type=\"checkbox\"\n class=\"sfx-checkbox-input\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:#000!important}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all .2s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-color:transparent #000 #000 transparent;border-style:solid;border-width:0 2px 2px 0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}\n"] }]
|
|
1179
1179
|
}], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
|
|
1180
1180
|
type: Input
|
|
1181
1181
|
}], label: [{
|
|
@@ -1220,10 +1220,10 @@ class InputDropdownComponent {
|
|
|
1220
1220
|
}
|
|
1221
1221
|
}
|
|
1222
1222
|
InputDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1223
|
-
InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px
|
|
1223
|
+
InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff!important;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff!important;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1224
1224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, decorators: [{
|
|
1225
1225
|
type: Component,
|
|
1226
|
-
args: [{ selector: 'symphony-input-dropdown', template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px
|
|
1226
|
+
args: [{ selector: 'symphony-input-dropdown', template: "<div\n *ngIf=\"inputDropdownListModel.componentHeading\"\n class=\"sfx-dropdown-label sfx-d-inline-block\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n {{ inputDropdownListModel.componentHeading }}\n <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n [ngClass]=\"{ 'is-inverse': isInverse }\"\n [isDisabled]=\"disableBtn\"\n dropdown\n>\n <button\n id=\"moreDrop\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle sfx-ellipse\"\n aria-controls=\"dropdown-basic\"\n >\n {{ inputDropdownListModel.selectedName }}\n <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n </button>\n <hr />\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"moreDrop\"\n [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n >\n <li\n *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n [ngClass]=\"{ disabled: action.isDisabled }\"\n (click)=\"itemClick(action)\"\n >\n <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n </li>\n <div\n *ngIf=\"inputDropdownListModel.showClearButton\"\n class=\"divider dropdown-divider\"\n ></div>\n <a\n class=\"sfx-filter-item-footer\"\n *ngIf=\"inputDropdownListModel.showClearButton\"\n >\n <button\n type=\"button\"\n (click)=\"onClearSelection()\"\n class=\"pull-left sfx-clear-button\"\n >\n Clear All\n </button>\n </a>\n </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff!important;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff!important;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"] }]
|
|
1227
1227
|
}], ctorParameters: function () { return []; }, propDecorators: { inputDropdownListModel: [{
|
|
1228
1228
|
type: Input
|
|
1229
1229
|
}], disableBtn: [{
|
|
@@ -1275,10 +1275,10 @@ class InputRadioComponent {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
InputRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1278
|
-
InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1278
|
+
InputRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputRadioComponent, selector: "symphony-input-radio", inputs: { isActive: "isActive", label: "label", isRequired: "isRequired" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1279
1279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputRadioComponent, decorators: [{
|
|
1280
1280
|
type: Component,
|
|
1281
|
-
args: [{ selector: 'symphony-input-radio', template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"] }]
|
|
1281
|
+
args: [{ selector: 'symphony-input-radio', template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n <input\n type=\"radio\"\n class=\"sfx-radio-input sfx-position-absolute\"\n [checked]=\"isActive\"\n name=\"{{ label }}\"\n />\n <label for=\"{{ label }}\" class=\"Font400\"\n >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n >\n</div>\n", styles: [".requiredField{color:#000!important}.sfx-radio{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-radio .sfx-radio-input{top:0;left:0;width:100%;cursor:inherit;height:100%;margin:0;opacity:0;padding:0;z-index:1;position:absolute}.sfx-radio .sfx-radio-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;font-family:neuzeit_groteskbold}.sfx-radio .sfx-radio-input+*:before{content:\"\";display:inline-block;vertical-align:bottom;width:1rem;height:1rem;margin-right:.5rem;margin-bottom:.2rem;border-radius:50%;border-style:solid;border-width:.1rem;border-color:#000}.sfx-radio .sfx-radio-input:checked+*:before{background:radial-gradient(black 0%,black 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}\n"] }]
|
|
1282
1282
|
}], ctorParameters: function () { return []; }, propDecorators: { isActive: [{
|
|
1283
1283
|
type: Input
|
|
1284
1284
|
}], label: [{
|
|
@@ -1335,10 +1335,10 @@ class InputTextComponent {
|
|
|
1335
1335
|
}
|
|
1336
1336
|
}
|
|
1337
1337
|
InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1338
|
-
InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1338
|
+
InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1339
1339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
1340
1340
|
type: Component,
|
|
1341
|
-
args: [{ selector: 'symphony-input-text', template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
|
|
1341
|
+
args: [{ selector: 'symphony-input-text', template: "<div\n class=\"input-text-wrap\"\n [ngClass]=\"{\n 'input-secondary': isInverse\n }\"\n>\n <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n label\n }}</label>\n<div class=\"sfx-p-5\">\n <input\n type=\"text\"\n name=\"input-text\"\n class=\"input-text\"\n autocomplete=\"off\"\n placeholder=\"{{ placeholder }}\"\n (keyup)=\"onTextChange($event)\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
|
|
1342
1342
|
}], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
|
|
1343
1343
|
type: Input
|
|
1344
1344
|
}], icon: [{
|
|
@@ -1458,10 +1458,10 @@ class InputChipsComponent {
|
|
|
1458
1458
|
}
|
|
1459
1459
|
}
|
|
1460
1460
|
InputChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1461
|
-
InputChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputChipsComponent, selector: "symphony-input-chips", inputs: { chips: "chips", autocompleteList: "autocompleteList", validators: "validators", asyncValidators: "asyncValidators", errorMessages: "errorMessages", controlName: "controlName", form: "form", label: "label", isDisabled: "isDisabled" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px
|
|
1461
|
+
InputChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputChipsComponent, selector: "symphony-input-chips", inputs: { chips: "chips", autocompleteList: "autocompleteList", validators: "validators", asyncValidators: "asyncValidators", errorMessages: "errorMessages", controlName: "controlName", form: "form", label: "label", isDisabled: "isDisabled" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::-moz-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input:-ms-input-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px rgba(0,0,0,.2);max-height:260px;padding-top:0}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item{font-family:neuzeit_groteskbold;letter-spacing:normal;max-height:40px;line-height:35px}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected,.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected:active{background:#000;color:#fff}\n"], components: [{ type: i1$4.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration", "inputText"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { type: ChipComponent, selector: "symphony-chip", inputs: ["chipLabel", "hasClose", "hasError"], outputs: ["removeChip"] }, { type: i1$4.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems", "autocompleteObservable"] }], directives: [{ type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1462
1462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputChipsComponent, decorators: [{
|
|
1463
1463
|
type: Component,
|
|
1464
|
-
args: [{ selector: 'symphony-input-chips', encapsulation: ViewEncapsulation.None, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px
|
|
1464
|
+
args: [{ selector: 'symphony-input-chips', encapsulation: ViewEncapsulation.None, template: "<div [formGroup]=\"form\">\n <label for=\"item\" *ngIf=\"label\" class=\"input-label\">{{ label }} </label>\n <tag-input\n #input\n class=\"sfx-chips\"\n [formControlName]=\"controlName\"\n [asyncValidators]=\"asyncValidators\"\n [errorMessages]=\"errorMessages\"\n [addOnBlur]=\"true\"\n [@.disabled]=\"isDisabled\"\n (onAdd)=\"onAdd($event)\"\n (onRemove)=\"onRemove($event)\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n <span>\n <symphony-chip\n [chipLabel]=\"item.display\"\n [hasError]=\"item.hasError\"\n [hasClose]=\"true\"\n (removeChip)=\"input.removeItem(item, index)\"\n >\n </symphony-chip>\n </span>\n </ng-template>\n\n <div class=\"error-message\">{{ validationMessage }}</div>\n <tag-input-dropdown\n [showDropdownIfEmpty]=\"true\"\n [autocompleteItems]=\"autocompleteList\"\n [appendToBody]=\"false\"\n >\n <ng-template let-item=\"item\" let-index=\"index\">\n {{ item.display }}\n </ng-template>\n </tag-input-dropdown>\n </tag-input>\n <input type=\"hidden\" [formControlName]=\"controlErrorCount\" value=\"0\" />\n</div>\n", styles: [".sfx .input-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.27rem;line-height:25px}.sfx .sfx-chips .ng2-tag-input{border-bottom:0;min-height:auto;border:1px solid #d0d0d0;border-radius:4px;padding:4px 0 0 4px;max-height:110px;height:100%;overflow-y:auto}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-tag-input::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--focused,.sfx .sfx-chips .ng2-tag-input.ng2-tag-input--invalid{border-bottom:1px solid #d0d0d0}.sfx .sfx-chips .ng2-tag-input__text-input{padding:0;height:30px;font-family:neuzeit_groteskregular,sans-serif}.sfx .sfx-chips .ng2-tag-input__text-input::-moz-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input:-ms-input-placeholder{text-indent:-9999px}.sfx .sfx-chips .ng2-tag-input__text-input::placeholder{text-indent:-9999px}.sfx .sfx-chips tag,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active{font-family:neuzeit_groteskregular,sans-serif;line-height:inherit;background:none;margin:0 0 5px;padding:0;height:auto}.sfx .sfx-chips tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):focus,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,.sfx .sfx-chips tag:not(.readonly):not(.tag--editing):active:not(.readonly):not(.tag--editing):focus{background:none;color:#fff;cursor:default;box-shadow:none}.sfx .sfx-chips .error-message{color:#f0001e;font-size:14px}.sfx .sfx-chips .ng2-dropdown-menu{position:relative!important;width:100%;display:block;top:0!important;left:0!important;margin-top:0;border:1px solid #d0d0d0;border-width:0 1px 1px 1px;box-shadow:0 10px 10px rgba(0,0,0,.2);max-height:260px;padding-top:0}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar{width:10px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-track{box-shadow:inset 0 0 2px transparent;border-radius:30px}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px;border-right:2px white solid;background-clip:padding-box}.sfx .sfx-chips .ng2-dropdown-menu::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item{font-family:neuzeit_groteskbold;letter-spacing:normal;max-height:40px;line-height:35px}.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected,.sfx .sfx-chips .ng2-dropdown-menu .ng2-menu-item--selected:active{background:#000;color:#fff}\n"] }]
|
|
1465
1465
|
}], ctorParameters: function () { return []; }, propDecorators: { chips: [{
|
|
1466
1466
|
type: Input
|
|
1467
1467
|
}], autocompleteList: [{
|
|
@@ -1554,10 +1554,10 @@ class PillComponent {
|
|
|
1554
1554
|
}
|
|
1555
1555
|
}
|
|
1556
1556
|
PillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1557
|
-
PillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillComponent, selector: "symphony-pill", inputs: { pillLabel: "pillLabel", isInverse: "isInverse", hasClose: "hasClose", tooltipLabel: "tooltipLabel" }, outputs: { removePill: "removePill" }, ngImport: i0, template: "<span *ngIf=\"tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n tooltip=\"{{tooltipLabel}}\"\n placement=\"top\"\n containerClass=\"sfx-info-tooltip pill-tooltip\"\n [adaptivePosition]=\"false\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px
|
|
1557
|
+
PillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PillComponent, selector: "symphony-pill", inputs: { pillLabel: "pillLabel", isInverse: "isInverse", hasClose: "hasClose", tooltipLabel: "tooltipLabel" }, outputs: { removePill: "removePill" }, ngImport: i0, template: "<span *ngIf=\"tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n tooltip=\"{{tooltipLabel}}\"\n placement=\"top\"\n containerClass=\"sfx-info-tooltip pill-tooltip\"\n [adaptivePosition]=\"false\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1558
1558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PillComponent, decorators: [{
|
|
1559
1559
|
type: Component,
|
|
1560
|
-
args: [{ selector: 'symphony-pill', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n tooltip=\"{{tooltipLabel}}\"\n placement=\"top\"\n containerClass=\"sfx-info-tooltip pill-tooltip\"\n [adaptivePosition]=\"false\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px
|
|
1560
|
+
args: [{ selector: 'symphony-pill', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n tooltip=\"{{tooltipLabel}}\"\n placement=\"top\"\n containerClass=\"sfx-info-tooltip pill-tooltip\"\n [adaptivePosition]=\"false\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n class=\"sfx-d-inline-block sfx-pill-item\"\n [ngClass]=\"{'inverse-pill': isInverse }\"\n [ngClass]=\"{'has-close': hasClose }\"\n >\n <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n class=\"si-add sfx-cursor-pointer\"\n ></i>\n {{ pillLabel }}\n</span>", styles: [".sfx-pill-item{font-family:neuzeit_groteskbold;background-color:#f1f1f1;color:#000;padding:10px 20px;border-radius:25px;text-align:center;font-weight:600;margin-right:10px;margin-top:10px;position:relative}.sfx-pill-item:hover,.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;position:absolute;left:14px;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;padding:8px 15px;border-radius:0;max-width:160px;font-size:13px;color:#000}\n"] }]
|
|
1561
1561
|
}], ctorParameters: function () { return []; }, propDecorators: { pillLabel: [{
|
|
1562
1562
|
type: Input
|
|
1563
1563
|
}], isInverse: [{
|
|
@@ -2002,10 +2002,10 @@ class InputSearchCheckboxDropdownComponent {
|
|
|
2002
2002
|
}
|
|
2003
2003
|
}
|
|
2004
2004
|
InputSearchCheckboxDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, deps: [{ token: CapitalizeFirstCharacterPipe }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2005
|
-
InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "capitalizeFirstCharacter": CapitalizeFirstCharacterPipe } });
|
|
2005
|
+
InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "capitalizeFirstCharacter": CapitalizeFirstCharacterPipe } });
|
|
2006
2006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, decorators: [{
|
|
2007
2007
|
type: Component,
|
|
2008
|
-
args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"] }]
|
|
2008
|
+
args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n <div\n *ngIf=\"multiSelectSearch.componentHeading\"\n class=\"sfx-filter-label sfx-d-inline-block\"\n >\n <b\n >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n </b>\n </div>\n <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_one\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' AND ')\"\n [checked]=\"multiSelectSearch.condition === ' AND '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n >and</label\n >\n <input\n type=\"radio\"\n id=\"radio_{{ conditionSelectionId }}_two\"\n name=\"radio_{{ conditionSelectionId }}\"\n value=\"yes\"\n (click)=\"onConditionClick(' OR ')\"\n [checked]=\"multiSelectSearch.condition === ' OR '\"\n />\n <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n </div>\n <div\n class=\"sfx-custom-dropdown-wrap\"\n [ngClass]=\"{ open: openDropdown }\"\n dropdown\n #dropdown=\"bs-dropdown\"\n (onShown)=\"toggleDropdown()\"\n [insideClick]=\"true\"\n (onHidden)=\"onOkClick(true)\"\n >\n <input\n [ngClass]=\"{ 'invalid-control': isInvalid }\"\n (click)=\"dropdown.isOpen = true\"\n type=\"text\"\n id=\"{{ conditionSelectionId }}\"\n [(ngModel)]=\"multiSelectSearch.searchInput\"\n (ngModelChange)=\"onSearchInputChange()\"\n dropdownToggle\n popover=\"{{ popOverText() }}\"\n containerClass=\"sfx-input-popover\"\n triggers=\"\"\n placement=\"top\"\n #pop=\"bs-popover\"\n (mouseenter)=\"showPop()\"\n (mouseleave)=\"onPopMouseLeave()\"\n (focus)=\"onFocusClick(true)\"\n (blur)=\"onFocusClick(false)\"\n class=\"sfx-placeholder\"\n placeholder=\"{{\n enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n }}\"\n autocomplete=\"off\"\n [disabled]=\"isDisabled\"\n />\n <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n <div *dropdownMenu>\n <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n <symphony-input-toggle\n [isToggled]=\"isAllToggled\"\n [isInverse]=\"false\"\n (toggleClick)=\"onToggleClick($event)\"\n ></symphony-input-toggle>\n </div>\n <!-- Create And Add Tags -->\n <div\n class=\"sfx-create-new-items\"\n *ngIf=\"\n multiSelectSearch.labelCreateNewItems &&\n multiSelectSearch.showCreateNewItems\n \"\n (click)=\"onCreateNewItem()\"\n [ngClass]=\"{\n 'sfx-font-bold': multiSelectSearch.showCreateNewModal\n }\"\n >\n {{ multiSelectSearch.labelCreateNewItems }}\n <span\n class=\"sfx-font-bold\"\n *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n > '\n {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}'\n </span>\n <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n </div>\n <!-- Create And Add Tags ends here -->\n <!-- selected list div -->\n <div\n class=\"sfx-dropdown-selected sfx-custom-scroll\"\n *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n >\n <div\n class=\"sfx-d-inline-block\"\n *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n >\n <div\n (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n class=\"sfx-checkbox sfx-d-inline-block\"\n >\n <input\n type=\"checkbox\"\n checked\n class=\"sfx-checkbox-input\"\n id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n />\n <label\n class=\"Font400\"\n for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n >{{ selectedItem.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"selectedItem.additionalInfo\"\n class=\"selected-additional-info\"\n >\n {{ selectedItem.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n </div>\n <!-- selected list div ends here -->\n <!-- Search list -->\n <div\n class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n (scroll)=\"scrollHandler($event)\"\n *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n >\n <div\n id=\"dropdown-triggers-manually\"\n *ngFor=\"\n let filterDropdownOption of multiSelectSearch.searchedDropdownList\n \"\n >\n <div class=\"sfx-checkbox\">\n <input\n type=\"checkbox\"\n id=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n class=\"sfx-checkbox-input\"\n [disabled]=\"multiSelectSearch.hasMaxSelections\"\n (click)=\"\n onSelectItem(filterDropdownOption); $event.stopPropagation()\n \"\n [(ngModel)]=\"filterDropdownOption.isChecked\"\n />\n <label\n class=\"Font400\"\n for=\"{{ filterDropdownOption.id }}_{{\n filterDropdownOption.name\n }}\"\n >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n <br />\n <span\n *ngIf=\"filterDropdownOption.additionalInfo\"\n class=\"additional-info\"\n >\n {{ filterDropdownOption.additionalInfo }}</span\n >\n </label>\n </div>\n <div></div>\n </div>\n <div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingData\"\n ></symphony-sfx-loader>\n </div>\n </div>\n <symphony-sfx-loader\n [hidden]=\"!isLoadingInitialData\"\n ></symphony-sfx-loader>\n <!-- search list ends here -->\n <!-- Footer -->\n <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n <button\n type=\"button\"\n class=\"pull-left\"\n [disabled]=\"\n !(\n multiSelectSearch.selectedDropdownList &&\n multiSelectSearch.selectedDropdownList.length > 0\n )\n \"\n (click)=\"onClearAllClick()\"\n >\n Clear All\n </button>\n <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n </div>\n <!-- End Footer -->\n </div>\n </div>\n </div>\n <div *ngIf=\"isInvalid\" class=\"error-message\">\n Please select a valid option\n </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"] }]
|
|
2009
2009
|
}], ctorParameters: function () { return [{ type: CapitalizeFirstCharacterPipe }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pop: [{
|
|
2010
2010
|
type: ViewChild,
|
|
2011
2011
|
args: ['pop', { static: false }]
|
|
@@ -2206,10 +2206,10 @@ class NotificationsComponent {
|
|
|
2206
2206
|
}
|
|
2207
2207
|
}
|
|
2208
2208
|
NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2209
|
-
NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationsComponent, selector: "symphony-notifications", inputs: { model: "model" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n {{ model.unreadNotificationCount }}</span\n >\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" class=\"sfx-p-20\">\n <symphony-h3 [text]=\"model.title\"></symphony-h3>\n </li>\n <li *ngIf=\"!model.isLoading\">\n <ul class=\"list-unstyled sfx-notification-list\">\n <li\n role=\"menuitem\"\n class=\"sfx-notification-list-items\"\n *ngFor=\"let notification of model.notifications\"\n >\n <div class=\"dropdown-item sfx-position-relative\">\n <div class=\"notification-wrap\">\n <div class=\"notification-text sfx-mb-10\">\n <symphony-icon\n *ngIf=\"notification.icon\"\n [icon]=\"notification.icon\"\n class=\"icon-position\"\n ></symphony-icon>\n <span *ngIf=\"!notification.isHtml\">{{\n notification.text\n }}</span>\n <div\n class=\"hasBold\"\n *ngIf=\"notification.isHtml\"\n [innerHTML]=\"notification.text\"\n ></div>\n </div>\n <div class=\"notification-footer\">\n <span>{{ notification.timestamp }}</span>\n <span\n class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n (click)=\"onActionClick(notification)\"\n >{{ notification.action }}</span\n >\n </div>\n </div>\n </div>\n <div class=\"horizontal-divider\"></div>\n </li>\n <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n </ul>\n </li>\n <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n <li\n class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n >\n <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px
|
|
2209
|
+
NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationsComponent, selector: "symphony-notifications", inputs: { model: "model" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n {{ model.unreadNotificationCount }}</span\n >\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" class=\"sfx-p-20\">\n <symphony-h3 [text]=\"model.title\"></symphony-h3>\n </li>\n <li *ngIf=\"!model.isLoading\">\n <ul class=\"list-unstyled sfx-notification-list\">\n <li\n role=\"menuitem\"\n class=\"sfx-notification-list-items\"\n *ngFor=\"let notification of model.notifications\"\n >\n <div class=\"dropdown-item sfx-position-relative\">\n <div class=\"notification-wrap\">\n <div class=\"notification-text sfx-mb-10\">\n <symphony-icon\n *ngIf=\"notification.icon\"\n [icon]=\"notification.icon\"\n class=\"icon-position\"\n ></symphony-icon>\n <span *ngIf=\"!notification.isHtml\">{{\n notification.text\n }}</span>\n <div\n class=\"hasBold\"\n *ngIf=\"notification.isHtml\"\n [innerHTML]=\"notification.text\"\n ></div>\n </div>\n <div class=\"notification-footer\">\n <span>{{ notification.timestamp }}</span>\n <span\n class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n (click)=\"onActionClick(notification)\"\n >{{ notification.action }}</span\n >\n </div>\n </div>\n </div>\n <div class=\"horizontal-divider\"></div>\n </li>\n <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n </ul>\n </li>\n <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n <li\n class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n >\n <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit;background:#ffffff}.btn-group .dropdown-menu .sfx-notification-list{max-height:280px;overflow-y:scroll;margin-bottom:20px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item{padding:0 15px 0 25px;line-height:20px;color:#000;border-radius:10px;background-color:#fff}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item:hover{background:#fff;color:#000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap{position:relative;padding:10px 10px 10px 25px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .hasBold span{font-family:neuzeit_groteskbold,sans-serif}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status{content:\"\";width:15px;height:15px;background:#00bb5b;border-radius:50%;position:absolute;top:12px;left:0}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status.red{background:#d60000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-footer{display:flex;justify-content:space-between}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items .horizontal-divider{border-bottom:1px solid #d9d9d9;margin:0 15px}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items:last-child .horizontal-divider{border-bottom:none}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#565656}.btn-group.open button.dropdown-toggle.btn .notification-on{border-color:#565656}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}::-webkit-scrollbar-thumb:hover{cursor:pointer}.icon-position{position:absolute;left:-5px;top:12px}.notification-action:hover{text-decoration:underline}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
2210
2210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, decorators: [{
|
|
2211
2211
|
type: Component,
|
|
2212
|
-
args: [{ selector: 'symphony-notifications', template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n {{ model.unreadNotificationCount }}</span\n >\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" class=\"sfx-p-20\">\n <symphony-h3 [text]=\"model.title\"></symphony-h3>\n </li>\n <li *ngIf=\"!model.isLoading\">\n <ul class=\"list-unstyled sfx-notification-list\">\n <li\n role=\"menuitem\"\n class=\"sfx-notification-list-items\"\n *ngFor=\"let notification of model.notifications\"\n >\n <div class=\"dropdown-item sfx-position-relative\">\n <div class=\"notification-wrap\">\n <div class=\"notification-text sfx-mb-10\">\n <symphony-icon\n *ngIf=\"notification.icon\"\n [icon]=\"notification.icon\"\n class=\"icon-position\"\n ></symphony-icon>\n <span *ngIf=\"!notification.isHtml\">{{\n notification.text\n }}</span>\n <div\n class=\"hasBold\"\n *ngIf=\"notification.isHtml\"\n [innerHTML]=\"notification.text\"\n ></div>\n </div>\n <div class=\"notification-footer\">\n <span>{{ notification.timestamp }}</span>\n <span\n class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n (click)=\"onActionClick(notification)\"\n >{{ notification.action }}</span\n >\n </div>\n </div>\n </div>\n <div class=\"horizontal-divider\"></div>\n </li>\n <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n </ul>\n </li>\n <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n <li\n class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n >\n <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px
|
|
2212
|
+
args: [{ selector: 'symphony-notifications', template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n {{ model.unreadNotificationCount }}</span\n >\n </button>\n <ul\n id=\"dropdown-basic\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"button-basic\"\n >\n <li role=\"menuitem\" class=\"sfx-p-20\">\n <symphony-h3 [text]=\"model.title\"></symphony-h3>\n </li>\n <li *ngIf=\"!model.isLoading\">\n <ul class=\"list-unstyled sfx-notification-list\">\n <li\n role=\"menuitem\"\n class=\"sfx-notification-list-items\"\n *ngFor=\"let notification of model.notifications\"\n >\n <div class=\"dropdown-item sfx-position-relative\">\n <div class=\"notification-wrap\">\n <div class=\"notification-text sfx-mb-10\">\n <symphony-icon\n *ngIf=\"notification.icon\"\n [icon]=\"notification.icon\"\n class=\"icon-position\"\n ></symphony-icon>\n <span *ngIf=\"!notification.isHtml\">{{\n notification.text\n }}</span>\n <div\n class=\"hasBold\"\n *ngIf=\"notification.isHtml\"\n [innerHTML]=\"notification.text\"\n ></div>\n </div>\n <div class=\"notification-footer\">\n <span>{{ notification.timestamp }}</span>\n <span\n class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n (click)=\"onActionClick(notification)\"\n >{{ notification.action }}</span\n >\n </div>\n </div>\n </div>\n <div class=\"horizontal-divider\"></div>\n </li>\n <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n </ul>\n </li>\n <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n <li\n class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n >\n <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit;background:#ffffff}.btn-group .dropdown-menu .sfx-notification-list{max-height:280px;overflow-y:scroll;margin-bottom:20px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item{padding:0 15px 0 25px;line-height:20px;color:#000;border-radius:10px;background-color:#fff}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item:hover{background:#fff;color:#000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap{position:relative;padding:10px 10px 10px 25px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .hasBold span{font-family:neuzeit_groteskbold,sans-serif}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status{content:\"\";width:15px;height:15px;background:#00bb5b;border-radius:50%;position:absolute;top:12px;left:0}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status.red{background:#d60000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-footer{display:flex;justify-content:space-between}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items .horizontal-divider{border-bottom:1px solid #d9d9d9;margin:0 15px}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items:last-child .horizontal-divider{border-bottom:none}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#565656}.btn-group.open button.dropdown-toggle.btn .notification-on{border-color:#565656}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}::-webkit-scrollbar-thumb:hover{cursor:pointer}.icon-position{position:absolute;left:-5px;top:12px}.notification-action:hover{text-decoration:underline}\n"] }]
|
|
2213
2213
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2214
2214
|
type: Input
|
|
2215
2215
|
}], actionClick: [{
|
|
@@ -2407,10 +2407,10 @@ class CardComponent {
|
|
|
2407
2407
|
}
|
|
2408
2408
|
}
|
|
2409
2409
|
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2410
|
-
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardComponent, selector: "symphony-card", inputs: { cardModel: "cardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"card-item-wrapper\">\n <div class=\"card-item\" (click)=\"onClick()\">\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h4>{{ cardModel.title }}</symphony-h4>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px
|
|
2410
|
+
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardComponent, selector: "symphony-card", inputs: { cardModel: "cardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"card-item-wrapper\">\n <div class=\"card-item\" (click)=\"onClick()\">\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h4>{{ cardModel.title }}</symphony-h4>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
|
|
2411
2411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, decorators: [{
|
|
2412
2412
|
type: Component,
|
|
2413
|
-
args: [{ selector: 'symphony-card', template: "<div class=\"card-item-wrapper\">\n <div class=\"card-item\" (click)=\"onClick()\">\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h4>{{ cardModel.title }}</symphony-h4>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px
|
|
2413
|
+
args: [{ selector: 'symphony-card', template: "<div class=\"card-item-wrapper\">\n <div class=\"card-item\" (click)=\"onClick()\">\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n </div>\n <div class=\"card-title\">\n <symphony-h4>{{ cardModel.title }}</symphony-h4>\n </div>\n </div>\n <div class=\"card-description\">\n <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n </div>\n </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"] }]
|
|
2414
2414
|
}], ctorParameters: function () { return []; }, propDecorators: { cardModel: [{
|
|
2415
2415
|
type: Input
|
|
2416
2416
|
}], clicked: [{
|
|
@@ -2439,6 +2439,21 @@ var FeedbackCardState;
|
|
|
2439
2439
|
FeedbackCardState["NotNow"] = "Not Now";
|
|
2440
2440
|
})(FeedbackCardState || (FeedbackCardState = {}));
|
|
2441
2441
|
|
|
2442
|
+
class ColorSampleComponent {
|
|
2443
|
+
constructor() { }
|
|
2444
|
+
ngOnInit() {
|
|
2445
|
+
this.bgColor = this.color;
|
|
2446
|
+
}
|
|
2447
|
+
}
|
|
2448
|
+
ColorSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2449
|
+
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"] }] });
|
|
2450
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, decorators: [{
|
|
2451
|
+
type: Component,
|
|
2452
|
+
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"] }]
|
|
2453
|
+
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
|
|
2454
|
+
type: Input
|
|
2455
|
+
}] } });
|
|
2456
|
+
|
|
2442
2457
|
class FeedbackCardComponent {
|
|
2443
2458
|
constructor() {
|
|
2444
2459
|
this.cardClick = new EventEmitter();
|
|
@@ -2449,16 +2464,30 @@ class FeedbackCardComponent {
|
|
|
2449
2464
|
}
|
|
2450
2465
|
}
|
|
2451
2466
|
FeedbackCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2452
|
-
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
|
|
2467
|
+
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 });
|
|
2453
2468
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardComponent, decorators: [{
|
|
2454
2469
|
type: Component,
|
|
2455
|
-
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
|
|
2470
|
+
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"] }]
|
|
2456
2471
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2457
2472
|
type: Input
|
|
2458
2473
|
}], cardClick: [{
|
|
2459
2474
|
type: Output
|
|
2460
2475
|
}] } });
|
|
2461
2476
|
|
|
2477
|
+
class ColorSampleModule {
|
|
2478
|
+
}
|
|
2479
|
+
ColorSampleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2480
|
+
ColorSampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, declarations: [ColorSampleComponent], imports: [CommonModule], exports: [ColorSampleComponent] });
|
|
2481
|
+
ColorSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, imports: [[CommonModule]] });
|
|
2482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, decorators: [{
|
|
2483
|
+
type: NgModule,
|
|
2484
|
+
args: [{
|
|
2485
|
+
declarations: [ColorSampleComponent],
|
|
2486
|
+
imports: [CommonModule],
|
|
2487
|
+
exports: [ColorSampleComponent],
|
|
2488
|
+
}]
|
|
2489
|
+
}] });
|
|
2490
|
+
|
|
2462
2491
|
class FeedbackCardModule {
|
|
2463
2492
|
}
|
|
2464
2493
|
FeedbackCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -2467,14 +2496,16 @@ FeedbackCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
|
|
|
2467
2496
|
IconModule,
|
|
2468
2497
|
H5Module,
|
|
2469
2498
|
IconWrapperModule,
|
|
2470
|
-
ParagraphModule
|
|
2499
|
+
ParagraphModule,
|
|
2500
|
+
ColorSampleModule], exports: [FeedbackCardComponent] });
|
|
2471
2501
|
FeedbackCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, imports: [[
|
|
2472
2502
|
CommonModule,
|
|
2473
2503
|
H4Module,
|
|
2474
2504
|
IconModule,
|
|
2475
2505
|
H5Module,
|
|
2476
2506
|
IconWrapperModule,
|
|
2477
|
-
ParagraphModule
|
|
2507
|
+
ParagraphModule,
|
|
2508
|
+
ColorSampleModule
|
|
2478
2509
|
]] });
|
|
2479
2510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackCardModule, decorators: [{
|
|
2480
2511
|
type: NgModule,
|
|
@@ -2486,7 +2517,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2486
2517
|
IconModule,
|
|
2487
2518
|
H5Module,
|
|
2488
2519
|
IconWrapperModule,
|
|
2489
|
-
ParagraphModule
|
|
2520
|
+
ParagraphModule,
|
|
2521
|
+
ColorSampleModule
|
|
2490
2522
|
],
|
|
2491
2523
|
exports: [FeedbackCardComponent]
|
|
2492
2524
|
}]
|
|
@@ -2822,10 +2854,10 @@ class PhaserCardComponent {
|
|
|
2822
2854
|
}
|
|
2823
2855
|
}
|
|
2824
2856
|
PhaserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2825
|
-
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", 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]=\"model.cardHeightPx\"\n [style.width.px]=\"model.cardWidthPx\"\n [ngClass]=\"{ 'has-hover': model.isClickable }\"\n [ngClass]=\"{ 'has-hover': model.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': model.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': model.hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"model.icon\"></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
|
|
2857
|
+
PhaserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: PhaserCardComponent, selector: "symphony-phaser-card", inputs: { model: "model", 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]=\"model.cardHeightPx\"\n [style.width.px]=\"model.cardWidthPx\"\n [ngClass]=\"{ 'has-hover': model.isClickable }\"\n [ngClass]=\"{ 'has-hover': model.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': model.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': model.hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"model.icon\"></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 rgba(0,0,0,.25);height:407px;background:#fff}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:203.5px;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:407px}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 });
|
|
2826
2858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PhaserCardComponent, decorators: [{
|
|
2827
2859
|
type: Component,
|
|
2828
|
-
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"model.cardHeightPx\"\n [style.width.px]=\"model.cardWidthPx\"\n [ngClass]=\"{ 'has-hover': model.isClickable }\"\n [ngClass]=\"{ 'has-hover': model.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': model.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': model.hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"model.icon\"></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
|
|
2860
|
+
args: [{ selector: 'symphony-phaser-card', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"model\"\n class=\"card-item-wrapper\"\n [style.height.px]=\"model.cardHeightPx\"\n [style.width.px]=\"model.cardWidthPx\"\n [ngClass]=\"{ 'has-hover': model.isClickable }\"\n [ngClass]=\"{ 'has-hover': model.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': model.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': model.hasAnimation }\"\n >\n <div class=\"card-title-wrap sfx-d-flex\">\n <div class=\"card-icon\">\n <symphony-icon [icon]=\"model.icon\"></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 rgba(0,0,0,.25);height:407px;background:#fff}.card-item-wrapper.has-hover{cursor:pointer}.card-item-wrapper .card-phaser-wrapper{height:203.5px;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:407px}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"] }]
|
|
2829
2861
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2830
2862
|
type: Input
|
|
2831
2863
|
}], isClickable: [{
|
|
@@ -2899,21 +2931,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2899
2931
|
}]
|
|
2900
2932
|
}] });
|
|
2901
2933
|
|
|
2902
|
-
class ColorSampleComponent {
|
|
2903
|
-
constructor() { }
|
|
2904
|
-
ngOnInit() {
|
|
2905
|
-
this.bgColor = this.color;
|
|
2906
|
-
}
|
|
2907
|
-
}
|
|
2908
|
-
ColorSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2909
|
-
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"] }] });
|
|
2910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleComponent, decorators: [{
|
|
2911
|
-
type: Component,
|
|
2912
|
-
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"] }]
|
|
2913
|
-
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
|
|
2914
|
-
type: Input
|
|
2915
|
-
}] } });
|
|
2916
|
-
|
|
2917
2934
|
class ColorSwatchComponent {
|
|
2918
2935
|
constructor() {
|
|
2919
2936
|
this.colorSwatchModel = {
|
|
@@ -2938,20 +2955,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2938
2955
|
type: Input
|
|
2939
2956
|
}] } });
|
|
2940
2957
|
|
|
2941
|
-
class ColorSampleModule {
|
|
2942
|
-
}
|
|
2943
|
-
ColorSampleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2944
|
-
ColorSampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, declarations: [ColorSampleComponent], imports: [CommonModule], exports: [ColorSampleComponent] });
|
|
2945
|
-
ColorSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, imports: [[CommonModule]] });
|
|
2946
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSampleModule, decorators: [{
|
|
2947
|
-
type: NgModule,
|
|
2948
|
-
args: [{
|
|
2949
|
-
declarations: [ColorSampleComponent],
|
|
2950
|
-
imports: [CommonModule],
|
|
2951
|
-
exports: [ColorSampleComponent],
|
|
2952
|
-
}]
|
|
2953
|
-
}] });
|
|
2954
|
-
|
|
2955
2958
|
class ColorSwatchModule {
|
|
2956
2959
|
}
|
|
2957
2960
|
ColorSwatchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColorSwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -3291,10 +3294,10 @@ class FeedbackLoginModalComponent {
|
|
|
3291
3294
|
}
|
|
3292
3295
|
}
|
|
3293
3296
|
FeedbackLoginModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3294
|
-
FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <symphony-h4>Two-Factor Authentication</symphony-h4>\n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n <symphony-paragraph>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</symphony-paragraph>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n [text]=\"model.email\"\n ></symphony-paragraph>\n <div>\n <symphony-input-text\n class=\"authentication-input sfx-d-inline-block\"\n [label]=\"'Authentication Code'\"\n (textChange)=\"onAuthCodeChange($event)\"\n >\n </symphony-input-text>\n <symphony-h5\n class=\"sfx-d-inline-block sfx-cursor-pointer\"\n [text]=\"'Resend'\"\n (click)=\"onResendClick()\"\n ></symphony-h5>\n </div>\n <div class=\"input-validation sfx-txt-red\">\n <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n </div>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-d-block\"\n >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n </section>\n <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n <symphony-button\n class=\"sfx-ml-20\"\n [text]=\"'Verify'\"\n [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n (clicked)=\"onVerifyClick($event)\"\n ></symphony-button>\n </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px
|
|
3297
|
+
FeedbackLoginModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackLoginModalComponent, selector: "symphony-feedback-login-modal", inputs: { model: "model" }, outputs: { verifyClicked: "verifyClicked", resendClick: "resendClick", authCodeChange: "authCodeChange" }, ngImport: i0, template: "<div class=\"sfx sfx-modal\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <symphony-h4>Two-Factor Authentication</symphony-h4>\n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n <symphony-paragraph>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</symphony-paragraph>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n [text]=\"model.email\"\n ></symphony-paragraph>\n <div>\n <symphony-input-text\n class=\"authentication-input sfx-d-inline-block\"\n [label]=\"'Authentication Code'\"\n (textChange)=\"onAuthCodeChange($event)\"\n >\n </symphony-input-text>\n <symphony-h5\n class=\"sfx-d-inline-block sfx-cursor-pointer\"\n [text]=\"'Resend'\"\n (click)=\"onResendClick()\"\n ></symphony-h5>\n </div>\n <div class=\"input-validation sfx-txt-red\">\n <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n </div>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-d-block\"\n >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n </section>\n <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n <symphony-button\n class=\"sfx-ml-20\"\n [text]=\"'Verify'\"\n [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n (clicked)=\"onVerifyClick($event)\"\n ></symphony-button>\n </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}\n"], components: [{ type: H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size"], outputs: ["textChange"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3295
3298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackLoginModalComponent, decorators: [{
|
|
3296
3299
|
type: Component,
|
|
3297
|
-
args: [{ selector: 'symphony-feedback-login-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <symphony-h4>Two-Factor Authentication</symphony-h4>\n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n <symphony-paragraph>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</symphony-paragraph>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n [text]=\"model.email\"\n ></symphony-paragraph>\n <div>\n <symphony-input-text\n class=\"authentication-input sfx-d-inline-block\"\n [label]=\"'Authentication Code'\"\n (textChange)=\"onAuthCodeChange($event)\"\n >\n </symphony-input-text>\n <symphony-h5\n class=\"sfx-d-inline-block sfx-cursor-pointer\"\n [text]=\"'Resend'\"\n (click)=\"onResendClick()\"\n ></symphony-h5>\n </div>\n <div class=\"input-validation sfx-txt-red\">\n <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n </div>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-d-block\"\n >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n </section>\n <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n <symphony-button\n class=\"sfx-ml-20\"\n [text]=\"'Verify'\"\n [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n (clicked)=\"onVerifyClick($event)\"\n ></symphony-button>\n </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px
|
|
3300
|
+
args: [{ selector: 'symphony-feedback-login-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal\">\n <section class=\"modal-header sfx-p-30 sfx-pt-40\">\n <div class=\"modal-title\">\n <div class=\"row\">\n <div class=\"col-xs-8 col-sm-8 col-md-8 col-lg-8\">\n <symphony-h4>Two-Factor Authentication</symphony-h4>\n </div>\n </div>\n </div>\n </section>\n <section class=\"modal-body sfx-p-30\" *ngIf=\"!model.isLoading\">\n <symphony-paragraph>To access the feedback request, two-factor authentication is required. Please enter the verification code that was sent to the following email address:</symphony-paragraph>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-mb-20 sfx-d-block\"\n [text]=\"model.email\"\n ></symphony-paragraph>\n <div>\n <symphony-input-text\n class=\"authentication-input sfx-d-inline-block\"\n [label]=\"'Authentication Code'\"\n (textChange)=\"onAuthCodeChange($event)\"\n >\n </symphony-input-text>\n <symphony-h5\n class=\"sfx-d-inline-block sfx-cursor-pointer\"\n [text]=\"'Resend'\"\n (click)=\"onResendClick()\"\n ></symphony-h5>\n </div>\n <div class=\"input-validation sfx-txt-red\">\n <p *ngIf=\"model.showApiError\">Verification code is not valid<span>*</span></p>\n </div>\n <symphony-paragraph\n class=\"sfx-mt-20 sfx-d-block\"\n >If you dont have access to the email address listed above, please contact your administrator</symphony-paragraph>\n </section>\n <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n <symphony-sfx-loader></symphony-sfx-loader>\n </div>\n <section class=\"modal-footer sfx-pt-30 sfx-pb-40 sfx-pr-30 sfx-pl-30\">\n <symphony-button\n class=\"sfx-ml-20\"\n [text]=\"'Verify'\"\n [disabled]=\"model.isVerifyButtonDisabled || model.isLoading\"\n (clicked)=\"onVerifyClick($event)\"\n ></symphony-button>\n </section>\n</div>\n", styles: [".modal-wrapper{margin:0 auto;max-width:500px;width:100%;box-shadow:0 0 30px rgba(0,0,0,.2)}.authentication-input .input-text-label{margin-left:0!important}.authentication-input input{width:100px!important;margin-left:0!important}.loader-container{padding-top:100px;padding-bottom:100px}\n"] }]
|
|
3298
3301
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
3299
3302
|
type: Input
|
|
3300
3303
|
}], verifyClicked: [{
|
|
@@ -5512,10 +5515,10 @@ class InputEditableTextComponent {
|
|
|
5512
5515
|
}
|
|
5513
5516
|
}
|
|
5514
5517
|
InputEditableTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5515
|
-
InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
5518
|
+
InputEditableTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputEditableTextComponent, selector: "symphony-input-editable-text", inputs: { model: "model", type: "type" }, outputs: { confirm: "confirm", validate: "validate", editMode: "editMode" }, ngImport: i0, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"], components: [{ type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
5516
5519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputEditableTextComponent, decorators: [{
|
|
5517
5520
|
type: Component,
|
|
5518
|
-
args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
|
|
5521
|
+
args: [{ selector: 'symphony-input-editable-text', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"model\">\n <div *ngIf=\"!model.isInEditMode\">\n <div class=\"flex sfx-pt-10\">\n <div>\n <symphony-paragraph\n >{{ model.inputMask\n }}{{ model.value | number: \"1.0\":\"en-US\" }}</symphony-paragraph\n >\n </div>\n <div *ngIf=\"model.isEditable\" (click)=\"onEditClick()\" class=\"sfx-pl-10\">\n <symphony-icon [icon]=\"'si-edit'\" [size]=\"'14px'\"></symphony-icon>\n </div>\n <div *ngIf=\"!model.isEditable\" class=\"no-icon-padding\"></div>\n </div>\n </div>\n <div\n *ngIf=\"model.isInEditMode\"\n class=\"editMode\"\n [ngClass]=\"{\n invalid: model.isInvalid\n }\"\n >\n <span class=\"sfx-pr-10\"\n ><input\n type=\"{{ type }}\"\n *ngIf=\"maxMinPlaceholder\"\n [placeholder]=\"maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n <input\n type=\"{{ type }}\"\n *ngIf=\"!maxMinPlaceholder\"\n [(ngModel)]=\"model.value\"\n [ngClass]=\"{\n 'min-max-placeholder': model.minValue && model.maxValue\n }\"\n (keyup)=\"onValidate($event)\"\n />\n </span>\n <span class=\"edit-i-postion\"\n ><symphony-icon\n [ngClass]=\"{\n 'invalid-confirm': model.isInvalid\n }\"\n [icon]=\"'si-confirmation'\"\n (click)=\"onConfirmClick()\"\n ></symphony-icon\n ></span>\n <span class=\"sfx-ml-10 edit-i-postion\"\n ><symphony-icon\n [icon]=\"'si-close-modal'\"\n (click)=\"onCloseClick()\"\n ></symphony-icon\n ></span>\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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;padding:0}input{border-width:0px;border:none;width:75px}input:focus{outline:none}.flex{display:flex}.no-icon-padding{padding-right:23px}.editMode{border:1px solid #d9d9d9;padding:7.5px 10px;border-radius:4px}.editMode.invalid{border:1px solid #f0001e}.editMode .edit-i-postion{position:relative;top:2px}.editMode .min-max-placeholder::-moz-placeholder{color:#bababa}.editMode .min-max-placeholder:-ms-input-placeholder{color:#bababa}.editMode .min-max-placeholder::placeholder{color:#bababa}.invalid-confirm{color:#d0d0d0}.invalid-confirm:hover{cursor:no-drop}.invalid-confirm i{pointer-events:none}\n"] }]
|
|
5519
5522
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
5520
5523
|
type: Input
|
|
5521
5524
|
}], type: [{
|
|
@@ -6198,10 +6201,10 @@ class FeedbackDetailTemplateComponent {
|
|
|
6198
6201
|
constructor() { }
|
|
6199
6202
|
}
|
|
6200
6203
|
FeedbackDetailTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6201
|
-
FeedbackDetailTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailTemplateComponent, selector: "symphony-feedback-detail-template", ngImport: i0, template: "<section class=\"sfx-border-bottom-gray-1 sfx-pb-10 sfx-mt-10 sfx-header-mobile\">\n <div class=\"row\">\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-back-section\"\n >\n <ng-content select=\"[sfx-back-button]\"></ng-content>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n <ng-content select=\"[sfx-header]\"></ng-content>\n </div>\n </div>\n</section>\n\n<section class=\"sfx-column-wrap\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <ng-content select=\"[sfx-left-column]\"></ng-content>\n </div>\n <div\n id=\"review\"\n class=\"col-xs-12 col-sm-12 col-md-4 col-lg-4 pull-right sticky-top sfx-mr-20\"\n >\n <ng-content select=\"[sfx-right-column]\"></ng-content>\n </div>\n </div>\n</section>\n", styles: [".sfx-column-wrap{margin-top:50px}.sticky-top{position:sticky;top:50px;z-index:1020}@media (max-width: 767px){.sfx-header-mobile.sfx-pb-10{padding-bottom:25px}.sfx-back-section.sfx-mb-30{margin-bottom:10px}.sfx-column-wrap{margin-top:40px}.sticky-top{position:relative;top:auto}.sticky-top.sfx-mr-20{margin-right:0}}\n"] });
|
|
6204
|
+
FeedbackDetailTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailTemplateComponent, selector: "symphony-feedback-detail-template", ngImport: i0, template: "<section class=\"sfx-border-bottom-gray-1 sfx-pb-10 sfx-mt-10 sfx-header-mobile\">\n <div class=\"row\">\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-back-section\"\n >\n <ng-content select=\"[sfx-back-button]\"></ng-content>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n <ng-content select=\"[sfx-header]\"></ng-content>\n </div>\n </div>\n</section>\n\n<section class=\"sfx-column-wrap\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <ng-content select=\"[sfx-left-column]\"></ng-content>\n </div>\n <div\n id=\"review\"\n class=\"col-xs-12 col-sm-12 col-md-4 col-lg-4 pull-right sticky-top sfx-mr-20\"\n >\n <ng-content select=\"[sfx-right-column]\"></ng-content>\n </div>\n </div>\n</section>\n", styles: [".sfx-column-wrap{margin-top:50px}.sticky-top{position:-webkit-sticky;position:sticky;top:50px;z-index:1020}@media (max-width: 767px){.sfx-header-mobile.sfx-pb-10{padding-bottom:25px}.sfx-back-section.sfx-mb-30{margin-bottom:10px}.sfx-column-wrap{margin-top:40px}.sticky-top{position:relative;top:auto}.sticky-top.sfx-mr-20{margin-right:0}}\n"] });
|
|
6202
6205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailTemplateComponent, decorators: [{
|
|
6203
6206
|
type: Component,
|
|
6204
|
-
args: [{ selector: 'symphony-feedback-detail-template', template: "<section class=\"sfx-border-bottom-gray-1 sfx-pb-10 sfx-mt-10 sfx-header-mobile\">\n <div class=\"row\">\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-back-section\"\n >\n <ng-content select=\"[sfx-back-button]\"></ng-content>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n <ng-content select=\"[sfx-header]\"></ng-content>\n </div>\n </div>\n</section>\n\n<section class=\"sfx-column-wrap\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <ng-content select=\"[sfx-left-column]\"></ng-content>\n </div>\n <div\n id=\"review\"\n class=\"col-xs-12 col-sm-12 col-md-4 col-lg-4 pull-right sticky-top sfx-mr-20\"\n >\n <ng-content select=\"[sfx-right-column]\"></ng-content>\n </div>\n </div>\n</section>\n", styles: [".sfx-column-wrap{margin-top:50px}.sticky-top{position:sticky;top:50px;z-index:1020}@media (max-width: 767px){.sfx-header-mobile.sfx-pb-10{padding-bottom:25px}.sfx-back-section.sfx-mb-30{margin-bottom:10px}.sfx-column-wrap{margin-top:40px}.sticky-top{position:relative;top:auto}.sticky-top.sfx-mr-20{margin-right:0}}\n"] }]
|
|
6207
|
+
args: [{ selector: 'symphony-feedback-detail-template', template: "<section class=\"sfx-border-bottom-gray-1 sfx-pb-10 sfx-mt-10 sfx-header-mobile\">\n <div class=\"row\">\n <div\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-back-section\"\n >\n <ng-content select=\"[sfx-back-button]\"></ng-content>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n <ng-content select=\"[sfx-header]\"></ng-content>\n </div>\n </div>\n</section>\n\n<section class=\"sfx-column-wrap\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <ng-content select=\"[sfx-left-column]\"></ng-content>\n </div>\n <div\n id=\"review\"\n class=\"col-xs-12 col-sm-12 col-md-4 col-lg-4 pull-right sticky-top sfx-mr-20\"\n >\n <ng-content select=\"[sfx-right-column]\"></ng-content>\n </div>\n </div>\n</section>\n", styles: [".sfx-column-wrap{margin-top:50px}.sticky-top{position:-webkit-sticky;position:sticky;top:50px;z-index:1020}@media (max-width: 767px){.sfx-header-mobile.sfx-pb-10{padding-bottom:25px}.sfx-back-section.sfx-mb-30{margin-bottom:10px}.sfx-column-wrap{margin-top:40px}.sticky-top{position:relative;top:auto}.sticky-top.sfx-mr-20{margin-right:0}}\n"] }]
|
|
6205
6208
|
}], ctorParameters: function () { return []; } });
|
|
6206
6209
|
|
|
6207
6210
|
class FeedbackDetailInterestFormComponent {
|
|
@@ -6221,10 +6224,10 @@ class FeedbackDetailInterestFormComponent {
|
|
|
6221
6224
|
}
|
|
6222
6225
|
}
|
|
6223
6226
|
FeedbackDetailInterestFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6224
|
-
FeedbackDetailInterestFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: { model: "model" }, outputs: { cancel: "cancel", save: "save" }, ngImport: i0, template: "<ng-container *ngIf=\"model\">\n <symphony-h4\n class=\"sfx-mb-25 sfx-d-block\"\n [text]=\"'Interested in this contact?'\"\n ></symphony-h4>\n\n <div class=\"form-group sfx-d-flex sfx-mb-30\">\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n [icon]=\"'si-feedback-yes'\"\n (clicked)=\"onInterestedButtonClick('Yes')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n [icon]=\"'si-feedback-no'\"\n (clicked)=\"onInterestedButtonClick('No')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n [icon]=\"'si-feedback-maybe'\"\n (clicked)=\"onInterestedButtonClick('Not Now')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n </div>\n </div>\n\n <div class=\"form-group\">\n <symphony-input-dropdown\n *ngIf=\"model.showReasonDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.reasonDropdown\"\n ></symphony-input-dropdown>\n\n <symphony-input-dropdown\n *ngIf=\"model.showRecommendationDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.recommendationDropdown\"\n ></symphony-input-dropdown>\n\n <label for=\"comments\" class=\"form-label\">Comments</label>\n
|
|
6227
|
+
FeedbackDetailInterestFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FeedbackDetailInterestFormComponent, selector: "symphony-feedback-detail-interest-form", inputs: { model: "model" }, outputs: { cancel: "cancel", save: "save" }, ngImport: i0, template: "<ng-container *ngIf=\"model\">\n <symphony-h4\n class=\"sfx-mb-25 sfx-d-block\"\n [text]=\"'Interested in this contact?'\"\n ></symphony-h4>\n\n <div class=\"form-group sfx-d-flex sfx-mb-30\">\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n [icon]=\"'si-feedback-yes'\"\n (clicked)=\"onInterestedButtonClick('Yes')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n [icon]=\"'si-feedback-no'\"\n (clicked)=\"onInterestedButtonClick('No')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n [icon]=\"'si-feedback-maybe'\"\n (clicked)=\"onInterestedButtonClick('Not Now')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n </div>\n </div>\n\n <div class=\"form-group\">\n <symphony-input-dropdown\n *ngIf=\"model.showReasonDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.reasonDropdown\"\n ></symphony-input-dropdown>\n\n <symphony-input-dropdown\n *ngIf=\"model.showRecommendationDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.recommendationDropdown\"\n ></symphony-input-dropdown>\n\n <ng-container *ngIf=\"model.showCommentTextarea\">\n <label for=\"comments\" class=\"form-label\">Comments</label>\n <textarea\n [(ngModel)]=\"model.comments\"\n class=\"form-control sfx-mb-5\"\n id=\"comments\"\n rows=\"4\"\n >{{ model.comments }}</textarea\n >\n </ng-container>\n </div>\n\n <div class=\"form-group pull-right sfx-mt-40\">\n <symphony-button\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n (clicked)=\"onCancelClick()\"\n ></symphony-button>\n <symphony-button\n class=\"sfx-ml-20 save\"\n [text]=\"'Save'\"\n [disabled]=\"model.isSaveDisabled || !model.status\"\n (clicked)=\"onSaveClick()\"\n ></symphony-button>\n </div>\n</ng-container>\n", styles: ["body .sfx .sfx-dropdown-label,body .sfx .sfx-dropdown button#moreDrop.dropdown-toggle.btn{margin-left:0;margin-right:0;width:100%}body .sfx .form-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\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: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
6225
6228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FeedbackDetailInterestFormComponent, decorators: [{
|
|
6226
6229
|
type: Component,
|
|
6227
|
-
args: [{ selector: 'symphony-feedback-detail-interest-form', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"model\">\n <symphony-h4\n class=\"sfx-mb-25 sfx-d-block\"\n [text]=\"'Interested in this contact?'\"\n ></symphony-h4>\n\n <div class=\"form-group sfx-d-flex sfx-mb-30\">\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n [icon]=\"'si-feedback-yes'\"\n (clicked)=\"onInterestedButtonClick('Yes')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n [icon]=\"'si-feedback-no'\"\n (clicked)=\"onInterestedButtonClick('No')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n [icon]=\"'si-feedback-maybe'\"\n (clicked)=\"onInterestedButtonClick('Not Now')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n </div>\n </div>\n\n <div class=\"form-group\">\n <symphony-input-dropdown\n *ngIf=\"model.showReasonDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.reasonDropdown\"\n ></symphony-input-dropdown>\n\n <symphony-input-dropdown\n *ngIf=\"model.showRecommendationDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.recommendationDropdown\"\n ></symphony-input-dropdown>\n\n <label for=\"comments\" class=\"form-label\">Comments</label>\n
|
|
6230
|
+
args: [{ selector: 'symphony-feedback-detail-interest-form', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"model\">\n <symphony-h4\n class=\"sfx-mb-25 sfx-d-block\"\n [text]=\"'Interested in this contact?'\"\n ></symphony-h4>\n\n <div class=\"form-group sfx-d-flex sfx-mb-30\">\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-green': model.status === 'Yes' }\"\n [icon]=\"'si-feedback-yes'\"\n (clicked)=\"onInterestedButtonClick('Yes')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Yes'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-red': model.status === 'No' }\"\n [icon]=\"'si-feedback-no'\"\n (clicked)=\"onInterestedButtonClick('No')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'No'\"></symphony-paragraph>\n </div>\n <div class=\"sfx-d-flex sfx-mr-50\">\n <symphony-icon\n class=\"sfx-mr-10 color-light-gray2\"\n [ngClass]=\"{ 'color-orange': model.status === 'Not Now' }\"\n [icon]=\"'si-feedback-maybe'\"\n (clicked)=\"onInterestedButtonClick('Not Now')\"\n ></symphony-icon>\n <symphony-paragraph [text]=\"'Not Now'\"></symphony-paragraph>\n </div>\n </div>\n\n <div class=\"form-group\">\n <symphony-input-dropdown\n *ngIf=\"model.showReasonDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.reasonDropdown\"\n ></symphony-input-dropdown>\n\n <symphony-input-dropdown\n *ngIf=\"model.showRecommendationDropdown\"\n class=\"sfx-d-block sfx-mb-15\"\n [inputDropdownListModel]=\"model.recommendationDropdown\"\n ></symphony-input-dropdown>\n\n <ng-container *ngIf=\"model.showCommentTextarea\">\n <label for=\"comments\" class=\"form-label\">Comments</label>\n <textarea\n [(ngModel)]=\"model.comments\"\n class=\"form-control sfx-mb-5\"\n id=\"comments\"\n rows=\"4\"\n >{{ model.comments }}</textarea\n >\n </ng-container>\n </div>\n\n <div class=\"form-group pull-right sfx-mt-40\">\n <symphony-button\n [text]=\"'Cancel'\"\n [isSecondary]=\"true\"\n (clicked)=\"onCancelClick()\"\n ></symphony-button>\n <symphony-button\n class=\"sfx-ml-20 save\"\n [text]=\"'Save'\"\n [disabled]=\"model.isSaveDisabled || !model.status\"\n (clicked)=\"onSaveClick()\"\n ></symphony-button>\n </div>\n</ng-container>\n", styles: ["body .sfx .sfx-dropdown-label,body .sfx .sfx-dropdown button#moreDrop.dropdown-toggle.btn{margin-left:0;margin-right:0;width:100%}body .sfx .form-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem}body .sfx textarea{box-shadow:none}body .sfx .form-group p.body-copy-primary{margin-top:4px}.sfx-mr-50{margin-right:3.125rem}.color-light-gray2{color:#d9d9d9}.color-green{color:#00d56b}.color-red{color:#f0001e}.color-orange{color:#ffa700}textarea#comments{min-height:100px;resize:vertical}@media (max-width: 767px){.form-group .sfx-mr-50{margin-right:30px}.form-group.pull-right{float:none!important}}@media (max-width: 320px){.form-group .save{margin-left:15px}.form-group button.btn{min-width:auto}}\n"] }]
|
|
6228
6231
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
6229
6232
|
type: Input
|
|
6230
6233
|
}], cancel: [{
|