@symphony-talent/component-library 4.41.0 → 4.43.0

package/fesm2015/symphony-talent-component-library.mjs

@@ -3457,10 +3457,10 @@ class ButtonWithIconComponent {
     }
 }
 ButtonWithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton", showPopover: "showPopover" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton", showPopover: "showPopover", isDisabled: "isDisabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\" [disabled]=\"isDisabled\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}.sfx-actions-items-list button:disabled{cursor:not-allowed;opacity:70%}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], 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: ButtonWithIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"] }]
+            args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list\" *ngIf=\"showActionButton\">\n  <button (click)=\"onClick()\" [disabled]=\"isDisabled\">\n    <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n  </button>\n</div>", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none;margin-right:1.25rem;margin-bottom:.625rem}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}.sfx-actions-items-list button:disabled{cursor:not-allowed;opacity:70%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], icon: [{
@@ -3469,6 +3469,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], showPopover: [{
                 type: Input
+            }], isDisabled: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }] } });
@@ -3487,6 +3489,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 }]
         }] });
 
+class LabelledInputToggleComponent {
+    constructor() {
+        this.toggleCurrentValue = new EventEmitter();
+    }
+    updateToggleValue(isToggled) {
+        this.model.isToggled = isToggled;
+        this.toggleCurrentValue.emit(this.model);
+    }
+}
+LabelledInputToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledInputToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelledInputToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LabelledInputToggleComponent, selector: "symphony-labelled-input-toggle", inputs: { model: "model" }, outputs: { toggleCurrentValue: "toggleCurrentValue" }, ngImport: i0, template: "<div *ngIf=\"model\" class=\"settingContainer sfx-border-bottom-gray-1\">\n  <div class=\"toggleText\">\n    <div>\n      <p class=\"sfx-font-bold\">{{ model.label }}</p>\n    </div>\n    <div>\n      <p>{{ model.description }}</p>\n    </div>\n  </div>\n  <symphony-input-toggle\n    class=\"toggleControl\"\n    [isToggled]=\"model.isToggled\"\n    (toggleClick)=\"updateToggleValue($event)\"\n  ></symphony-input-toggle>\n</div>\n", styles: [".toggleText{display:Inline-Block}.toggleControl{float:right;margin-top:20px}.settingContainer{margin:10px}\n"], components: [{ type: InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledInputToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-labelled-input-toggle', template: "<div *ngIf=\"model\" class=\"settingContainer sfx-border-bottom-gray-1\">\n  <div class=\"toggleText\">\n    <div>\n      <p class=\"sfx-font-bold\">{{ model.label }}</p>\n    </div>\n    <div>\n      <p>{{ model.description }}</p>\n    </div>\n  </div>\n  <symphony-input-toggle\n    class=\"toggleControl\"\n    [isToggled]=\"model.isToggled\"\n    (toggleClick)=\"updateToggleValue($event)\"\n  ></symphony-input-toggle>\n</div>\n", styles: [".toggleText{display:Inline-Block}.toggleControl{float:right;margin-top:20px}.settingContainer{margin:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], toggleCurrentValue: [{
+                type: Output
+            }] } });
+
+class LabelledInputToggleModule {
+}
+LabelledInputToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledInputToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LabelledInputToggleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledInputToggleModule, declarations: [LabelledInputToggleComponent], imports: [InputToggleModule, CommonModule], exports: [LabelledInputToggleComponent] });
+LabelledInputToggleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledInputToggleModule, imports: [[InputToggleModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledInputToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LabelledInputToggleComponent],
+                    exports: [LabelledInputToggleComponent],
+                    imports: [InputToggleModule, CommonModule],
+                }]
+        }] });
+
+class LabelledToggleListComponent {
+    constructor() {
+        this.toggleListItemValue = new EventEmitter();
+    }
+    updateListItemValue(event) {
+        this.toggleListItemValue.emit(event);
+    }
+}
+LabelledToggleListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledToggleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelledToggleListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LabelledToggleListComponent, selector: "symphony-labelled-toggle-list", inputs: { modelList: "modelList" }, outputs: { toggleListItemValue: "toggleListItemValue" }, ngImport: i0, template: "<symphony-labelled-input-toggle\n  *ngFor=\"let inputModel of modelList\"\n  [model]=\"inputModel\"\n  (toggleCurrentValue)=\"updateListItemValue($event)\"\n>\n</symphony-labelled-input-toggle>\n", components: [{ type: LabelledInputToggleComponent, selector: "symphony-labelled-input-toggle", inputs: ["model"], outputs: ["toggleCurrentValue"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledToggleListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'symphony-labelled-toggle-list', template: "<symphony-labelled-input-toggle\n  *ngFor=\"let inputModel of modelList\"\n  [model]=\"inputModel\"\n  (toggleCurrentValue)=\"updateListItemValue($event)\"\n>\n</symphony-labelled-input-toggle>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { modelList: [{
+                type: Input
+            }], toggleListItemValue: [{
+                type: Output
+            }] } });
+
+class LabelledToggleListModule {
+}
+LabelledToggleListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledToggleListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LabelledToggleListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledToggleListModule, declarations: [LabelledToggleListComponent], imports: [LabelledInputToggleModule, CommonModule], exports: [LabelledToggleListComponent] });
+LabelledToggleListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledToggleListModule, imports: [[LabelledInputToggleModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LabelledToggleListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LabelledToggleListComponent],
+                    exports: [LabelledToggleListComponent],
+                    imports: [LabelledInputToggleModule, CommonModule],
+                }]
+        }] });
+
 class MoleculesModule {
 }
 MoleculesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MoleculesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3512,7 +3581,10 @@ MoleculesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         CharacterCounterModule,
         SettingsDetailNavigationItemModule,
         EditableSettingItemModule,
-        TabsModules], exports: [PillsModule,
+        TabsModules,
+        InputToggleModule,
+        LabelledInputToggleModule,
+        LabelledToggleListModule], exports: [PillsModule,
         BreadcrumbModule,
         FeedbackCardModule,
         DocumentManagementItemModule,
@@ -3541,7 +3613,10 @@ MoleculesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             CharacterCounterModule,
             SettingsDetailNavigationItemModule,
             EditableSettingItemModule,
-            TabsModules
+            TabsModules,
+            InputToggleModule,
+            LabelledInputToggleModule,
+            LabelledToggleListModule
         ], PillsModule,
         BreadcrumbModule,
         FeedbackCardModule,
@@ -3583,7 +3658,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                         CharacterCounterModule,
                         SettingsDetailNavigationItemModule,
                         EditableSettingItemModule,
-                        TabsModules
+                        TabsModules,
+                        InputToggleModule,
+                        LabelledInputToggleModule,
+                        LabelledToggleListModule
                     ]
                 }]
         }] });
@@ -3945,10 +4023,10 @@ class GridActionsComponent {
     }
 }
 GridActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionsComponent, selector: "symphony-grid-actions", inputs: { model: "model", isInverse: "isInverse" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon *ngIf=\"!actionButton.showPopover\"\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      id=\"btn-action-{{actionButton.text | trimId}}\"\n    ></symphony-button-with-icon>\n  <symphony-tooltip-wrapper *ngIf=\"actionButton.showPopover\" \n  [tooltipHtml]=\"actionButton.tooltip\"\n  [placement]=\"'top'\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  class=\"actionButton-tooltip\">\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n      id=\"btn-action-{{actionButton.text | trimId}}-popover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover"], outputs: ["clicked"] }, { type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": TrimIdPipe }, encapsulation: i0.ViewEncapsulation.None });
+GridActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GridActionsComponent, selector: "symphony-grid-actions", inputs: { model: "model", isInverse: "isInverse" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    *ngIf=\"!actionButton.showPopover\"\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n    [isDisabled]=\"actionButton.isDisabled\"\n    id=\"btn-action-{{ actionButton.text | trimId }}\"\n  ></symphony-button-with-icon>\n\n  <symphony-tooltip-wrapper\n    *ngIf=\"actionButton.showPopover\"\n    [tooltipHtml]=\"actionButton.tooltip\"\n    [placement]=\"'top'\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    class=\"actionButton-tooltip\"\n  >\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n      [isDisabled]=\"actionButton.isDisabled\"\n      id=\"btn-action-{{ actionButton.text | trimId }}-popover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>\n", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"], components: [{ type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: ["text", "icon", "showActionButton", "showPopover", "isDisabled"], outputs: ["clicked"] }, { type: TooltipWrapperComponent, selector: "symphony-tooltip-wrapper", inputs: ["placement", "tooltipHtml"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trimId": TrimIdPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GridActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-grid-actions', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon *ngIf=\"!actionButton.showPopover\"\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      id=\"btn-action-{{actionButton.text | trimId}}\"\n    ></symphony-button-with-icon>\n  <symphony-tooltip-wrapper *ngIf=\"actionButton.showPopover\" \n  [tooltipHtml]=\"actionButton.tooltip\"\n  [placement]=\"'top'\"\n  containerClass=\"sfx-info-tooltip item-tooltip\"\n  class=\"actionButton-tooltip\">\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n      id=\"btn-action-{{actionButton.text | trimId}}-popover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
+            args: [{ selector: 'symphony-grid-actions', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-d-inline-block\" *ngFor=\"let actionButton of model\">\n  <symphony-button-with-icon\n    *ngIf=\"!actionButton.showPopover\"\n    (clicked)=\"onButtonClick($event)\"\n    [icon]=\"actionButton.icon\"\n    [text]=\"actionButton.text\"\n    [showActionButton]=\"actionButton.showActionButton\"\n    [isDisabled]=\"actionButton.isDisabled\"\n    id=\"btn-action-{{ actionButton.text | trimId }}\"\n  ></symphony-button-with-icon>\n\n  <symphony-tooltip-wrapper\n    *ngIf=\"actionButton.showPopover\"\n    [tooltipHtml]=\"actionButton.tooltip\"\n    [placement]=\"'top'\"\n    containerClass=\"sfx-info-tooltip item-tooltip\"\n    class=\"actionButton-tooltip\"\n  >\n    <symphony-button-with-icon\n      (clicked)=\"onButtonClick($event)\"\n      [icon]=\"actionButton.icon\"\n      [text]=\"actionButton.text\"\n      [showActionButton]=\"actionButton.showActionButton\"\n      [showPopover]=\"actionButton.showPopover\"\n      [isDisabled]=\"actionButton.isDisabled\"\n      id=\"btn-action-{{ actionButton.text | trimId }}-popover\"\n    ></symphony-button-with-icon>\n  </symphony-tooltip-wrapper>\n</div>\n", styles: [".actionButton-tooltip .tooltip{min-width:160px}.actionButton-tooltip .tooltip .tooltip-inner{background-color:#565656;padding:8px 15px;border-radius:.625rem;max-width:250px;font-size:12px;color:#fff}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.top .tooltip-arrow.arrow{border-top-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right{left:5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.right .tooltip-arrow.arrow{border-right-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.bottom .tooltip-arrow.arrow{border-bottom-color:#565656}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left{left:-5px!important}.actionButton-tooltip .sfx-info-tooltip.item-tooltip.left .tooltip-arrow.arrow{border-left-color:#565656}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], buttonClicked: [{