@symphony-talent/component-library 4.227.0 → 4.229.0

package/esm2020/projects/component-library/lib/pages/modals/advertise-modal/advertise-modal.component.mjs

@@ -211,7 +211,7 @@ export class AdvertiseModalComponent {
     }
 }
 AdvertiseModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
-AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: i2.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: i6.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i7.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i8.AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: i9.OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: i10.PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: i11.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i12.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i13.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: i14.ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AdvertiseModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdvertiseModalComponent, selector: "symphony-advertise-modal", inputs: { model: "model" }, outputs: { buttonClicked: "buttonClicked", closeButtonClicked: "closeButtonClicked", postingBoardChange: "postingBoardChange", keywordSearchChange: "keywordSearchChange" }, usesOnChanges: true, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"], components: [{ type: i2.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i3.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.H5WithIconComponent, selector: "symphony-h5-with-icon", inputs: ["model"] }, { type: i6.TwoColumnBodyTemplateComponent, selector: "symphony-two-column-body-template", inputs: ["showHeader"] }, { type: i7.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i8.AdvertisePostingboardSelectionListComponent, selector: "symphony-advertise-postingboard-selection-list", inputs: ["model"], outputs: ["postingBoardChange"] }, { type: i9.OrderSummaryComponent, selector: "symphony-order-summary", inputs: ["model"] }, { type: i10.PhaserCardComponent, selector: "symphony-phaser-card", inputs: ["model", "isClickable", "hasHover"], outputs: ["cardClicked", "cardHover"] }, { type: i11.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i12.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i13.ButtonComponent, selector: "symphony-button", inputs: ["text", "disabled", "isSecondary", "isInverse"], outputs: ["clicked"] }, { type: i14.ConfirmationModalComponent, selector: "symphony-confirmation-modal", inputs: ["model"], outputs: ["buttonClicked", "closeButtonClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdvertiseModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-advertise-modal', encapsulation: ViewEncapsulation.None, template: "<symphony-two-column-modal-template *ngIf=\"!model.navigation.showCancel\">\n  <symphony-h4\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-modal-title\n    >Select Your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showOrderReview\" sfx-modal-title\n    >Review you Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showConfirmation\" sfx-modal-title\n    >Confirmation of your Job Ad Buys</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.navigation.showProcessing\" sfx-modal-title\n    >Processing Order...</symphony-h4\n  >\n  <symphony-h4 *ngIf=\"model.isLoading\" sfx-modal-title\n    >Loading Job Boards...</symphony-h4\n  >\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-h5-with-icon sfx-modal-subtitle [model]=\"subTitle\">\n  </symphony-h5-with-icon>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showJobBoardsSelection\"\n    [showHeader]=\"true\"\n    sfx-modal-body-area\n  >\n    <symphony-input-text\n      sfx-left-col-header\n      [placeholder]=\"'Search Ad Boards'\"\n      [icon]=\"'si-search-new'\"\n      (textChange)=\"onKeywordSearch($event)\"\n    >\n    </symphony-input-text>\n    <div class=\"right-col-header-inner\" sfx-right-col-header>\n      <symphony-h5-with-icon\n        sfx-right-col-header\n        *ngIf=\"model.showFunds\"\n        class=\"pull-right\"\n        [model]=\"fundsInfo\"\n      ></symphony-h5-with-icon>\n    </div>\n    <div sfx-left-column class=\"posting-boards sfx-pr-10\">\n      <symphony-advertise-postingboard-selection-list\n        [model]=\"model.jobBoards\"\n        (postingBoardChange)=\"onPostingBoardChange($event)\"\n      ></symphony-advertise-postingboard-selection-list>\n    </div>\n\n    <symphony-order-summary\n      sfx-right-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showOrderReview\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card [model]=\"phaserCardReview\"></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <symphony-two-column-body-template\n    *ngIf=\"!model.isLoading && model.navigation.showConfirmation\"\n    sfx-modal-body-area\n    class=\"height-wrapper\"\n  >\n    <symphony-order-summary\n      sfx-left-column\n      [model]=\"orderSummary\"\n    ></symphony-order-summary>\n    <div\n      sfx-right-column\n      class=\"posting-boards phaser center-h-v light-grey-bg\"\n    >\n      <symphony-phaser-card\n        [model]=\"phaserCardConfirmation\"\n      ></symphony-phaser-card>\n    </div>\n  </symphony-two-column-body-template>\n\n  <div\n    *ngIf=\"!model.isLoading && model.navigation.showProcessing\"\n    sfx-modal-body-area\n    class=\"posting-boards sfx-p-30\"\n  >\n    <div class=\"processing-container\">\n      <symphony-paragraph\n        ><b>SmashFlyX</b> is submitting your order to your selected job boards.\n        Some orders happen immediately, while others take a little more time.\n        Check your order status if you don't recieve a confirmation in the next\n        24hours.</symphony-paragraph\n      >\n    </div>\n    <div class=\"sfx-mt-80\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n\n  <div class=\"loader-container\" *ngIf=\"model.isLoading\" sfx-modal-body-area>\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </div>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showJobBoardsSelection && !model.isLoading\"\n    sfx-button-primary\n    [text]=\"'Review Order'\"\n    [disabled]=\"isJobBoardNextButtonDisabled\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-back\n    [text]=\"'Edit Order'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-secondary\n    [text]=\"'Cancel'\"\n    [isSecondary]=\"true\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n  <symphony-button\n    *ngIf=\"model.navigation.showOrderReview\"\n    sfx-button-primary\n    [text]=\"'Buy'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n\n  <symphony-button\n    *ngIf=\"model.navigation.showConfirmation\"\n    sfx-button-primary\n    [text]=\"'Finish & Close'\"\n    [disabled]=\"false\"\n    [isInverse]=\"true\"\n    (clicked)=\"onButtonClick($event)\"\n  ></symphony-button>\n</symphony-two-column-modal-template>\n<symphony-confirmation-modal\n  *ngIf=\"!model.isLoading && model.navigation.showCancel\"\n  (buttonClicked)=\"onButtonClick($event)\"\n  (closeButtonClicked)=\"onCloseButtonClick()\"\n  [model]=\"cancelContent\"\n>\n</symphony-confirmation-modal>\n", styles: [".right-col-header-inner{padding-top:10px}.posting-boards{height:400px;overflow-x:auto}.posting-boards.phaser{overflow:hidden;padding:40px 80px;min-height:480px}.height-wrapper .order-summary,.height-wrapper .sfx-price-totals{padding:0}.height-wrapper .sfx-checkbox-list{min-height:480px}.light-grey-bg{background:#ebebeb}.center-h-v{display:flex;align-items:center;justify-content:center}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.loader-container{padding-top:246px;padding-bottom:245px}.complete-container{text-align:center;margin-top:25%}.success-icon-spacing{margin-top:25px}.processing-container{width:400px;text-align:justify}.stage{display:flex;height:240px;width:100%}.box{align-self:flex-end;animation-duration:2s;animation-iteration-count:1;height:200px;margin:0 auto;transform-origin:bottom;width:200px}.bounce-7{animation-name:bounce-7;animation-timing-function:cubic-bezier(.24,.82,.24,.82)}@keyframes bounce-7{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0)}30%{transform:scale(.9,1.1) translateY(-15px)}50%{transform:scale(1.05,.95) translateY(0)}57%{transform:scale(1) translateY(-7px)}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}\n"] }]

package/esm2020/projects/component-library/lib/pages/modals/assign-to-user-modal/assign-to-user-modal.component.mjs

@@ -21,7 +21,7 @@ export class AssignToUserModalComponent {
     }
 }
 AssignToUserModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignToUserModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssignToUserModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignToUserModalComponent, selector: "symphony-assign-to-user-modal", inputs: { pageModel: "pageModel" }, outputs: { buttonClicked: "buttonClicked", reloadClicked: "reloadClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AssignToUserModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AssignToUserModalComponent, selector: "symphony-assign-to-user-modal", inputs: { pageModel: "pageModel" }, outputs: { buttonClicked: "buttonClicked", reloadClicked: "reloadClicked", closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AssignToUserModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-assign-to-user-modal', template: "<symphony-two-column-modal-template *ngIf=\"pageModel\">\n    <symphony-h4 sfx-modal-title>{{pageModel.modelTitle}}</symphony-h4>\n    <symphony-paragraph sfx-modal-subtitle\n        >{{pageModel.modelSubTitle}}</symphony-paragraph\n    >\n    <symphony-icon\n        sfx-close-button\n        [icon]=\"'si-close-modal'\"\n        (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <section class=\"row sfx-p-30\"  *ngIf=\"!pageModel.isLoading && !pageModel.confirmationFlag\" sfx-modal-body-area>\n        <symphony-paragraph class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-20\">{{pageModel.modelDescription}}</symphony-paragraph>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n            <ng-content select=\"[dropdown-dropzone-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n              <ng-content select=\"[dropdown-dropzone-2]\"></ng-content>\n        </div>\n        \n    </section>  \n    <section *ngIf=\"pageModel.confirmationFlag && !pageModel.isLoading \" class=\"sfx-pt-40 sfx-pb-40 sfx-pl-30 sfx-pr-30\"  sfx-modal-body-area>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine1}}</symphony-paragraph>\n        <symphony-paragraph\n        >{{pageModel.confirmationTextLine2}}</symphony-paragraph>\n    </section>  \n    <section *ngIf=\"pageModel.isLoading\" class=\"sfx-pt-40 sfx-pb-40\"  sfx-modal-body-area>\n        <symphony-sfx-loader \n        >\n        </symphony-sfx-loader>\n    </section> \n    <symphony-button-v2\n      sfx-button-secondary\n      id=\"button-modal-cancel\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.cancelButtonText\"\n      [isSecondary]=\"true\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n    <symphony-button-v2\n      sfx-button-primary\n      id=\"button-modal-assign\"\n      class=\"pull-right sfx-d-flex\"\n      [text]=\"pageModel.confirmationButtonText\"\n      [disabled]=\"pageModel.assignBtnDisabled\"\n      (clicked)=\"onButtonClick($event)\"\n    ></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [""] }]

package/esm2020/projects/component-library/lib/pages/modals/calendar-availability-modal/calendar-availability-modal.component.mjs

@@ -16,7 +16,7 @@ export class CalendarAvailabilityModalComponent {
     }
 }
 CalendarAvailabilityModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CalendarAvailabilityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarAvailabilityModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CalendarAvailabilityModalComponent, selector: "symphony-calendar-availability-modal", inputs: { calendarAvailabilityModel: "calendarAvailabilityModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CalendarAvailabilityModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CalendarAvailabilityModalComponent, selector: "symphony-calendar-availability-modal", inputs: { calendarAvailabilityModel: "calendarAvailabilityModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CalendarAvailabilityModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-calendar-availability-modal', template: "<symphony-two-column-modal-template\n  *ngIf=\"calendarAvailabilityModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    calendarAvailabilityModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>\n    {{ calendarAvailabilityModel.modalSubtitle }}\n    <span class=\"calendar-name\">{{ calendarAvailabilityModel.calendarName }}</span>\n  </symphony-paragraph>\n\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && !calendarAvailabilityModel.errorText\"\n    class=\"sfx-p-30\"\n    sfx-modal-body-area\n  >\n    <ng-content select=\"[calendar-availability-body]\"></ng-content>\n  </section>\n  <section\n    *ngIf=\"calendarAvailabilityModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader></symphony-sfx-loader>\n  </section>\n  <section\n    *ngIf=\"!calendarAvailabilityModel.isLoading && calendarAvailabilityModel.errorText\"\n    class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\"\n    sfx-modal-body-area\n  >\n    <symphony-paragraph>{{ calendarAvailabilityModel.errorText }}</symphony-paragraph>\n  </section>\n\n  <symphony-button-v2\n    sfx-button-primary\n    id=\"button-modal-close\"\n    class=\"pull-right sfx-d-flex\"\n    text=\"Close\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-button-v2>\n</symphony-two-column-modal-template>\n", styles: [""] }]

package/esm2020/projects/component-library/lib/pages/modals/chatbot-history-modal/chatbot-history-modal.component.mjs

@@ -16,7 +16,7 @@ export class ChatbotHistoryModalComponent {
     }
 }
 ChatbotHistoryModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ChatbotHistoryModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatbotHistoryModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChatbotHistoryModalComponent, selector: "symphony-chatbot-history-modal", inputs: { chatbotHistoryModel: "chatbotHistoryModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"chatbotHistoryModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    chatbotHistoryModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>{{\n    chatbotHistoryModel.modalSubtitle\n  }}</symphony-paragraph>\n  <section\n    *ngIf=\"!chatbotHistoryModel.isLoading\"\n    class=\"sfx-p-30 chatModal-body\"\n    sfx-modal-body-area\n  >\n    <symphony-chat-history-message-list\n      *ngIf=\"!chatbotHistoryModel.errorText\"\n      [messageItemsList]=\"chatbotHistoryModel.messageItemsList\"\n    ></symphony-chat-history-message-list>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"chatbotHistoryModel.errorText\">\n      <symphony-paragraph>{{\n        chatbotHistoryModel.errorText\n      }}</symphony-paragraph>\n    </section>\n  </section>\n  <section\n    *ngIf=\"chatbotHistoryModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader> </symphony-sfx-loader>\n  </section>\n</symphony-two-column-modal-template>\n", styles: [".chatModal-body{max-height:470px;overflow-y:auto}.chatModal-body::-webkit-scrollbar{width:12px}.chatModal-body::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb:hover{cursor:pointer}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i5.ChatHistoryMessageListComponent, selector: "symphony-chat-history-message-list", inputs: ["messageItemsList"] }, { type: i6.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ChatbotHistoryModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ChatbotHistoryModalComponent, selector: "symphony-chatbot-history-modal", inputs: { chatbotHistoryModel: "chatbotHistoryModel" }, outputs: { closeButtonClicked: "closeButtonClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template\n  *ngIf=\"chatbotHistoryModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    chatbotHistoryModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>{{\n    chatbotHistoryModel.modalSubtitle\n  }}</symphony-paragraph>\n  <section\n    *ngIf=\"!chatbotHistoryModel.isLoading\"\n    class=\"sfx-p-30 chatModal-body\"\n    sfx-modal-body-area\n  >\n    <symphony-chat-history-message-list\n      *ngIf=\"!chatbotHistoryModel.errorText\"\n      [messageItemsList]=\"chatbotHistoryModel.messageItemsList\"\n    ></symphony-chat-history-message-list>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"chatbotHistoryModel.errorText\">\n      <symphony-paragraph>{{\n        chatbotHistoryModel.errorText\n      }}</symphony-paragraph>\n    </section>\n  </section>\n  <section\n    *ngIf=\"chatbotHistoryModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader> </symphony-sfx-loader>\n  </section>\n</symphony-two-column-modal-template>\n", styles: [".chatModal-body{max-height:470px;overflow-y:auto}.chatModal-body::-webkit-scrollbar{width:12px}.chatModal-body::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb:hover{cursor:pointer}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i5.ChatHistoryMessageListComponent, selector: "symphony-chat-history-message-list", inputs: ["messageItemsList"] }, { type: i6.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ChatbotHistoryModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-chatbot-history-modal', template: "<symphony-two-column-modal-template\n  *ngIf=\"chatbotHistoryModel\"\n  [hideSubtitle]=\"false\"\n>\n  <symphony-h4 sfx-modal-title>{{\n    chatbotHistoryModel.modalTitle\n  }}</symphony-h4>\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (clicked)=\"onCloseButtonClick()\"\n  ></symphony-icon>\n  <symphony-paragraph sfx-modal-subtitle>{{\n    chatbotHistoryModel.modalSubtitle\n  }}</symphony-paragraph>\n  <section\n    *ngIf=\"!chatbotHistoryModel.isLoading\"\n    class=\"sfx-p-30 chatModal-body\"\n    sfx-modal-body-area\n  >\n    <symphony-chat-history-message-list\n      *ngIf=\"!chatbotHistoryModel.errorText\"\n      [messageItemsList]=\"chatbotHistoryModel.messageItemsList\"\n    ></symphony-chat-history-message-list>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"chatbotHistoryModel.errorText\">\n      <symphony-paragraph>{{\n        chatbotHistoryModel.errorText\n      }}</symphony-paragraph>\n    </section>\n  </section>\n  <section\n    *ngIf=\"chatbotHistoryModel.isLoading\"\n    class=\"sfx-pt-40 sfx-pb-40\"\n    sfx-modal-body-area\n  >\n    <symphony-sfx-loader> </symphony-sfx-loader>\n  </section>\n</symphony-two-column-modal-template>\n", styles: [".chatModal-body{max-height:470px;overflow-y:auto}.chatModal-body::-webkit-scrollbar{width:12px}.chatModal-body::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.chatModal-body::-webkit-scrollbar-thumb:hover{cursor:pointer}\n"] }]

package/esm2020/projects/component-library/lib/pages/modals/linkedin-premium-job-postings-modal/linkedin-premium-job-postings-modal.component.mjs

@@ -18,7 +18,7 @@ export class LinkedinPremiumJobPostingsModalComponent {
     }
 }
 LinkedinPremiumJobPostingsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LinkedinPremiumJobPostingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LinkedinPremiumJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LinkedinPremiumJobPostingsModalComponent, selector: "symphony-linkedin-premium-job-postings-modal", inputs: { isLoading: "isLoading", title: "title", subtitle: "subtitle", subtitleLink: "subtitleLink" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>{{ title }}</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle>\n    <a *ngIf=\"subtitleLink; else plainSubtitle\"\n     sfx-modal-subtitle\n     [href]=\"subtitleLink\"\n     target=\"_blank\">\n    {{ subtitle }}\n  </a>\n    <ng-template #plainSubtitle>{{ subtitle }}</ng-template>\n  </symphony-paragraph>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+LinkedinPremiumJobPostingsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LinkedinPremiumJobPostingsModalComponent, selector: "symphony-linkedin-premium-job-postings-modal", inputs: { isLoading: "isLoading", title: "title", subtitle: "subtitle", subtitleLink: "subtitleLink" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>{{ title }}</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle>\n    <a *ngIf=\"subtitleLink; else plainSubtitle\"\n     sfx-modal-subtitle\n     [href]=\"subtitleLink\"\n     target=\"_blank\">\n    {{ subtitle }}\n  </a>\n    <ng-template #plainSubtitle>{{ subtitle }}</ng-template>\n  </symphony-paragraph>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i5.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LinkedinPremiumJobPostingsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-linkedin-premium-job-postings-modal', template: "<symphony-two-column-modal-template [hideFooter]=\"true\" [hideSubtitle]=\"false\">\n  <symphony-h4 sfx-modal-title>{{ title }}</symphony-h4>\n  <symphony-paragraph sfx-modal-subtitle>\n    <a *ngIf=\"subtitleLink; else plainSubtitle\"\n     sfx-modal-subtitle\n     [href]=\"subtitleLink\"\n     target=\"_blank\">\n    {{ subtitle }}\n  </a>\n    <ng-template #plainSubtitle>{{ subtitle }}</ng-template>\n  </symphony-paragraph>\n\n  <symphony-icon\n    sfx-close-button\n    [icon]=\"'si-close-modal'\"\n    (click)=\"onCloseClick()\"\n  ></symphony-icon>\n  <div class=\"loader-container\" *ngIf=\"isLoading\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </div>\n  <ng-content\n    ngProjectAs=\"[sfx-modal-body-area]\"\n    select=\"[sfx-modal-body-area]\"\n  ></ng-content>\n</symphony-two-column-modal-template>\n", styles: [".loader-container{padding:20px;height:400px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"] }]

package/esm2020/projects/component-library/lib/pages/modals/notification-modal/notification-modal.component.mjs

@@ -26,7 +26,7 @@ export class NotificationModalComponent {
     }
 }
 NotificationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationModalComponent, selector: "symphony-notification-modal", inputs: { model: "model" }, outputs: { closeButtonClicked: "closeButtonClicked", primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal notification-modal\">\n  <section class=\"modal-body notification-modal__body sfx-p-30\">\n    <symphony-icon\n      class=\"notification-modal__close-button\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <div *ngIf=\"model?.icon && model.icon !== ''\" class=\"notification-modal__icon\">\n      <symphony-icon\n        [icon]=\"model.icon\"\n        [size]=\"model?.iconSize || '60px'\"\n        [iconColor]=\"model?.iconColor || '#16b783'\"\n      ></symphony-icon>\n    </div>\n\n    <symphony-h3\n      *ngIf=\"model?.heading\"\n      class=\"notification-modal__heading\"\n      [text]=\"model.heading\"\n    ></symphony-h3>\n\n    <symphony-paragraph *ngIf=\"model?.bodyText\" class=\"notification-modal__message\">\n      <span *ngIf=\"model?.candidateCount !== undefined\" class=\"notification-modal__count\">\n        {{ model.candidateCount }}\n      </span>\n      <span>\n        {{ model.bodyText }}\n      </span>\n    </symphony-paragraph>\n\n    <section\n      *ngIf=\"model?.summaryTitle || model?.summaryItems?.length || hasCandidateCards\"\n      class=\"notification-modal__summary\"\n    >\n      <symphony-paragraph *ngIf=\"model?.summaryTitle\" class=\"notification-modal__summary-title\">\n        {{ model.summaryTitle }}\n        <span\n          *ngIf=\"model?.candidateCount !== undefined\"\n          class=\"notification-modal__count notification-modal__count--summary\"\n        >\n          ({{ model.candidateCount }})\n        </span>\n      </symphony-paragraph>\n\n      <div *ngIf=\"hasCandidateCards\" class=\"notification-modal__candidate-cards\">\n        <symphony-candidate-card\n          *ngFor=\"let candidateCard of model?.candidateCards\"\n          [model]=\"candidateCard\"\n        ></symphony-candidate-card>\n      </div>\n\n      <ng-container *ngIf=\"!hasCandidateCards\">\n        <div *ngFor=\"let item of model?.summaryItems\" class=\"notification-modal__summary-row\">\n          <symphony-paragraph class=\"notification-modal__summary-label\">{{ item.label }}</symphony-paragraph>\n          <symphony-paragraph class=\"notification-modal__summary-value\">{{ item.value }}</symphony-paragraph>\n        </div>\n      </ng-container>\n\n      <ng-content select=\"[notification-modal-body]\"></ng-content>\n    </section>\n\n    <div\n      *ngIf=\"model?.secondaryButtonText || model?.primaryButtonText\"\n      class=\"notification-modal__actions\"\n    >\n      <symphony-button-v2\n        *ngIf=\"model?.secondaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--secondary\"\n        [text]=\"model.secondaryButtonText\"\n        [disabled]=\"model.secondaryButtonDisabled\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></symphony-button-v2>\n\n      <symphony-button-v2\n        *ngIf=\"model?.primaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--primary\"\n        [text]=\"model.primaryButtonText\"\n        [disabled]=\"model.primaryButtonDisabled\"\n        (clicked)=\"onPrimaryButtonClick($event)\"\n      ></symphony-button-v2>\n    </div>\n  </section>\n</div>\n", styles: [".notification-modal__body{padding:40px 30px;position:relative;text-align:center}.notification-modal__close-button{position:absolute;right:30px;top:30px;cursor:pointer}.notification-modal__icon{display:inline-flex;margin-bottom:10px}.notification-modal__heading{display:block;margin-bottom:10px}.notification-modal__message{display:block;margin-bottom:20px}.notification-modal__message p.body-copy-primary,.notification-modal__message p.body-copy-secondary{color:#5b6d80;font-size:16px}.notification-modal__summary{background:#f9fafb;border:1px solid #dce2ea;border-radius:10px;margin-bottom:30px;padding:30px 20px 25px;text-align:left}.notification-modal__summary-title{display:block;margin-bottom:15px}.notification-modal__summary-title p.body-copy-primary,.notification-modal__summary-title p.body-copy-secondary{font-size:18px}.notification-modal__candidate-cards{display:flex;flex-direction:column;gap:15px}.notification-modal__summary-row{display:grid;grid-gap:5px;gap:5px;grid-template-columns:150px repeat(1,minmax(220px,1fr));padding:5px 0}.notification-modal__summary-label p.body-copy-primary,.notification-modal__summary-label p.body-copy-secondary{color:#6a768a}.notification-modal__actions{display:flex;gap:15px;justify-content:center}.notification-modal__button{flex:1 1 0}.notification-modal__button button{min-width:0;width:100%}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.CandidateCardComponent, selector: "symphony-candidate-card", inputs: ["model"] }, { type: i5.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+NotificationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationModalComponent, selector: "symphony-notification-modal", inputs: { model: "model" }, outputs: { closeButtonClicked: "closeButtonClicked", primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked" }, ngImport: i0, template: "<div class=\"sfx sfx-modal notification-modal\">\n  <section class=\"modal-body notification-modal__body sfx-p-30\">\n    <symphony-icon\n      class=\"notification-modal__close-button\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <div *ngIf=\"model?.icon && model.icon !== ''\" class=\"notification-modal__icon\">\n      <symphony-icon\n        [icon]=\"model.icon\"\n        [size]=\"model?.iconSize || '60px'\"\n        [iconColor]=\"model?.iconColor || '#16b783'\"\n      ></symphony-icon>\n    </div>\n\n    <symphony-h3\n      *ngIf=\"model?.heading\"\n      class=\"notification-modal__heading\"\n      [text]=\"model.heading\"\n    ></symphony-h3>\n\n    <symphony-paragraph *ngIf=\"model?.bodyText\" class=\"notification-modal__message\">\n      <span *ngIf=\"model?.candidateCount !== undefined\" class=\"notification-modal__count\">\n        {{ model.candidateCount }}\n      </span>\n      <span>\n        {{ model.bodyText }}\n      </span>\n    </symphony-paragraph>\n\n    <section\n      *ngIf=\"model?.summaryTitle || model?.summaryItems?.length || hasCandidateCards\"\n      class=\"notification-modal__summary\"\n    >\n      <symphony-paragraph *ngIf=\"model?.summaryTitle\" class=\"notification-modal__summary-title\">\n        {{ model.summaryTitle }}\n        <span\n          *ngIf=\"model?.candidateCount !== undefined\"\n          class=\"notification-modal__count notification-modal__count--summary\"\n        >\n          ({{ model.candidateCount }})\n        </span>\n      </symphony-paragraph>\n\n      <div *ngIf=\"hasCandidateCards\" class=\"notification-modal__candidate-cards\">\n        <symphony-candidate-card\n          *ngFor=\"let candidateCard of model?.candidateCards\"\n          [model]=\"candidateCard\"\n        ></symphony-candidate-card>\n      </div>\n\n      <ng-container *ngIf=\"!hasCandidateCards\">\n        <div *ngFor=\"let item of model?.summaryItems\" class=\"notification-modal__summary-row\">\n          <symphony-paragraph class=\"notification-modal__summary-label\">{{ item.label }}</symphony-paragraph>\n          <symphony-paragraph class=\"notification-modal__summary-value\">{{ item.value }}</symphony-paragraph>\n        </div>\n      </ng-container>\n\n      <ng-content select=\"[notification-modal-body]\"></ng-content>\n    </section>\n\n    <div\n      *ngIf=\"model?.secondaryButtonText || model?.primaryButtonText\"\n      class=\"notification-modal__actions\"\n    >\n      <symphony-button-v2\n        *ngIf=\"model?.secondaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--secondary\"\n        [text]=\"model.secondaryButtonText\"\n        [disabled]=\"model.secondaryButtonDisabled\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></symphony-button-v2>\n\n      <symphony-button-v2\n        *ngIf=\"model?.primaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--primary\"\n        [text]=\"model.primaryButtonText\"\n        [disabled]=\"model.primaryButtonDisabled\"\n        (clicked)=\"onPrimaryButtonClick($event)\"\n      ></symphony-button-v2>\n    </div>\n  </section>\n</div>\n", styles: [".notification-modal__body{padding:40px 30px;position:relative;text-align:center}.notification-modal__close-button{position:absolute;right:30px;top:30px;cursor:pointer}.notification-modal__icon{display:inline-flex;margin-bottom:10px}.notification-modal__heading{display:block;margin-bottom:10px}.notification-modal__message{display:block;margin-bottom:20px}.notification-modal__message p.body-copy-primary,.notification-modal__message p.body-copy-secondary{color:#5b6d80;font-size:16px}.notification-modal__summary{background:#f9fafb;border:1px solid #dce2ea;border-radius:10px;margin-bottom:30px;padding:30px 20px 25px;text-align:left}.notification-modal__summary-title{display:block;margin-bottom:15px}.notification-modal__summary-title p.body-copy-primary,.notification-modal__summary-title p.body-copy-secondary{font-size:18px}.notification-modal__candidate-cards{display:flex;flex-direction:column;gap:15px}.notification-modal__summary-row{display:grid;grid-gap:5px;gap:5px;grid-template-columns:150px repeat(1,minmax(220px,1fr));padding:5px 0}.notification-modal__summary-label p.body-copy-primary,.notification-modal__summary-label p.body-copy-secondary{color:#6a768a}.notification-modal__actions{display:flex;gap:15px;justify-content:center}.notification-modal__button{flex:1 1 0}.notification-modal__button button{min-width:0;width:100%}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.CandidateCardComponent, selector: "symphony-candidate-card", inputs: ["model"] }, { type: i5.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-notification-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx sfx-modal notification-modal\">\n  <section class=\"modal-body notification-modal__body sfx-p-30\">\n    <symphony-icon\n      class=\"notification-modal__close-button\"\n      [icon]=\"'si-close-modal'\"\n      (clicked)=\"onCloseButtonClick()\"\n    ></symphony-icon>\n\n    <div *ngIf=\"model?.icon && model.icon !== ''\" class=\"notification-modal__icon\">\n      <symphony-icon\n        [icon]=\"model.icon\"\n        [size]=\"model?.iconSize || '60px'\"\n        [iconColor]=\"model?.iconColor || '#16b783'\"\n      ></symphony-icon>\n    </div>\n\n    <symphony-h3\n      *ngIf=\"model?.heading\"\n      class=\"notification-modal__heading\"\n      [text]=\"model.heading\"\n    ></symphony-h3>\n\n    <symphony-paragraph *ngIf=\"model?.bodyText\" class=\"notification-modal__message\">\n      <span *ngIf=\"model?.candidateCount !== undefined\" class=\"notification-modal__count\">\n        {{ model.candidateCount }}\n      </span>\n      <span>\n        {{ model.bodyText }}\n      </span>\n    </symphony-paragraph>\n\n    <section\n      *ngIf=\"model?.summaryTitle || model?.summaryItems?.length || hasCandidateCards\"\n      class=\"notification-modal__summary\"\n    >\n      <symphony-paragraph *ngIf=\"model?.summaryTitle\" class=\"notification-modal__summary-title\">\n        {{ model.summaryTitle }}\n        <span\n          *ngIf=\"model?.candidateCount !== undefined\"\n          class=\"notification-modal__count notification-modal__count--summary\"\n        >\n          ({{ model.candidateCount }})\n        </span>\n      </symphony-paragraph>\n\n      <div *ngIf=\"hasCandidateCards\" class=\"notification-modal__candidate-cards\">\n        <symphony-candidate-card\n          *ngFor=\"let candidateCard of model?.candidateCards\"\n          [model]=\"candidateCard\"\n        ></symphony-candidate-card>\n      </div>\n\n      <ng-container *ngIf=\"!hasCandidateCards\">\n        <div *ngFor=\"let item of model?.summaryItems\" class=\"notification-modal__summary-row\">\n          <symphony-paragraph class=\"notification-modal__summary-label\">{{ item.label }}</symphony-paragraph>\n          <symphony-paragraph class=\"notification-modal__summary-value\">{{ item.value }}</symphony-paragraph>\n        </div>\n      </ng-container>\n\n      <ng-content select=\"[notification-modal-body]\"></ng-content>\n    </section>\n\n    <div\n      *ngIf=\"model?.secondaryButtonText || model?.primaryButtonText\"\n      class=\"notification-modal__actions\"\n    >\n      <symphony-button-v2\n        *ngIf=\"model?.secondaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--secondary\"\n        [text]=\"model.secondaryButtonText\"\n        [disabled]=\"model.secondaryButtonDisabled\"\n        [isSecondary]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></symphony-button-v2>\n\n      <symphony-button-v2\n        *ngIf=\"model?.primaryButtonText\"\n        class=\"notification-modal__button notification-modal__button--primary\"\n        [text]=\"model.primaryButtonText\"\n        [disabled]=\"model.primaryButtonDisabled\"\n        (clicked)=\"onPrimaryButtonClick($event)\"\n      ></symphony-button-v2>\n    </div>\n  </section>\n</div>\n", styles: [".notification-modal__body{padding:40px 30px;position:relative;text-align:center}.notification-modal__close-button{position:absolute;right:30px;top:30px;cursor:pointer}.notification-modal__icon{display:inline-flex;margin-bottom:10px}.notification-modal__heading{display:block;margin-bottom:10px}.notification-modal__message{display:block;margin-bottom:20px}.notification-modal__message p.body-copy-primary,.notification-modal__message p.body-copy-secondary{color:#5b6d80;font-size:16px}.notification-modal__summary{background:#f9fafb;border:1px solid #dce2ea;border-radius:10px;margin-bottom:30px;padding:30px 20px 25px;text-align:left}.notification-modal__summary-title{display:block;margin-bottom:15px}.notification-modal__summary-title p.body-copy-primary,.notification-modal__summary-title p.body-copy-secondary{font-size:18px}.notification-modal__candidate-cards{display:flex;flex-direction:column;gap:15px}.notification-modal__summary-row{display:grid;grid-gap:5px;gap:5px;grid-template-columns:150px repeat(1,minmax(220px,1fr));padding:5px 0}.notification-modal__summary-label p.body-copy-primary,.notification-modal__summary-label p.body-copy-secondary{color:#6a768a}.notification-modal__actions{display:flex;gap:15px;justify-content:center}.notification-modal__button{flex:1 1 0}.notification-modal__button button{min-width:0;width:100%}\n"] }]

package/esm2020/projects/component-library/lib/pages/modals/symphony-modal/symphony-modal.component.mjs

@@ -20,7 +20,7 @@ export class SymphonyModalComponent {
     }
 }
 SymphonyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SymphonyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SymphonyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SymphonyModalComponent, selector: "symphony-modal", inputs: { model: "model" }, outputs: { confirmClicked: "confirmClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{model.title}}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onCancel()\"></symphony-icon>\n\n  <section *ngIf=\"model.isLoading\" class=\"loader-container\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </section>\n  <section *ngIf=\"!model.isLoading\" sfx-modal-body-area>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"model.errorText\">\n      <symphony-paragraph>{{\n        model.errorText\n        }}</symphony-paragraph>\n    </section>\n\n    <ng-content *ngIf=\"!model.errorText\" ngProjectAs=\"[sfx-modal-body-area]\"\n      select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n\n  <symphony-button-v2 sfx-button-secondary id=\"button-modal-cancel\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.cancelButtonText\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n  <symphony-button-v2 sfx-button-primary id=\"button-modal-schedule\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.confirmButtonText\" [disabled]=\"model.confirmButtonDisabled\"\n    (clicked)=\"onConfirm()\"></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".loader-container{padding:20px;height:300px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SymphonyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SymphonyModalComponent, selector: "symphony-modal", inputs: { model: "model" }, outputs: { confirmClicked: "confirmClicked", cancelClicked: "cancelClicked" }, ngImport: i0, template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{model.title}}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onCancel()\"></symphony-icon>\n\n  <section *ngIf=\"model.isLoading\" class=\"loader-container\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </section>\n  <section *ngIf=\"!model.isLoading\" sfx-modal-body-area>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"model.errorText\">\n      <symphony-paragraph>{{\n        model.errorText\n        }}</symphony-paragraph>\n    </section>\n\n    <ng-content *ngIf=\"!model.errorText\" ngProjectAs=\"[sfx-modal-body-area]\"\n      select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n\n  <symphony-button-v2 sfx-button-secondary id=\"button-modal-cancel\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.cancelButtonText\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n  <symphony-button-v2 sfx-button-primary id=\"button-modal-schedule\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.confirmButtonText\" [disabled]=\"model.confirmButtonDisabled\"\n    (clicked)=\"onConfirm()\"></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".loader-container{padding:20px;height:300px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"], components: [{ type: i1.TwoColumnModalTemplateComponent, selector: "symphony-two-column-modal-template", inputs: ["hideFooter", "hideSubtitle"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i5.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i6.ButtonV2Component, selector: "symphony-button-v2" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SymphonyModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-modal', template: "<symphony-two-column-modal-template [hideSubtitle]=\"true\">\n  <symphony-h4 sfx-modal-title>{{model.title}}</symphony-h4>\n  <symphony-icon sfx-close-button [icon]=\"'si-close-modal'\" (clicked)=\"onCancel()\"></symphony-icon>\n\n  <section *ngIf=\"model.isLoading\" class=\"loader-container\" sfx-modal-body-area>\n    <div class=\"loader-position\">\n      <symphony-sfx-loader></symphony-sfx-loader>\n    </div>\n  </section>\n  <section *ngIf=\"!model.isLoading\" sfx-modal-body-area>\n    <section class=\"sfx-pt-40 sfx-pb-40 sfx-txt-center\" *ngIf=\"model.errorText\">\n      <symphony-paragraph>{{\n        model.errorText\n        }}</symphony-paragraph>\n    </section>\n\n    <ng-content *ngIf=\"!model.errorText\" ngProjectAs=\"[sfx-modal-body-area]\"\n      select=\"[sfx-modal-body-area]\"></ng-content>\n  </section>\n\n  <symphony-button-v2 sfx-button-secondary id=\"button-modal-cancel\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.cancelButtonText\" [isSecondary]=\"true\" (clicked)=\"onCancel()\"></symphony-button-v2>\n  <symphony-button-v2 sfx-button-primary id=\"button-modal-schedule\" class=\"pull-right sfx-d-flex\"\n    [text]=\"model.confirmButtonText\" [disabled]=\"model.confirmButtonDisabled\"\n    (clicked)=\"onConfirm()\"></symphony-button-v2>\n</symphony-two-column-modal-template>", styles: [".loader-container{padding:20px;height:300px;position:relative}.loader-position{position:absolute;top:50%;left:47%;transform:translateY(-50%)}\n"] }]

package/esm2020/projects/component-library/lib/pages/setting-detail-page/partial-page/editable-setting-partial-page/editable-setting-partial-page.component.mjs

@@ -22,7 +22,7 @@ export class EditableSettingPartialPageComponent {
     }
 }
 EditableSettingPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked", reloadClicked: "reloadClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange($event)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i2.EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: i3.ButtonV2Component, selector: "symphony-button-v2" }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+EditableSettingPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: EditableSettingPartialPageComponent, selector: "symphony-editable-setting-partial-page", inputs: { partialPageModel: "partialPageModel", isLoadingPartialPage: "isLoadingPartialPage", errorPageState: "errorPageState" }, outputs: { editableSettingValueChanged: "editableSettingValueChanged", saveClicked: "saveClicked", reloadClicked: "reloadClicked" }, ngImport: i0, template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange($event)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""], components: [{ type: i1.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i2.EditableSettingItemListComponent, selector: "symphony-editable-setting-item-list", inputs: ["settingItemsList"], outputs: ["settingItemValueChanged"] }, { type: i3.ButtonV2Component, selector: "symphony-button-v2" }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: EditableSettingPartialPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-editable-setting-partial-page', template: "<section *ngIf=\"partialPageModel && !isLoadingPartialPage && !errorPageState\">\n  <symphony-paragraph class=\"sfx-font-bold sfx-mb-5 sfx-d-flex\">{{\n    partialPageModel.partialTitle\n  }}</symphony-paragraph>\n  <symphony-paragraph class=\"sfx-mb-20 sfx-d-flex\">{{\n    partialPageModel.partialDescription\n  }}</symphony-paragraph>\n  <div class=\"row\">\n    <div class=\"col-xs-12 col-sm-12 col-md-4 col-lg-3\">\n      <ng-content select=\"[dropdown-dropzone]\"></ng-content>\n    </div>\n  </div>\n  <section\n    *ngIf=\"!partialPageModel.isLoadingList && !partialPageModel.errorListState\"\n  >\n    <symphony-editable-setting-item-list\n      class=\"sfx-mt-30 sfx-d-block\"\n      [settingItemsList]=\"partialPageModel.settingItemsList\"\n      (settingItemValueChanged)=\"onEditableSettingValueChange($event)\"\n    ></symphony-editable-setting-item-list>\n    <symphony-button-v2\n      id=\"button-partialPage-save\"\n      class=\"pull-right sfx-d-flex\"\n      text=\"Save\"\n      [disabled]=\"partialPageModel.saveBtnDisabled\"\n      (clicked)=\"onSaveclick(partialPageModel)\"\n    ></symphony-button-v2>\n  </section>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.isLoadingList\"\n  ></symphony-sfx-loader>\n  <symphony-sfx-loader\n    *ngIf=\"partialPageModel.errorListState && !partialPageModel.isLoadingList\"\n    [hasCustomMessage]=\"partialPageModel.errorListState\"\n  >\n    <symphony-paragraph\n      custom-message\n      class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n      >Loading this page is taking longer than expected.<br />Try to\n      <span\n        (click)=\"onReloadClick($event)\"\n        class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n        >reload</span\n      >\n      it or come back later.</symphony-paragraph\n    >\n  </symphony-sfx-loader>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingPartialPage\"></symphony-sfx-loader>\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingPartialPage\"\n  [hasCustomMessage]=\"errorPageState\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to\n    <span\n      (click)=\"onReloadClick($event)\"\n      class=\"sfx-v2-purple1 sfx-font-bold sfx-cursor-pointer\"\n      >reload</span\n    >\n    it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [""] }]

package/esm2020/projects/component-library/lib/pages/setting-list-page/setting-list-page.component.mjs

@@ -21,7 +21,7 @@ export class SettingListPageComponent {
     }
 }
 SettingListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SettingListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListPageComponent, selector: "symphony-setting-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: i1.SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i4.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i5.CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+SettingListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SettingListPageComponent, selector: "symphony-setting-list-page", inputs: { model: "model" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"], components: [{ type: i1.SettingListTemplateComponent, selector: "symphony-setting-list-template" }, { type: i2.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i4.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i5.CardListComponent, selector: "symphony-card-list", inputs: ["cardList"], outputs: ["cardClicked"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SettingListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-setting-list-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-list-template *ngIf=\"model\">\n  <symphony-h3 page-title>{{ model.pageTitle }}</symphony-h3>\n  <symphony-paragraph List-title>{{ model.listTitle }}</symphony-paragraph>\n  <symphony-input-text\n    filter-input\n    [placeholder]=\"'Search by keyword'\"\n    [icon]=\"'si-search-new'\"\n    (textChange)=\"keywordSearch($event)\"\n  >\n  </symphony-input-text>\n  <symphony-card-list\n    card-list\n    [cardList]=\"filteredCardList\"\n    (cardClicked)=\"onCardClick($event)\"\n  ></symphony-card-list>\n</symphony-setting-list-template>\n", styles: [".card-list{padding:5px}\n"] }]

package/esm2020/projects/component-library/lib/pages/settings-license-management/report-license-details-page/report-license-details-page.component.mjs

@@ -25,7 +25,7 @@ export class ReportLicenseDetailsPageComponent {
     }
 }
 ReportLicenseDetailsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportLicenseDetailsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReportLicenseDetailsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportLicenseDetailsPageComponent, selector: "symphony-report-license-details-page", inputs: { reportLicenseModel: "reportLicenseModel", isLoadingLicensePage: "isLoadingLicensePage", errorPageState: "errorPageState" }, outputs: { keywordSearchChange: "keywordSearchChange", statusFilterChange: "statusFilterChange", modifiedFilterChange: "modifiedFilterChange" }, ngImport: i0, template: "<section class = \"report-license-container\" *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear grid-with-dropdown show-moreOption-dropdown-top\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".report-license-container{padding:10px}.filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.wd-100{width:100%}\n"], components: [{ type: i1.StatusCardComponent, selector: "symphony-status-card", inputs: ["statusCardModel"] }, { type: i2.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i3.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i4.FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: ["model"] }, { type: i5.GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu", "hasSorting", "masterDetail", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "isRowMaster", "context"], outputs: ["sortChanged", "cellClick"] }, { type: i6.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i7.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ReportLicenseDetailsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ReportLicenseDetailsPageComponent, selector: "symphony-report-license-details-page", inputs: { reportLicenseModel: "reportLicenseModel", isLoadingLicensePage: "isLoadingLicensePage", errorPageState: "errorPageState" }, outputs: { keywordSearchChange: "keywordSearchChange", statusFilterChange: "statusFilterChange", modifiedFilterChange: "modifiedFilterChange" }, ngImport: i0, template: "<section class = \"report-license-container\" *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear grid-with-dropdown show-moreOption-dropdown-top\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".report-license-container{padding:10px}.filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.wd-100{width:100%}\n"], components: [{ type: i1.StatusCardComponent, selector: "symphony-status-card", inputs: ["statusCardModel"] }, { type: i2.InputTextComponent, selector: "symphony-input-text", inputs: ["placeholder", "icon", "label", "isInverse", "size", "value", "maxlength", "isDisabled", "textInfo", "textLink", "textClick", "isLabelView"], outputs: ["textChange"] }, { type: i3.InputDropdownComponent, selector: "symphony-input-dropdown", inputs: ["inputDropdownListModel", "disableBtn", "isInverse", "isRequired"], outputs: ["selectItem", "clearSelection"] }, { type: i4.FormattedCounterComponent, selector: "symphony-formatted-counter", inputs: ["model"] }, { type: i5.GridComponent, selector: "symphony-grid", inputs: ["columnDefs", "defaultColDef", "rowData", "onGridReadyFunction", "pageSize", "rowModelType", "suppressRowClickSelection", "rowSelectionMode", "hasNoPaddingleft", "isGridColPinnedLeft", "isServerSideGroup", "getServerSideGroupKey", "autoGroupColumnDef", "treeData", "getDataPath", "rowClassRules", "gridContextMenu", "hasSorting", "masterDetail", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "isRowMaster", "context"], outputs: ["sortChanged", "cellClick"] }, { type: i6.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }, { type: i7.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ReportLicenseDetailsPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-report-license-details-page', template: "<section class = \"report-license-container\" *ngIf=\"reportLicenseModel && !isLoadingLicensePage\">\n<div *ngIf=\"reportLicenseModel.statusCard\" class=\"row mb-space\">\n<div *ngFor=\"let card of reportLicenseModel.statusCard\" class=\"col-md-3 card-space\">\n  <symphony-status-card  [statusCardModel]=\"card\"></symphony-status-card>\n</div>\n</div>\n<div *ngIf=\"reportLicenseModel.showFilters\" class=\"filter-area-section mb-space\">\n  <div *ngIf=\"reportLicenseModel.showSearchBox\" class=\"wd-100\">\n  <symphony-input-text\n  filter-one\n  [label]=\"'Keyword'\"\n  [placeholder]=\"'Enter Search Value'\"\n  [icon]=\"'si-search-new'\"\n  [isInverse]=\"true\"\n  (textChange)=\"onKeywordSearch($event)\"\n>\n</symphony-input-text>\n  </div>\n  <div *ngIf=\"reportLicenseModel.statusDropdown\" class=\"wd-100\">\n    <symphony-input-dropdown\n    filter-one\n    [isInverse]=\"true\"\n    [inputDropdownListModel]=\"reportLicenseModel.statusDropdown\"\n    (selectItem)=\"onStatusFilterChange($event)\">\n  </symphony-input-dropdown>\n    </div>\n    <div *ngIf=\"reportLicenseModel.lastModifiedDropdown\" class=\"wd-100\">\n      <symphony-input-dropdown\n      filter-one\n      [isInverse]=\"true\"\n      [inputDropdownListModel]=\"reportLicenseModel.lastModifiedDropdown\"\n      (selectItem)=\"onModifiedFilterChange($event)\">\n    </symphony-input-dropdown>\n    </div>\n</div>\n<div *ngIf=\"reportLicenseModel.formattedCounterModel?.count\" class=\"fl-right mb-space\">\n  <symphony-formatted-counter [model]=\"reportLicenseModel.formattedCounterModel\"></symphony-formatted-counter>\n</div>\n<div class=\"grid-clear grid-with-dropdown show-moreOption-dropdown-top\">\n<symphony-grid\n    #sfxgrid\n    sfx-grid\n    [columnDefs]=\"reportLicenseModel.grid.columnDefs\"\n    [defaultColDef]=\"reportLicenseModel.grid.defaultColumnDef\"\n    [rowData]=\"reportLicenseModel.grid.rowData\"\n    [pageSize]=\"reportLicenseModel.grid.pageSize\"\n    [onGridReadyFunction]=\"reportLicenseModel.grid.onGridReadyFunction\"\n    [rowModelType]=\"reportLicenseModel.grid.rowModelType\"\n    [hasNoPaddingleft]=\"true\"\n    [suppressRowClickSelection]=\"true\"\n    [rowClassRules]=\"reportLicenseModel.grid.rowClassRules\"\n    [gridContextMenu]=\"true\"\n></symphony-grid>\n</div>\n</section>\n<symphony-sfx-loader *ngIf=\"isLoadingLicensePage\"></symphony-sfx-loader>\n\n<symphony-sfx-loader\n  *ngIf=\"errorPageState && !isLoadingLicensePage\"\n>\n  <symphony-paragraph\n    custom-message\n    class=\"sfx-mb-20 sfx-mt-20 sfx-d-block text-center\"\n    >Loading this page is taking longer than expected.<br />Try to reload it or come back later.</symphony-paragraph\n  >\n</symphony-sfx-loader>\n", styles: [".report-license-container{padding:10px}.filter-area-section{background:#D2D8E5;padding:1.875rem 2.5rem .9375rem;border-radius:.9375rem;display:flex;width:100%}.mb-space{margin-bottom:2rem}.card-space{margin-bottom:1rem}.fl-right{float:right}.grid-clear{clear:both}.wd-100{width:100%}\n"] }]

package/esm2020/projects/component-library/lib/pages/sms-usage-report-page/sms-usage-report-page.component.mjs

@@ -18,7 +18,7 @@ export class SmsUsageReportPageComponent {
     }
 }
 SmsUsageReportPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SmsUsageReportPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmsUsageReportPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SmsUsageReportPageComponent, selector: "symphony-sms-usage-report-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list sfx-nav [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font24\">SMS Usage And Monitoring</symphony-h4>\n    <div class=\"sms-detail-wrapper\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (YTD) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSent }}</symphony-paragraph>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (All-Time) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSentAllTime }}</symphony-paragraph>\n        </div>\n      </div>\n\n\n    </div>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font18\">Monthly SMS Sent (YTD)</symphony-h4>\n    <div class=\"total-wrap sfx-pb-10\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-invoice-area [model]=\"model.invoiceAreaModel\"></symphony-invoice-area>\n        </div>\n      </div>\n    </div>\n  </section>\n\n</symphony-setting-details-template>", styles: [".sms-detail-wrapper{background:#F1F2F5;padding:30px;border-radius:15px;margin-top:30px;margin-bottom:30px}.total-wrap{margin-top:20px}.total-wrap .invoice-line-item{padding-bottom:20px}.total-wrap .invoice-line-item .text-right{justify-content:left}.total-wrap .invoice-line-item:last-child{border-bottom:2px solid #000;padding-bottom:20px}.total-wrap .invoice-line-item:first-child{border-bottom:2px solid #000;font-weight:500;padding-bottom:15px;margin-bottom:15px}.total-wrap .job-type-summary{border-bottom:none}.total-wrap .job-bold-txt{font-weight:500}.total-wrap .job-bold-txt .text-right{justify-content:left}\n"], components: [{ type: i1.SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: i2.BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: i3.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i4.SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: i5.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i6.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i7.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i8.InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: ["model"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+SmsUsageReportPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SmsUsageReportPageComponent, selector: "symphony-sms-usage-report-page", inputs: { model: "model" }, outputs: { detailNavigationClicked: "detailNavigationClicked" }, ngImport: i0, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list sfx-nav [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font24\">SMS Usage And Monitoring</symphony-h4>\n    <div class=\"sms-detail-wrapper\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (YTD) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSent }}</symphony-paragraph>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (All-Time) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSentAllTime }}</symphony-paragraph>\n        </div>\n      </div>\n\n\n    </div>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font18\">Monthly SMS Sent (YTD)</symphony-h4>\n    <div class=\"total-wrap sfx-pb-10\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-invoice-area [model]=\"model.invoiceAreaModel\"></symphony-invoice-area>\n        </div>\n      </div>\n    </div>\n  </section>\n\n</symphony-setting-details-template>", styles: [".sms-detail-wrapper{background:#F1F2F5;padding:30px;border-radius:15px;margin-top:30px;margin-bottom:30px}.total-wrap{margin-top:20px}.total-wrap .invoice-line-item{padding-bottom:20px}.total-wrap .invoice-line-item .text-right{justify-content:left}.total-wrap .invoice-line-item:last-child{border-bottom:2px solid #000;padding-bottom:20px}.total-wrap .invoice-line-item:first-child{border-bottom:2px solid #000;font-weight:500;padding-bottom:15px;margin-bottom:15px}.total-wrap .job-type-summary{border-bottom:none}.total-wrap .job-bold-txt{font-weight:500}.total-wrap .job-bold-txt .text-right{justify-content:left}\n"], components: [{ type: i1.SettingDetailsTemplateComponent, selector: "symphony-setting-details-template" }, { type: i2.BreadcrumbComponent, selector: "symphony-breadcrumb", inputs: ["breadcrumbs"], outputs: ["breadcrumbClicked"] }, { type: i3.H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: i4.SettingsDetailNavigationListComponent, selector: "symphony-settings-detail-navigation-list", inputs: ["navigationList"], outputs: ["navigationItemClicked"] }, { type: i5.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i6.H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }, { type: i7.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i8.InvoiceAreaComponent, selector: "symphony-invoice-area", inputs: ["model"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SmsUsageReportPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-sms-usage-report-page', encapsulation: ViewEncapsulation.None, template: "<symphony-setting-details-template *ngIf=\"model\">\n  <symphony-breadcrumb breadcrumb [breadcrumbs]=\"model.breadcrumbs\">\n  </symphony-breadcrumb>\n  <symphony-h3 sfx-header [text]=\"model.pageTitle\"></symphony-h3>\n  <symphony-settings-detail-navigation-list sfx-nav [navigationList]=\"model.navigationList\"\n    (navigationItemClicked)=\"onDetailNavigationClick($event)\"></symphony-settings-detail-navigation-list>\n  <section sfx-content>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font24\">SMS Usage And Monitoring</symphony-h4>\n    <div class=\"sms-detail-wrapper\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (YTD) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSent }}</symphony-paragraph>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-4\">\n          <symphony-h5 class=\"sfx-font-bold\"> Total SMS Sent (All-Time) </symphony-h5>\n          <symphony-paragraph class=\" sfx-d-block sfx-mb-5\">{{ model.totalSmsSentAllTime }}</symphony-paragraph>\n        </div>\n      </div>\n\n\n    </div>\n    <symphony-h4 class=\"sfx-mt-0 sfx-mb-15 sfx-font18\">Monthly SMS Sent (YTD)</symphony-h4>\n    <div class=\"total-wrap sfx-pb-10\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6\">\n          <symphony-invoice-area [model]=\"model.invoiceAreaModel\"></symphony-invoice-area>\n        </div>\n      </div>\n    </div>\n  </section>\n\n</symphony-setting-details-template>", styles: [".sms-detail-wrapper{background:#F1F2F5;padding:30px;border-radius:15px;margin-top:30px;margin-bottom:30px}.total-wrap{margin-top:20px}.total-wrap .invoice-line-item{padding-bottom:20px}.total-wrap .invoice-line-item .text-right{justify-content:left}.total-wrap .invoice-line-item:last-child{border-bottom:2px solid #000;padding-bottom:20px}.total-wrap .invoice-line-item:first-child{border-bottom:2px solid #000;font-weight:500;padding-bottom:15px;margin-bottom:15px}.total-wrap .job-type-summary{border-bottom:none}.total-wrap .job-bold-txt{font-weight:500}.total-wrap .job-bold-txt .text-right{justify-content:left}\n"] }]

package/esm2020/projects/component-library/lib/pages/toggle-list-partial-page/toggle-list-partial-page.component.mjs

@@ -20,7 +20,7 @@ export class ToggleListPartialPageComponent {
     }
 }
 ToggleListPartialPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ToggleListPartialPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleListPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ToggleListPartialPageComponent, selector: "symphony-toggle-list-partial-page", inputs: { model: "model" }, outputs: { updateSettingToggle: "updateSettingToggle", addButtonClick: "addButtonClick" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <h3 sfx-header>{{ model.PageLabel }}</h3>\n  <symphony-labelled-toggle-list\n    [modelList]=\"model.toggleModels\"\n    (toggleListItemValue)=\"updateSettingValue($event)\"\n  >\n  </symphony-labelled-toggle-list>\n  <div\n    *ngIf=\"!model.toggleModels.length && !model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-paragraph class=\"text-center\">{{\n      model.message\n    }}</symphony-paragraph>\n  </div>\n  \n  <symphony-button-with-icon *ngIf=\"model.enableAddButton\"\n    class=\"add-button sfx-font-bold\"\n    (clicked)=\"onAddButtonClick()\"\n    [icon]=\"icon\"\n    [text]=\"model.addButtonText\"\n    [showActionButton]=\"true\"\n    [showPopover]=\"true\"\n    [isDisabled]=\"false\"\n  ></symphony-button-with-icon>\n\n  <div\n    *ngIf=\"model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-sfx-loader [message]=\"model.loadingMessage\"></symphony-sfx-loader>\n  </div>\n</div>\n", styles: [".add-button{color:#712ace}\n"], components: [{ type: i1.LabelledToggleListComponent, selector: "symphony-labelled-toggle-list", inputs: ["modelList"], outputs: ["toggleListItemValue"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: i3.ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover", "isDisabled"], outputs: ["clicked"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ToggleListPartialPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ToggleListPartialPageComponent, selector: "symphony-toggle-list-partial-page", inputs: { model: "model" }, outputs: { updateSettingToggle: "updateSettingToggle", addButtonClick: "addButtonClick" }, ngImport: i0, template: "<div *ngIf=\"model\">\n  <h3 sfx-header>{{ model.PageLabel }}</h3>\n  <symphony-labelled-toggle-list\n    [modelList]=\"model.toggleModels\"\n    (toggleListItemValue)=\"updateSettingValue($event)\"\n  >\n  </symphony-labelled-toggle-list>\n  <div\n    *ngIf=\"!model.toggleModels.length && !model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-paragraph class=\"text-center\">{{\n      model.message\n    }}</symphony-paragraph>\n  </div>\n  \n  <symphony-button-with-icon *ngIf=\"model.enableAddButton\"\n    class=\"add-button sfx-font-bold\"\n    (clicked)=\"onAddButtonClick()\"\n    [icon]=\"icon\"\n    [text]=\"model.addButtonText\"\n    [showActionButton]=\"true\"\n    [showPopover]=\"true\"\n    [isDisabled]=\"false\"\n  ></symphony-button-with-icon>\n\n  <div\n    *ngIf=\"model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-sfx-loader [message]=\"model.loadingMessage\"></symphony-sfx-loader>\n  </div>\n</div>\n", styles: [".add-button{color:#712ace}\n"], components: [{ type: i1.LabelledToggleListComponent, selector: "symphony-labelled-toggle-list", inputs: ["modelList"], outputs: ["toggleListItemValue"] }, { type: i2.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold", "fontSize", "fontWeight"] }, { type: i3.ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover", "isDisabled"], outputs: ["clicked"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message", "hasCustomMessage"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ToggleListPartialPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'symphony-toggle-list-partial-page', template: "<div *ngIf=\"model\">\n  <h3 sfx-header>{{ model.PageLabel }}</h3>\n  <symphony-labelled-toggle-list\n    [modelList]=\"model.toggleModels\"\n    (toggleListItemValue)=\"updateSettingValue($event)\"\n  >\n  </symphony-labelled-toggle-list>\n  <div\n    *ngIf=\"!model.toggleModels.length && !model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-paragraph class=\"text-center\">{{\n      model.message\n    }}</symphony-paragraph>\n  </div>\n  \n  <symphony-button-with-icon *ngIf=\"model.enableAddButton\"\n    class=\"add-button sfx-font-bold\"\n    (clicked)=\"onAddButtonClick()\"\n    [icon]=\"icon\"\n    [text]=\"model.addButtonText\"\n    [showActionButton]=\"true\"\n    [showPopover]=\"true\"\n    [isDisabled]=\"false\"\n  ></symphony-button-with-icon>\n\n  <div\n    *ngIf=\"model.isLoading\"\n    class=\"sfx-mt-80 sfx-mb-40\"\n    feedback-card-list\n  >\n    <symphony-sfx-loader [message]=\"model.loadingMessage\"></symphony-sfx-loader>\n  </div>\n</div>\n", styles: [".add-button{color:#712ace}\n"] }]