@allsorter/ui-components 0.0.396 → 0.0.398
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/allsorter-ui-components.mjs +11 -6
- package/fesm2022/allsorter-ui-components.mjs.map +1 -1
- package/lib/ai-apply-bar/ai-apply-bar.component.d.ts +2 -1
- package/package.json +1 -1
- package/src/lib/ai-apply-bar/ai-apply-bar.component.html +10 -6
- package/src/lib/ai-wrapper/ai-wrapper.component.scss +12 -0
- package/src/lib/custom-editor/custom-editor.component.scss +6 -6
|
@@ -3114,6 +3114,7 @@ class AiApplyBarComponent {
|
|
|
3114
3114
|
this.chevronClick = new EventEmitter();
|
|
3115
3115
|
// Animation state - bar show/hide
|
|
3116
3116
|
this.isVisible = false;
|
|
3117
|
+
this.toggled = true;
|
|
3117
3118
|
}
|
|
3118
3119
|
onValueChange(v) {
|
|
3119
3120
|
this.value = v;
|
|
@@ -3129,11 +3130,11 @@ class AiApplyBarComponent {
|
|
|
3129
3130
|
this.closeClick.emit();
|
|
3130
3131
|
}
|
|
3131
3132
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showApplyButton: "showApplyButton", showClose: "showClose", iconOutlined: "iconOutlined", closeButtonTooltip: "closeButtonTooltip", closeButtonTooltipPosition: "closeButtonTooltipPosition", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n <div class=\"ai-toggle-button\">\n <!-- AI Trigger Button - Show when bar is hidden -->\n <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\" [iconOutlined]=\"true\"\n [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n </al-button>\n\n <!-- Close Button - Show when bar is visible -->\n <al-button *ngIf=\"isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n </al-button>\n </div>\n\n <!-- AI Apply Bar - Expands to the LEFT of button -->\n <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible\" [class.hidden]=\"!isVisible\">\n <div class=\"ai-apply-rail\">\n <div class=\"ai-apply-row\">\n <div class=\"ai-apply-input\">\n <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onValueChange($event)\">\n </al-input>\n </div>\n\n <div class=\"ai-apply-button\">\n <al-button *ngIf=\"showApplyButton\" [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n </al-button>\n <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n [customColour]=\"'#ffffff'\" [size]=\"'l'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n </al-icon-button>\n </div>\n </div>\n\n <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n\n</div>\n", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:flex-start;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;margin-top:10px}.ai-apply-wrap{position:absolute;right:48px;display:flex;align-items:flex-start;overflow:hidden;transform-origin:right center;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s;max-width:0;white-space:nowrap}.ai-apply-wrap.hidden{max-width:0;opacity:0;pointer-events:none;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{max-width:600px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);white-space:nowrap;opacity:0;transform-origin:right center;transform:scaleX(0);transition:opacity .3s ease-out,transform .4s cubic-bezier(.2,.8,.2,1)}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0;transform:scaleX(0)}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transform:scaleX(1);transition-delay:.2s}.ai-apply-row{display:flex;align-items:center;gap:4px;height:40px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.ai-apply-wrap.visible .ai-apply-row{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:40px!important;min-height:40px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1);display:block;white-space:normal;word-wrap:break-word}.ai-apply-wrap.visible .ai-apply-helper{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
3133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showApplyButton: "showApplyButton", showClose: "showClose", iconOutlined: "iconOutlined", closeButtonTooltip: "closeButtonTooltip", closeButtonTooltipPosition: "closeButtonTooltipPosition", showHelperText: "showHelperText", helperText: "helperText", isVisible: "isVisible", toggled: "toggled" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n <div class=\"ai-toggle-button\">\n <!-- AI Trigger Button - Show when bar is hidden -->\n <al-button *ngIf=\"toggled && !isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n [iconOutlined]=\"true\" [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n </al-button>\n\n <!-- Close Button - Show when bar is visible -->\n <al-button *ngIf=\"toggled && isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n </al-button>\n\n <al-button *ngIf=\"!toggled\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"onClose()\">\n </al-button>\n </div>\n\n <!-- AI Apply Bar - Expands to the LEFT of button -->\n <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible || !toggled\" [class.hidden]=\"!isVisible && toggled\">\n <div class=\"ai-apply-rail\">\n <div class=\"ai-apply-row\">\n <div class=\"ai-apply-input\">\n <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onValueChange($event)\">\n </al-input>\n </div>\n\n <div class=\"ai-apply-button\">\n <al-button *ngIf=\"showApplyButton\" [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\"\n [size]=\"'base'\" [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n </al-button>\n <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n [customColour]=\"'#ffffff'\" [size]=\"'l'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n </al-icon-button>\n </div>\n </div>\n\n <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n\n</div>\n", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:flex-start;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;margin-top:10px}.ai-apply-wrap{position:absolute;right:48px;display:flex;align-items:flex-start;overflow:hidden;transform-origin:right center;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s;max-width:0;white-space:nowrap}.ai-apply-wrap.hidden{max-width:0;opacity:0;pointer-events:none;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{max-width:600px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);white-space:nowrap;opacity:0;transform-origin:right center;transform:scaleX(0);transition:opacity .3s ease-out,transform .4s cubic-bezier(.2,.8,.2,1)}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0;transform:scaleX(0)}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transform:scaleX(1);transition-delay:.2s}.ai-apply-row{display:flex;align-items:center;gap:4px;height:40px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.ai-apply-wrap.visible .ai-apply-row{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:40px!important;min-height:40px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1);display:block;white-space:normal;word-wrap:break-word}.ai-apply-wrap.visible .ai-apply-helper{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
3133
3134
|
}
|
|
3134
3135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, decorators: [{
|
|
3135
3136
|
type: Component,
|
|
3136
|
-
args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n <div class=\"ai-toggle-button\">\n <!-- AI Trigger Button - Show when bar is hidden -->\n <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"
|
|
3137
|
+
args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n <div class=\"ai-toggle-button\">\n <!-- AI Trigger Button - Show when bar is hidden -->\n <al-button *ngIf=\"toggled && !isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n [iconOutlined]=\"true\" [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n </al-button>\n\n <!-- Close Button - Show when bar is visible -->\n <al-button *ngIf=\"toggled && isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n </al-button>\n\n <al-button *ngIf=\"!toggled\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"onClose()\">\n </al-button>\n </div>\n\n <!-- AI Apply Bar - Expands to the LEFT of button -->\n <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible || !toggled\" [class.hidden]=\"!isVisible && toggled\">\n <div class=\"ai-apply-rail\">\n <div class=\"ai-apply-row\">\n <div class=\"ai-apply-input\">\n <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onValueChange($event)\">\n </al-input>\n </div>\n\n <div class=\"ai-apply-button\">\n <al-button *ngIf=\"showApplyButton\" [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\"\n [size]=\"'base'\" [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n </al-button>\n <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n [customColour]=\"'#ffffff'\" [size]=\"'l'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n </al-icon-button>\n </div>\n </div>\n\n <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n\n</div>\n", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:flex-start;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;margin-top:10px}.ai-apply-wrap{position:absolute;right:48px;display:flex;align-items:flex-start;overflow:hidden;transform-origin:right center;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s;max-width:0;white-space:nowrap}.ai-apply-wrap.hidden{max-width:0;opacity:0;pointer-events:none;transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{max-width:600px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);white-space:nowrap;opacity:0;transform-origin:right center;transform:scaleX(0);transition:opacity .3s ease-out,transform .4s cubic-bezier(.2,.8,.2,1)}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0;transform:scaleX(0)}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transform:scaleX(1);transition-delay:.2s}.ai-apply-row{display:flex;align-items:center;gap:4px;height:40px;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.ai-apply-wrap.visible .ai-apply-row{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:40px!important;min-height:40px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1);display:block;white-space:normal;word-wrap:break-word}.ai-apply-wrap.visible .ai-apply-helper{opacity:1;transform:scale(1);transition-delay:.7s}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"] }]
|
|
3137
3138
|
}], propDecorators: { dataTestId: [{
|
|
3138
3139
|
type: Input
|
|
3139
3140
|
}], showChevron: [{
|
|
@@ -3174,6 +3175,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3174
3175
|
type: Output
|
|
3175
3176
|
}], chevronClick: [{
|
|
3176
3177
|
type: Output
|
|
3178
|
+
}], isVisible: [{
|
|
3179
|
+
type: Input
|
|
3180
|
+
}], toggled: [{
|
|
3181
|
+
type: Input
|
|
3177
3182
|
}] } });
|
|
3178
3183
|
|
|
3179
3184
|
/**
|
|
@@ -5202,11 +5207,11 @@ class CustomEditorComponent {
|
|
|
5202
5207
|
});
|
|
5203
5208
|
}
|
|
5204
5209
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, deps: [{ token: Renderer2 }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomEditorComponent, isStandalone: true, selector: "app-custom-editor", inputs: { bold: "bold", italic: "italic", underline: "underline", list: "list", isVisible: "isVisible", dataTestId: "dataTestId", showLabels: "showLabels", leftLabelText: "leftLabelText", rightLabelText: "rightLabelText", initialValue: "initialValue", contentFromParent: "contentFromParent", editScreenSection: "editScreenSection", actionType: "actionType", historyControls: "historyControls", autobullet: "autobullet", skillsBullet: "skillsBullet", jsonData: "jsonData", formJsonData: "formJsonData", editorId: "editorId", sectionId: "sectionId", actionId: "actionId", undoCustom: "undoCustom", redoCustom: "redoCustom", undoSkill: "undoSkill", redoSkill: "redoSkill", matOptionAI: "matOptionAI", hideTableOption: "hideTableOption", hideAutoBulletOption: "hideAutoBulletOption", hideAIOption: "hideAIOption", showAIButton: "showAIButton", insertTablebtn: "insertTablebtn", insertRowAbovebtn: "insertRowAbovebtn", insertRowBelowbtn: "insertRowBelowbtn", insertColumnLeftbtn: "insertColumnLeftbtn", insertColumnRightbtn: "insertColumnRightbtn", deleteTablebtn: "deleteTablebtn", deleteRowAbovebtn: "deleteRowAbovebtn", deleteRowBelowbtn: "deleteRowBelowbtn", deleteColumnLeftbtn: "deleteColumnLeftbtn", deleteColumnRightbtn: "deleteColumnRightbtn", showTable: "showTable", toolbarConfig: "toolbarConfig", textFormattingConfig: "textFormattingConfig" }, outputs: { contentChangeFromQuill: "contentChangeFromQuill", ApplyAIinQuill: "ApplyAIinQuill", onAutoBullet: "onAutoBullet" }, host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "editorReference", first: true, predicate: ["editorReference"], descendants: true, static: true }, { propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n <div class=\"left-label\">{{ leftLabelText }}</div>\n <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n <!-- Toolbar Section -->\n <div class=\"toolbar\">\n <!-- Styling Dropdown (Small Screens Only) -->\n <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n Styling\n </span>\n\n <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n (mouseleave)=\"hideStylingDropdown()\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </div>\n </div>\n\n <!-- Individual Styling Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Text Formatting Dropdown (Small Screens Only) -->\n <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n (mouseleave)=\"hideTextFormattingDropdown()\">\n Text Formatting\n </span>\n\n <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n <!-- Text Formatting Buttons -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n [title]=\"item.title\" type=\"button\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n\n <!-- Table Component (Small Screens Only) -->\n <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n </app-table>\n\n <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button -->\n <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n </div>\n </div>\n\n <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Table Component (Large Screens Only) -->\n <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n matTooltipPosition=\"above\">\n </app-table>\n\n <!-- Auto Bullet Button (Large Screens Only) -->\n <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button (Large Screens Only) -->\n <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n\n <!-- History Controls (Undo/Redo) -->\n <div *ngIf=\"historyControls\" class=\"history-controls\">\n <!-- Undo Button -->\n <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n undo\n </span>\n </button>\n\n <!-- Redo Button -->\n <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n redo\n </span>\n </button>\n </div>\n\n <!-- Apply AI Button -->\n <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n </al-button>\n\n </div>\n\n <!-- Editor Content Area -->\n <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.cdk-overlay-pane{width:fit-content!important;min-width:fit-content!important;transform:translate(0)!important}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "app-table", inputs: ["getEditorElement", "saveHistoryMethod", "textChangeMethod"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5210
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomEditorComponent, isStandalone: true, selector: "app-custom-editor", inputs: { bold: "bold", italic: "italic", underline: "underline", list: "list", isVisible: "isVisible", dataTestId: "dataTestId", showLabels: "showLabels", leftLabelText: "leftLabelText", rightLabelText: "rightLabelText", initialValue: "initialValue", contentFromParent: "contentFromParent", editScreenSection: "editScreenSection", actionType: "actionType", historyControls: "historyControls", autobullet: "autobullet", skillsBullet: "skillsBullet", jsonData: "jsonData", formJsonData: "formJsonData", editorId: "editorId", sectionId: "sectionId", actionId: "actionId", undoCustom: "undoCustom", redoCustom: "redoCustom", undoSkill: "undoSkill", redoSkill: "redoSkill", matOptionAI: "matOptionAI", hideTableOption: "hideTableOption", hideAutoBulletOption: "hideAutoBulletOption", hideAIOption: "hideAIOption", showAIButton: "showAIButton", insertTablebtn: "insertTablebtn", insertRowAbovebtn: "insertRowAbovebtn", insertRowBelowbtn: "insertRowBelowbtn", insertColumnLeftbtn: "insertColumnLeftbtn", insertColumnRightbtn: "insertColumnRightbtn", deleteTablebtn: "deleteTablebtn", deleteRowAbovebtn: "deleteRowAbovebtn", deleteRowBelowbtn: "deleteRowBelowbtn", deleteColumnLeftbtn: "deleteColumnLeftbtn", deleteColumnRightbtn: "deleteColumnRightbtn", showTable: "showTable", toolbarConfig: "toolbarConfig", textFormattingConfig: "textFormattingConfig" }, outputs: { contentChangeFromQuill: "contentChangeFromQuill", ApplyAIinQuill: "ApplyAIinQuill", onAutoBullet: "onAutoBullet" }, host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "editorReference", first: true, predicate: ["editorReference"], descendants: true, static: true }, { propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n <div class=\"left-label\">{{ leftLabelText }}</div>\n <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n <!-- Toolbar Section -->\n <div class=\"toolbar\">\n <!-- Styling Dropdown (Small Screens Only) -->\n <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n Styling\n </span>\n\n <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n (mouseleave)=\"hideStylingDropdown()\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </div>\n </div>\n\n <!-- Individual Styling Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Text Formatting Dropdown (Small Screens Only) -->\n <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n (mouseleave)=\"hideTextFormattingDropdown()\">\n Text Formatting\n </span>\n\n <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n <!-- Text Formatting Buttons -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n [title]=\"item.title\" type=\"button\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n\n <!-- Table Component (Small Screens Only) -->\n <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n </app-table>\n\n <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button -->\n <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n </div>\n </div>\n\n <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Table Component (Large Screens Only) -->\n <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n matTooltipPosition=\"above\">\n </app-table>\n\n <!-- Auto Bullet Button (Large Screens Only) -->\n <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button (Large Screens Only) -->\n <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n\n <!-- History Controls (Undo/Redo) -->\n <div *ngIf=\"historyControls\" class=\"history-controls\">\n <!-- Undo Button -->\n <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n undo\n </span>\n </button>\n\n <!-- Redo Button -->\n <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n redo\n </span>\n </button>\n </div>\n\n <!-- Apply AI Button -->\n <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n </al-button>\n\n </div>\n\n <!-- Editor Content Area -->\n <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "app-table", inputs: ["getEditorElement", "saveHistoryMethod", "textChangeMethod"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5206
5211
|
}
|
|
5207
5212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, decorators: [{
|
|
5208
5213
|
type: Component,
|
|
5209
|
-
args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule, MatIconModule, ButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n <div class=\"left-label\">{{ leftLabelText }}</div>\n <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n <!-- Toolbar Section -->\n <div class=\"toolbar\">\n <!-- Styling Dropdown (Small Screens Only) -->\n <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n Styling\n </span>\n\n <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n (mouseleave)=\"hideStylingDropdown()\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </div>\n </div>\n\n <!-- Individual Styling Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Text Formatting Dropdown (Small Screens Only) -->\n <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n (mouseleave)=\"hideTextFormattingDropdown()\">\n Text Formatting\n </span>\n\n <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n <!-- Text Formatting Buttons -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n [title]=\"item.title\" type=\"button\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n\n <!-- Table Component (Small Screens Only) -->\n <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n </app-table>\n\n <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button -->\n <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n </div>\n </div>\n\n <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Table Component (Large Screens Only) -->\n <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n matTooltipPosition=\"above\">\n </app-table>\n\n <!-- Auto Bullet Button (Large Screens Only) -->\n <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button (Large Screens Only) -->\n <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n\n <!-- History Controls (Undo/Redo) -->\n <div *ngIf=\"historyControls\" class=\"history-controls\">\n <!-- Undo Button -->\n <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n undo\n </span>\n </button>\n\n <!-- Redo Button -->\n <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n redo\n </span>\n </button>\n </div>\n\n <!-- Apply AI Button -->\n <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n </al-button>\n\n </div>\n\n <!-- Editor Content Area -->\n <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.cdk-overlay-pane{width:fit-content!important;min-width:fit-content!important;transform:translate(0)!important}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"] }]
|
|
5214
|
+
args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule, MatIconModule, ButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n <div class=\"left-label\">{{ leftLabelText }}</div>\n <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n <!-- Toolbar Section -->\n <div class=\"toolbar\">\n <!-- Styling Dropdown (Small Screens Only) -->\n <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n Styling\n </span>\n\n <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n (mouseleave)=\"hideStylingDropdown()\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </div>\n </div>\n\n <!-- Individual Styling Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Text Formatting Dropdown (Small Screens Only) -->\n <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n (mouseleave)=\"hideTextFormattingDropdown()\">\n Text Formatting\n </span>\n\n <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n <!-- Text Formatting Buttons -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n [title]=\"item.title\" type=\"button\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n\n <!-- Table Component (Small Screens Only) -->\n <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n </app-table>\n\n <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button -->\n <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n </div>\n </div>\n\n <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n <ng-container *ngIf=\"!isSmallScreen\">\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n matTooltipPosition=\"above\">\n <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n {{ item.icon }}\n </span>\n </button>\n </ng-container>\n\n <!-- Table Component (Large Screens Only) -->\n <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n matTooltipPosition=\"above\">\n </app-table>\n\n <!-- Auto Bullet Button (Large Screens Only) -->\n <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n {{ AutoBulletButton }}\n </button>\n\n <!-- Bullet Skill Button (Large Screens Only) -->\n <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n {{ skillsButton }}\n </button>\n\n <!-- History Controls (Undo/Redo) -->\n <div *ngIf=\"historyControls\" class=\"history-controls\">\n <!-- Undo Button -->\n <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n undo\n </span>\n </button>\n\n <!-- Redo Button -->\n <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n matTooltipPosition=\"above\">\n <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n redo\n </span>\n </button>\n </div>\n\n <!-- Apply AI Button -->\n <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n </al-button>\n\n </div>\n\n <!-- Editor Content Area -->\n <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"] }]
|
|
5210
5215
|
}], ctorParameters: () => [{ type: i0.Renderer2, decorators: [{
|
|
5211
5216
|
type: Inject,
|
|
5212
5217
|
args: [Renderer2]
|
|
@@ -7329,11 +7334,11 @@ class AiWrapperComponent {
|
|
|
7329
7334
|
this.inputBlur.emit();
|
|
7330
7335
|
}
|
|
7331
7336
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7332
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiWrapperComponent, isStandalone: true, selector: "al-ai-wrapper", inputs: { isAI: "isAI", inputPlaceholder: "inputPlaceholder", inputOptions: "inputOptions", inputValue: "inputValue", inputDisabled: "inputDisabled", showCloseButton: "showCloseButton", showHideButton: "showHideButton", showSubRoleButton: "showSubRoleButton", showYearMonthButton: "showYearMonthButton", showMoveButton: "showMoveButton", showDeleteButton: "showDeleteButton", showApplyButton: "showApplyButton", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showChevronButton: "showChevronButton", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { closeClick: "closeClick", aiTriggerClick: "aiTriggerClick", inputValueChange: "inputValueChange", hideClick: "hideClick", subRoleClick: "subRoleClick", yearMonthClick: "yearMonthClick", moveClick: "moveClick", deleteClick: "deleteClick", applyClick: "applyClick", chevronClick: "chevronClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, ngImport: i0, template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }] }); }
|
|
7337
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiWrapperComponent, isStandalone: true, selector: "al-ai-wrapper", inputs: { isAI: "isAI", inputPlaceholder: "inputPlaceholder", inputOptions: "inputOptions", inputValue: "inputValue", inputDisabled: "inputDisabled", showCloseButton: "showCloseButton", showHideButton: "showHideButton", showSubRoleButton: "showSubRoleButton", showYearMonthButton: "showYearMonthButton", showMoveButton: "showMoveButton", showDeleteButton: "showDeleteButton", showApplyButton: "showApplyButton", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showChevronButton: "showChevronButton", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { closeClick: "closeClick", aiTriggerClick: "aiTriggerClick", inputValueChange: "inputValueChange", hideClick: "hideClick", subRoleClick: "subRoleClick", yearMonthClick: "yearMonthClick", moveClick: "moveClick", deleteClick: "deleteClick", applyClick: "applyClick", chevronClick: "chevronClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, ngImport: i0, template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}:host ::ng-deep .mat-mdc-autocomplete-panel{width:253px!important;min-width:253px!important}::ng-deep .cdk-overlay-pane:has(.mat-mdc-autocomplete-panel){width:253px!important;min-width:253px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }] }); }
|
|
7333
7338
|
}
|
|
7334
7339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, decorators: [{
|
|
7335
7340
|
type: Component,
|
|
7336
|
-
args: [{ selector: 'al-ai-wrapper', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule, IconButtonComponent, ButtonComponent, InputComponent], template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"] }]
|
|
7341
|
+
args: [{ selector: 'al-ai-wrapper', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule, IconButtonComponent, ButtonComponent, InputComponent], template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}:host ::ng-deep .mat-mdc-autocomplete-panel{width:253px!important;min-width:253px!important}::ng-deep .cdk-overlay-pane:has(.mat-mdc-autocomplete-panel){width:253px!important;min-width:253px!important}\n"] }]
|
|
7337
7342
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { isAI: [{
|
|
7338
7343
|
type: Input
|
|
7339
7344
|
}], inputPlaceholder: [{
|