@cuby-ui/core 0.0.236 → 0.0.238
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/components/button/button.component.d.ts +1 -1
- package/components/button/button.options.d.ts +2 -2
- package/esm2022/components/button/button.component.mjs +5 -4
- package/esm2022/components/button/button.options.mjs +1 -1
- package/esm2022/editor/widgets/editor-block/editor-block.component.mjs +4 -4
- package/esm2022/types/appearance.mjs +1 -1
- package/esm2022/widgets/utility-info/utility-info.component.mjs +7 -6
- package/fesm2022/cuby-ui-core.mjs +13 -11
- package/fesm2022/cuby-ui-core.mjs.map +1 -1
- package/package.json +3 -3
- package/types/appearance.d.ts +1 -0
- package/widgets/utility-info/utility-info.component.d.ts +3 -2
|
@@ -158,7 +158,8 @@ class CuiButtonComponent {
|
|
|
158
158
|
ghost: '--c-ghost-icon-color',
|
|
159
159
|
flat: '--c-flat-icon-color',
|
|
160
160
|
destructive: '--c-destructive-icon-color',
|
|
161
|
-
link: '--c-link-icon-color'
|
|
161
|
+
link: '--c-link-icon-color',
|
|
162
|
+
'action-violet': '--c-action-violet-icon-color'
|
|
162
163
|
};
|
|
163
164
|
this.COLOR_BASE_500 = 'var(--cui-base-500)';
|
|
164
165
|
this.BUTTON_ICONS_COLOR_BASE_500 = [
|
|
@@ -231,11 +232,11 @@ class CuiButtonComponent {
|
|
|
231
232
|
return 'currentColor';
|
|
232
233
|
}
|
|
233
234
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\r\n class=\"c-wrapper\"\r\n [class.c-wrapper_invisible]=\"isLoaderShown\"\r\n>\r\n <cui-svg\r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n <span\r\n #content\r\n class=\"c-content\"\r\n ><ng-content></ng-content></span>\r\n <cui-svg\r\n *ngIf=\"iconRight\"\r\n [icon]=\"iconRight\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n</span>\r\n<cui-svg\r\n *ngIf=\"isLoaderShown\"\r\n icon=\"cuiIconLoading\"\r\n class=\"c-loader\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: { shape: "shape", disabled: "disabled", isLoaderShown: "isLoaderShown", icon: "icon", iconRight: "iconRight", appearance: "appearance", size: "size" }, host: { properties: { "attr.data-shape": "this.shape", "class._disabled": "this.disabled", "class._loading": "this.isLoaderShown", "attr.data-appearance": "this.appearance", "attr.data-size": "this.size", "class._only-icon": "this.containsOnlyIcon", "disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span\r\n class=\"c-wrapper\"\r\n [class.c-wrapper_invisible]=\"isLoaderShown\"\r\n>\r\n <cui-svg\r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n <span\r\n #content\r\n class=\"c-content\"\r\n ><ng-content></ng-content></span>\r\n <cui-svg\r\n *ngIf=\"iconRight\"\r\n [icon]=\"iconRight\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n</span>\r\n<cui-svg\r\n *ngIf=\"isLoaderShown\"\r\n icon=\"cuiIconLoading\"\r\n class=\"c-loader\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-400);color:var(--cui-gray-0);border:1px solid var(--cui-violet-400)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-400);border-color:var(--cui-violet-400)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
235
236
|
}
|
|
236
237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiButtonComponent, decorators: [{
|
|
237
238
|
type: Component,
|
|
238
|
-
args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n class=\"c-wrapper\"\r\n [class.c-wrapper_invisible]=\"isLoaderShown\"\r\n>\r\n <cui-svg\r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n <span\r\n #content\r\n class=\"c-content\"\r\n ><ng-content></ng-content></span>\r\n <cui-svg\r\n *ngIf=\"iconRight\"\r\n [icon]=\"iconRight\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n</span>\r\n<cui-svg\r\n *ngIf=\"isLoaderShown\"\r\n icon=\"cuiIconLoading\"\r\n class=\"c-loader\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
|
|
239
|
+
args: [{ selector: 'button[cuiButton], a[cuiButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n class=\"c-wrapper\"\r\n [class.c-wrapper_invisible]=\"isLoaderShown\"\r\n>\r\n <cui-svg\r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n <span\r\n #content\r\n class=\"c-content\"\r\n ><ng-content></ng-content></span>\r\n <cui-svg\r\n *ngIf=\"iconRight\"\r\n [icon]=\"iconRight\"\r\n [width]=\"iconDimensions.width\"\r\n [height]=\"iconDimensions.height\"\r\n [color]=\"iconColor\"\r\n ></cui-svg>\r\n</span>\r\n<cui-svg\r\n *ngIf=\"isLoaderShown\"\r\n icon=\"cuiIconLoading\"\r\n class=\"c-loader\"\r\n></cui-svg>\r\n", styles: [":host{padding:0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;font-weight:500;font-size:14px;line-height:20px;display:inline-block;position:relative;box-sizing:border-box;border-radius:8px;font-family:var(--cui-main-font)}:host:disabled{cursor:not-allowed}:host[data-shape=rounded]{border-radius:20px}:host[data-appearance=action]{background:var(--c-action-background);color:var(--cui-gray-0);border:1px solid var(--c-action-border-color)}@media (hover: hover){:host[data-appearance=action]:hover{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}}:host[data-appearance=action]:active{background:var(--c-action-background-hover);border-color:var(--c-action-background-hover)}:host[data-appearance=action]:disabled{background:var(--c-action-background);border-color:var(--c-action-border-color)}:host[data-appearance=action-violet]{background:var(--cui-violet-400);color:var(--cui-gray-0);border:1px solid var(--cui-violet-400)}@media (hover: hover){:host[data-appearance=action-violet]:hover{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}}:host[data-appearance=action-violet]:active{background:var(--cui-violet-500);border-color:var(--cui-violet-500)}:host[data-appearance=action-violet]:disabled{background:var(--cui-violet-400);border-color:var(--cui-violet-400)}:host[data-appearance=secondary]{background:var(--cui-base-100);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=secondary]:hover{background:var(--cui-base-200)}}:host[data-appearance=secondary]:active{background:var(--cui-base-200)}:host[data-appearance=secondary]:disabled{background:var(--cui-base-100)}:host[data-appearance=outlined]{border:1px solid var(--cui-base-200);background:var(--cui-base-0);color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=outlined]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined]:active{background:var(--cui-base-50)}:host[data-appearance=outlined]:disabled{background:var(--cui-base-0)}:host[data-appearance=outlined-gray]{border:1px solid var(--cui-base-200);background:var(--cui-base-10);color:var(--c-outlined-gray-color)}@media (hover: hover){:host[data-appearance=outlined-gray]:hover{background:var(--cui-base-50)}}:host[data-appearance=outlined-gray]:active{background:var(--cui-base-50)}:host[data-appearance=outlined-gray]:disabled{background:var(--cui-base-10)}:host[data-appearance=ghost]{color:var(--cui-base-900)}@media (hover: hover){:host[data-appearance=ghost]:hover{background:var(--cui-base-50)}}:host[data-appearance=ghost]:active{background:var(--cui-base-50)}:host[data-appearance=ghost]:disabled{background:inherit}:host[data-appearance=flat]{color:var(--cui-light-blue-600)}@media (hover: hover){:host[data-appearance=flat]:hover{background:var(--cui-base-50)}}:host[data-appearance=flat]:active{background:var(--cui-base-50)}:host[data-appearance=flat]:disabled{background:inherit}:host[data-appearance=destructive]{background:var(--cui-danger);color:var(--cui-gray-0)}@media (hover: hover){:host[data-appearance=destructive]:hover{background:var(--cui-red-600)}}:host[data-appearance=destructive]:active{background:var(--cui-red-600)}:host[data-appearance=destructive]:disabled{background:var(--cui-danger)}:host[data-appearance=link]{height:24px!important;padding:0 4px!important;color:var(--cui-info)}@media (hover: hover){:host[data-appearance=link]:hover{color:var(--cui-blue-800)}}:host[data-appearance=link]:active{color:var(--cui-blue-800)}:host[data-appearance=link]:disabled{color:var(--cui-info)}:host[data-size=xxs]{font-size:12px;line-height:14px;height:28px;padding:0 12px}:host[data-size=xxs][data-appearance=action],:host[data-size=xxs][data-appearance=outlined],:host[data-size=xxs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xxs]:has(.c-content:empty){width:28px}:host[data-size=xxs] .c-wrapper{gap:6px}:host[data-size=xs]{font-size:13px;line-height:16px;height:32px;padding:0 12px}:host[data-size=xs][data-appearance=action],:host[data-size=xs][data-appearance=outlined],:host[data-size=xs][data-appearance=outlined-gray]{padding:0 11px}:host[data-size=xs]:has(.c-content:empty){width:32px}:host[data-size=sm]{height:36px;padding:0 14px}:host[data-size=sm][data-appearance=action],:host[data-size=sm][data-appearance=outlined],:host[data-size=sm][data-appearance=outlined-gray]{padding:0 13px}:host[data-size=sm]:has(.c-content:empty){width:36px}:host[data-size=md]{height:40px;padding:0 16px}:host[data-size=md][data-appearance=action],:host[data-size=md][data-appearance=outlined],:host[data-size=md][data-appearance=outlined-gray]{padding:0 15px}:host[data-size=md]:has(.c-content:empty){width:40px}:host._disabled{opacity:.5}@media (hover: hover){:host-context([cuiTheme=dark])[data-appearance=destructive]:hover{background:var(--cui-red-300)}}:host-context([cuiTheme=dark])[data-appearance=destructive]:active{background:var(--cui-red-300)}:host-context([cuiTheme=dark])[data-appearance=destructive]:disabled{background:var(--cui-danger)}.c-content:empty{display:contents}.c-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;height:100%}.c-wrapper_invisible{opacity:0}.c-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
|
|
239
240
|
}], propDecorators: { shape: [{
|
|
240
241
|
type: Input
|
|
241
242
|
}, {
|
|
@@ -7376,12 +7377,12 @@ class CuiEditorBlockComponent {
|
|
|
7376
7377
|
if (!element) {
|
|
7377
7378
|
return;
|
|
7378
7379
|
}
|
|
7379
|
-
this.editorConfig.set({ ...this.config()
|
|
7380
|
+
this.editorConfig.set({ element, ...this.config() });
|
|
7380
7381
|
effectRef.destroy();
|
|
7381
7382
|
}, { allowSignalWrites: true });
|
|
7382
7383
|
}
|
|
7383
7384
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7384
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div class=\"wrapper\">\r\n <span class=\"title\">\r\n {{ t('DESCRIPTION') }}\r\n @if (required()) {\r\n <span class=\"title__required\">*</span>\r\n }\r\n </span>\r\n <ng-template #button>\r\n <button\r\n [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n cuiButton\r\n size=\"xxs\"\r\n type=\"button\"\r\n appearance=\"ghost\"\r\n icon=\"cuiIconMaximizeSm\"\r\n (click)=\"onToggleDescriptionModal()\"\r\n ></button>\r\n </ng-template>\r\n <cui-editor-modal\r\n [title]=\"title()\"\r\n [editorId]=\"editorId()\"\r\n [buttonTemplate]=\"button\"\r\n [config]=\"config()\"\r\n (modalClosed)=\"onToggleDescriptionModal()\"\r\n />\r\n </div>\r\n <div\r\n #editorContainer\r\n cuiContentWrapper\r\n class=\"editor\"\r\n [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n >\r\n @if (!isDescriptionModalOpen() && editorConfig()) {\r\n <cui-editor\r\n #editorComponent\r\n [editorID]=\"editorId()\"\r\n [config]=\"editorConfig()!\"\r\n (editorEmpty)=\"onDescriptionChange($event)\"\r\n />\r\n }\r\n </div>\r\n @if (required() && isDescriptionEmpty()) {\r\n <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n }\r\n</ng-container>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;
|
|
7385
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <div class=\"wrapper\">\r\n <span class=\"title\">\r\n {{ t('DESCRIPTION') }}\r\n @if (required()) {\r\n <span class=\"title__required\">*</span>\r\n }\r\n </span>\r\n <ng-template #button>\r\n <button\r\n [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n cuiButton\r\n size=\"xxs\"\r\n type=\"button\"\r\n appearance=\"ghost\"\r\n icon=\"cuiIconMaximizeSm\"\r\n (click)=\"onToggleDescriptionModal()\"\r\n ></button>\r\n </ng-template>\r\n <cui-editor-modal\r\n [title]=\"title()\"\r\n [editorId]=\"editorId()\"\r\n [buttonTemplate]=\"button\"\r\n [config]=\"config()\"\r\n (modalClosed)=\"onToggleDescriptionModal()\"\r\n />\r\n </div>\r\n <div\r\n #editorContainer\r\n cuiContentWrapper\r\n class=\"editor\"\r\n [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n >\r\n @if (!isDescriptionModalOpen() && editorConfig()) {\r\n <cui-editor\r\n #editorComponent\r\n [editorID]=\"editorId()\"\r\n [config]=\"editorConfig()!\"\r\n (editorEmpty)=\"onDescriptionChange($event)\"\r\n />\r\n }\r\n </div>\r\n @if (required() && isDescriptionEmpty()) {\r\n <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n }\r\n</ng-container>\r\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiEditorModalComponent, selector: "cui-editor-modal", inputs: ["title", "buttonTemplate", "config", "editorId"], outputs: ["editorCreated", "modalClosed"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorID", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7385
7386
|
}
|
|
7386
7387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, decorators: [{
|
|
7387
7388
|
type: Component,
|
|
@@ -7393,7 +7394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7393
7394
|
CuiContentWrapperComponent,
|
|
7394
7395
|
CuiTooltip,
|
|
7395
7396
|
CuiHintModule
|
|
7396
|
-
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n <div class=\"wrapper\">\r\n <span class=\"title\">\r\n {{ t('DESCRIPTION') }}\r\n @if (required()) {\r\n <span class=\"title__required\">*</span>\r\n }\r\n </span>\r\n <ng-template #button>\r\n <button\r\n [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n cuiButton\r\n size=\"xxs\"\r\n type=\"button\"\r\n appearance=\"ghost\"\r\n icon=\"cuiIconMaximizeSm\"\r\n (click)=\"onToggleDescriptionModal()\"\r\n ></button>\r\n </ng-template>\r\n <cui-editor-modal\r\n [title]=\"title()\"\r\n [editorId]=\"editorId()\"\r\n [buttonTemplate]=\"button\"\r\n [config]=\"config()\"\r\n (modalClosed)=\"onToggleDescriptionModal()\"\r\n />\r\n </div>\r\n <div\r\n #editorContainer\r\n cuiContentWrapper\r\n class=\"editor\"\r\n [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n >\r\n @if (!isDescriptionModalOpen() && editorConfig()) {\r\n <cui-editor\r\n #editorComponent\r\n [editorID]=\"editorId()\"\r\n [config]=\"editorConfig()!\"\r\n (editorEmpty)=\"onDescriptionChange($event)\"\r\n />\r\n }\r\n </div>\r\n @if (required() && isDescriptionEmpty()) {\r\n <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n }\r\n</ng-container>\r\n", styles: [":host{padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;
|
|
7397
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n <div class=\"wrapper\">\r\n <span class=\"title\">\r\n {{ t('DESCRIPTION') }}\r\n @if (required()) {\r\n <span class=\"title__required\">*</span>\r\n }\r\n </span>\r\n <ng-template #button>\r\n <button\r\n [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\r\n cuiButton\r\n size=\"xxs\"\r\n type=\"button\"\r\n appearance=\"ghost\"\r\n icon=\"cuiIconMaximizeSm\"\r\n (click)=\"onToggleDescriptionModal()\"\r\n ></button>\r\n </ng-template>\r\n <cui-editor-modal\r\n [title]=\"title()\"\r\n [editorId]=\"editorId()\"\r\n [buttonTemplate]=\"button\"\r\n [config]=\"config()\"\r\n (modalClosed)=\"onToggleDescriptionModal()\"\r\n />\r\n </div>\r\n <div\r\n #editorContainer\r\n cuiContentWrapper\r\n class=\"editor\"\r\n [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\r\n >\r\n @if (!isDescriptionModalOpen() && editorConfig()) {\r\n <cui-editor\r\n #editorComponent\r\n [editorID]=\"editorId()\"\r\n [config]=\"editorConfig()!\"\r\n (editorEmpty)=\"onDescriptionChange($event)\"\r\n />\r\n }\r\n </div>\r\n @if (required() && isDescriptionEmpty()) {\r\n <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\r\n }\r\n</ng-container>\r\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"] }]
|
|
7397
7398
|
}], ctorParameters: () => [] });
|
|
7398
7399
|
|
|
7399
7400
|
const cuiXNdjsonInterceptor = (request, next) => {
|
|
@@ -7886,6 +7887,7 @@ class CuiUtilityInfoComponent {
|
|
|
7886
7887
|
});
|
|
7887
7888
|
this.heading = null;
|
|
7888
7889
|
this.title = input.required();
|
|
7890
|
+
this.description = input.required();
|
|
7889
7891
|
this.framerId = input.required();
|
|
7890
7892
|
this.baseResourceUrl = input.required();
|
|
7891
7893
|
this.config = input.required();
|
|
@@ -7929,13 +7931,13 @@ class CuiUtilityInfoComponent {
|
|
|
7929
7931
|
if (!title) {
|
|
7930
7932
|
return;
|
|
7931
7933
|
}
|
|
7932
|
-
this.
|
|
7934
|
+
this.initFormSubscriptions();
|
|
7933
7935
|
this.initFrameFragments();
|
|
7934
7936
|
effectRef.destroy();
|
|
7935
7937
|
});
|
|
7936
7938
|
}
|
|
7937
|
-
|
|
7938
|
-
this.form.
|
|
7939
|
+
initFormSubscriptions() {
|
|
7940
|
+
this.form.setValue({ title: this.title(), description: this.description() }, { emitEvent: false });
|
|
7939
7941
|
this.form.statusChanges
|
|
7940
7942
|
.pipe(takeUntilDestroyed(this.destroy))
|
|
7941
7943
|
.subscribe(() => this.isFormValidChanged.emit(this.checkFormValidation()));
|
|
@@ -8049,7 +8051,7 @@ class CuiUtilityInfoComponent {
|
|
|
8049
8051
|
return !this.isDescriptionEmpty() && !this.form.invalid;
|
|
8050
8052
|
}
|
|
8051
8053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8052
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityInfoComponent, isStandalone: true, selector: "cui-utility-info", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <section class=\"content\">\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n {{ t('TITLE') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"titleId\"\r\n [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n [cuiTextFieldIsError]=\"isTitleError\"\r\n [formControl]=\"form.controls.title\"\r\n />\r\n @if (isTitleError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n {{ t('SHORT_DESCRIPTION') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"descriptionId\"\r\n cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n [cuiTextFieldIsError]=\"isDescriptionError\"\r\n [formControl]=\"form.controls.description\"\r\n />\r\n @if (isDescriptionError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <section class=\"file\">\r\n <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n <div class=\"content__upload\">\r\n <div class=\"content__upload-file\">\r\n @if (thumbnail()?.name; as fileId) {\r\n <div class=\"image\">\r\n <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n <!-- TODO: ngSrc -->\r\n <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n </div>\r\n }\r\n <div class=\"content__info\">\r\n <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n (click)=\"onSelectFile()\">\r\n {{ uploadButtonName() }}\r\n </button>\r\n @if (thumbnail()?.name) {\r\n <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n (click)=\"onRemoveThumbnail()\">\r\n {{ t('REMOVE') }}\r\n </button>\r\n }\r\n\r\n <span class=\"content__accepted\">\r\n {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n @if (editorId(); as editorId) {\r\n <cui-editor-block\r\n [title]=\"form.controls.title.value || title()\"\r\n [config]=\"config()\"\r\n [editorId]=\"editorId\"\r\n [required]=\"true\"\r\n (editorEmpty)=\"onEditorEmpty($event)\"\r\n ></cui-editor-block>\r\n }\r\n </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiAccordionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => CuiFormFieldComponent), selector: "cui-form-field" }, { kind: "ngmodule", type: i0.forwardRef(() => CuiHintModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiInputModule) }, { kind: "component", type: i0.forwardRef(() => CuiInputTextComponent), selector: "cui-input-text" }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIdDirective), selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldPlaceholderDirective), selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIsErrorDirective), selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiLabelModule) }, { kind: "component", type: i0.forwardRef(() => CuiLabelComponent), selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: i0.forwardRef(() => CuiEditorBlockComponent), selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: i0.forwardRef(() => CuiGeneralControlErrorHintComponent), selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2$1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => TranslocoDirective), selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiUtilityInfoComponent, isStandalone: true, selector: "cui-utility-info", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, framerId: { classPropertyName: "framerId", publicName: "framerId", isSignal: true, isRequired: true, transformFunction: null }, baseResourceUrl: { classPropertyName: "baseResourceUrl", publicName: "baseResourceUrl", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formChanged: "formChanged", isFormValidChanged: "isFormValidChanged" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <section class=\"content\">\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n {{ t('TITLE') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"titleId\"\r\n [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n [cuiTextFieldIsError]=\"isTitleError\"\r\n [formControl]=\"form.controls.title\"\r\n />\r\n @if (isTitleError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n {{ t('SHORT_DESCRIPTION') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"descriptionId\"\r\n cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n [cuiTextFieldIsError]=\"isDescriptionError\"\r\n [formControl]=\"form.controls.description\"\r\n />\r\n @if (isDescriptionError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <section class=\"file\">\r\n <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n <div class=\"content__upload\">\r\n <div class=\"content__upload-file\">\r\n @if (thumbnail()?.name; as fileId) {\r\n <div class=\"image\">\r\n <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n <!-- TODO: ngSrc -->\r\n <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n </div>\r\n }\r\n <div class=\"content__info\">\r\n <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n (click)=\"onSelectFile()\">\r\n {{ uploadButtonName() }}\r\n </button>\r\n @if (thumbnail()?.name) {\r\n <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n (click)=\"onRemoveThumbnail()\">\r\n {{ t('REMOVE') }}\r\n </button>\r\n }\r\n\r\n <span class=\"content__accepted\">\r\n {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n @if (editorId(); as editorId) {\r\n <cui-editor-block\r\n [title]=\"form.controls.title.value || title()\"\r\n [config]=\"config()\"\r\n [editorId]=\"editorId\"\r\n [required]=\"true\"\r\n class=\"editor\"\r\n (editorEmpty)=\"onEditorEmpty($event)\"\r\n ></cui-editor-block>\r\n }\r\n </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CuiAccordionModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiButtonModule) }, { kind: "component", type: i0.forwardRef(() => CuiButtonComponent), selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiFormFieldModule) }, { kind: "component", type: i0.forwardRef(() => CuiFormFieldComponent), selector: "cui-form-field" }, { kind: "ngmodule", type: i0.forwardRef(() => CuiHintModule) }, { kind: "ngmodule", type: i0.forwardRef(() => CuiInputModule) }, { kind: "component", type: i0.forwardRef(() => CuiInputTextComponent), selector: "cui-input-text" }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIdDirective), selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldPlaceholderDirective), selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: i0.forwardRef(() => CuiTextFieldIsErrorDirective), selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: i0.forwardRef(() => CuiLabelModule) }, { kind: "component", type: i0.forwardRef(() => CuiLabelComponent), selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "component", type: i0.forwardRef(() => CuiEditorBlockComponent), selector: "cui-editor-block", inputs: ["title", "editorId", "config", "required"], outputs: ["editorEmpty"] }, { kind: "component", type: i0.forwardRef(() => CuiGeneralControlErrorHintComponent), selector: "cui-general-control-error-hint", inputs: ["control", "isVisible"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2$1.FormControlDirective), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => TranslocoDirective), selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8053
8055
|
}
|
|
8054
8056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiUtilityInfoComponent, decorators: [{
|
|
8055
8057
|
type: Component,
|
|
@@ -8065,7 +8067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8065
8067
|
ReactiveFormsModule,
|
|
8066
8068
|
TranslocoDirective,
|
|
8067
8069
|
CuiTooltip
|
|
8068
|
-
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n <section class=\"content\">\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n {{ t('TITLE') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"titleId\"\r\n [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n [cuiTextFieldIsError]=\"isTitleError\"\r\n [formControl]=\"form.controls.title\"\r\n />\r\n @if (isTitleError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n {{ t('SHORT_DESCRIPTION') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"descriptionId\"\r\n cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n [cuiTextFieldIsError]=\"isDescriptionError\"\r\n [formControl]=\"form.controls.description\"\r\n />\r\n @if (isDescriptionError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <section class=\"file\">\r\n <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n <div class=\"content__upload\">\r\n <div class=\"content__upload-file\">\r\n @if (thumbnail()?.name; as fileId) {\r\n <div class=\"image\">\r\n <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n <!-- TODO: ngSrc -->\r\n <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n </div>\r\n }\r\n <div class=\"content__info\">\r\n <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n (click)=\"onSelectFile()\">\r\n {{ uploadButtonName() }}\r\n </button>\r\n @if (thumbnail()?.name) {\r\n <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n (click)=\"onRemoveThumbnail()\">\r\n {{ t('REMOVE') }}\r\n </button>\r\n }\r\n\r\n <span class=\"content__accepted\">\r\n {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n @if (editorId(); as editorId) {\r\n <cui-editor-block\r\n [title]=\"form.controls.title.value || title()\"\r\n [config]=\"config()\"\r\n [editorId]=\"editorId\"\r\n [required]=\"true\"\r\n (editorEmpty)=\"onEditorEmpty($event)\"\r\n ></cui-editor-block>\r\n }\r\n </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{display:block}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"] }]
|
|
8070
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n <section class=\"content\">\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"titleId\">\r\n {{ t('TITLE') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"titleId\"\r\n [cuiTextFieldPlaceholder]=\"t('ADD_TITLE')\"\r\n [cuiTextFieldIsError]=\"isTitleError\"\r\n [formControl]=\"form.controls.title\"\r\n />\r\n @if (isTitleError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.title\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <cui-form-field>\r\n <label cuiLabel [isRequired]=\"true\" [for]=\"descriptionId\">\r\n {{ t('SHORT_DESCRIPTION') }}\r\n </label>\r\n <cui-input-text\r\n [cuiTextFieldId]=\"descriptionId\"\r\n cuiTextFieldPlaceholder=\"{{t('SHORT_DESCRIPTION')}}...\"\r\n [cuiTextFieldIsError]=\"isDescriptionError\"\r\n [formControl]=\"form.controls.description\"\r\n />\r\n @if (isDescriptionError) {\r\n <cui-general-control-error-hint [control]=\"form.controls.description\" [isVisible]=\"true\" />\r\n }\r\n </cui-form-field>\r\n <section class=\"file\">\r\n <span class=\"title\">{{ t('THUMBNAIL') }}</span>\r\n <div class=\"content__upload\">\r\n <div class=\"content__upload-file\">\r\n @if (thumbnail()?.name; as fileId) {\r\n <div class=\"image\">\r\n <span class=\"image__name\">{{ thumbnail()?.name }}</span>\r\n <!-- TODO: ngSrc -->\r\n <img class=\"image__view\" [src]=\"thumbnailUrl()\" height=\"120\" width=\"184\" alt=\"Thumbnail\" />\r\n </div>\r\n }\r\n <div class=\"content__info\">\r\n <button type=\"button\" cuiButton appearance=\"outlined-gray\" size=\"xxs\" icon=\"cuiIconUpload\"\r\n (click)=\"onSelectFile()\">\r\n {{ uploadButtonName() }}\r\n </button>\r\n @if (thumbnail()?.name) {\r\n <button class=\"content__remove-button\" cuiButton appearance=\"link\" size=\"sm\" type=\"button\"\r\n (click)=\"onRemoveThumbnail()\">\r\n {{ t('REMOVE') }}\r\n </button>\r\n }\r\n\r\n <span class=\"content__accepted\">\r\n {{ t('ACCEPTED') }}: JPG, JPEG, PNG, MP4 {{ t('UP_TO') }} 20MB\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n @if (editorId(); as editorId) {\r\n <cui-editor-block\r\n [title]=\"form.controls.title.value || title()\"\r\n [config]=\"config()\"\r\n [editorId]=\"editorId\"\r\n [required]=\"true\"\r\n class=\"editor\"\r\n (editorEmpty)=\"onEditorEmpty($event)\"\r\n ></cui-editor-block>\r\n }\r\n </section>\r\n</ng-container>\r\n", styles: ["::ng-deep cui-dialog:has(.instruction-description-modal){inset:0;margin:auto;transform:none!important}:host{--editor-height: 650px;display:block}:host .editor{--max-editor-height: var(--editor-height)}.title{font-weight:500;font-size:14px;line-height:20px;display:flex;gap:2px}.title_required{color:var(--cui-danger)}.content{display:flex;flex-direction:column;gap:16px;padding:16px 24px}.content__upload{padding:12px 16px;border-radius:8px;border:1px solid var(--cui-base-200);background:var(--cui-base-10)}.content__info{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.content__accepted{color:var(--cui-base-500)}.content__upload-file{display:flex;align-items:center;gap:8px}.content__upload-file input[type=file]{display:none}.content__remove-button ::ng-deep .c-content{color:var(--cui-danger)!important}.file{display:flex;flex-direction:column;gap:4px}.description_invalid{border:1px solid var(--cui-danger)}.image{position:relative;display:inline-block}.image__view{border-radius:8px;object-fit:cover}.image__name{position:absolute;top:6px;left:14px;color:var(--cui-base-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;z-index:1}.image:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0003;z-index:0;pointer-events:none;border-radius:8px}.button-save{margin-left:auto}.instruction-description-modal{text-transform:none}.empty{padding:16px;color:var(--cui-base-500);text-align:center}\n"] }]
|
|
8069
8071
|
}], ctorParameters: () => [] });
|
|
8070
8072
|
|
|
8071
8073
|
class CuiCheckListBlockService {
|