@cuby-ui/core 0.0.141 → 0.0.143

package/fesm2020/cuby-ui-core.mjs

@@ -286,19 +286,19 @@ class CuiNotificationComponent {
         this.cuiNotificationOptions = inject(CUI_NOTIFICATION_OPTIONS);
         this.ICON_OPTIONS = {
             info: {
-                icon: 'cuiIconInfoSm',
+                icon: 'cuiIconInfo',
                 color: 'var(--c-info-icon-color)'
             },
             success: {
-                icon: 'cuiIconCheckCircleSm',
+                icon: 'cuiIconCheckCircle',
                 color: 'var(--cui-green-500)'
             },
             alert: {
-                icon: 'cuiIconAlertTriangleSm',
+                icon: 'cuiIconAlertTriangle',
                 color: 'var(--cui-yellow-400)'
             },
             error: {
-                icon: 'cuiIconXCircleSm',
+                icon: 'cuiIconXCircle',
                 color: 'var(--cui-danger)'
             },
         };
@@ -311,10 +311,10 @@ class CuiNotificationComponent {
     }
 }
 CuiNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiNotificationComponent, selector: "cui-notification", inputs: { status: "status", isCloseable: "isCloseable" }, outputs: { closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n></cui-svg>\r\n<div class=\"c-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconX\"\r\n    color=\"var(--cui-gray-0)\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;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}.c-button:hover{background:rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiNotificationComponent, selector: "cui-notification", inputs: { status: "status", isCloseable: "isCloseable" }, outputs: { closed: "closed" }, host: { properties: { "attr.data-status": "this.status" } }, ngImport: i0, template: "\r\n<cui-svg\r\n  class=\"c-icon\"\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n></cui-svg>\r\n<div class=\"c-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconX\"\r\n    color=\"var(--cui-gray-0)\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px;margin-top:5px;overflow-wrap:anywhere}.c-icon{margin-top:6px}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;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}.c-button:hover{background:rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CuiLetDirective, selector: "[cuiLet]", inputs: ["cuiLet"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-svg\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n></cui-svg>\r\n<div class=\"c-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconX\"\r\n    color=\"var(--cui-gray-0)\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px;overflow-wrap:anywhere}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;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}.c-button:hover{background:rgba(255,255,255,.2)}\n"] }]
+            args: [{ selector: 'cui-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<cui-svg\r\n  class=\"c-icon\"\r\n  *cuiLet=\"ICON_OPTIONS[status] as iconOption\"\r\n  [icon]=\"iconOption.icon\"\r\n  [color]=\"iconOption.color\"\r\n></cui-svg>\r\n<div class=\"c-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n<button\r\n  *ngIf=\"isCloseable\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose()\"\r\n>\r\n  <cui-svg\r\n    icon=\"cuiIconX\"\r\n    color=\"var(--cui-gray-0)\"\r\n  />\r\n</button>\r\n", styles: [":host{--c-info-icon-color: var(--cui-blue-600);padding:16px;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:flex-start;border-radius:12px;background:var(--cui-gray-800);color:var(--cui-gray-0);font-family:var(--cui-main-font)}:host-context([cuiTheme=dark]){--c-info-icon-color: var(--cui-light-blue-400)}:host-context([cuiTheme=dark])[data-status=info]{background:var(--cui-blue-900)}:host-context([cuiTheme=dark])[data-status=success]{background:var(--cui-green-900)}:host-context([cuiTheme=dark])[data-status=alert]{background:var(--cui-yellow-900)}:host-context([cuiTheme=dark])[data-status=error]{background:var(--cui-red-900)}.c-content{flex:1;margin-left:12px;margin-right:16px;margin-top:5px;overflow-wrap:anywhere}.c-icon{margin-top:6px}.c-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;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}.c-button:hover{background:rgba(255,255,255,.2)}\n"] }]
         }], propDecorators: { status: [{
                 type: Input
             }, {
@@ -348,10 +348,10 @@ class CuiAlertComponent {
     }
 }
 CuiAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertComponent, selector: "cui-alert", host: { properties: { "attr.data-resizing": "this.resizing" } }, ngImport: i0, template: "<cui-notification\r\n  [status]=\"context.status\"\r\n  [isCloseable]=\"context.isCloseable\"\r\n  (closed)=\"onClosed()\"\r\n>\r\n  <h2\r\n    *ngIf=\"context.label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ context.label }}\r\n  </h2>\r\n  {{ context.content }}\r\n</cui-notification>\r\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiNotificationComponent, selector: "cui-notification", inputs: ["status", "isCloseable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiAlertComponent, selector: "cui-alert", host: { properties: { "attr.data-resizing": "this.resizing" } }, ngImport: i0, template: "<cui-notification\r\n  [status]=\"context.status\"\r\n  [isCloseable]=\"context.isCloseable\"\r\n  (closed)=\"onClosed()\"\r\n>\r\n  <h2\r\n    *ngIf=\"context.label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ context.label }}\r\n  </h2>\r\n  {{ context.content }}\r\n</cui-notification>\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CuiNotificationComponent, selector: "cui-notification", inputs: ["status", "isCloseable"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-notification\r\n  [status]=\"context.status\"\r\n  [isCloseable]=\"context.isCloseable\"\r\n  (closed)=\"onClosed()\"\r\n>\r\n  <h2\r\n    *ngIf=\"context.label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ context.label }}\r\n  </h2>\r\n  {{ context.content }}\r\n</cui-notification>\r\n", styles: [":host{max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"] }]
+            args: [{ selector: 'cui-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-notification\r\n  [status]=\"context.status\"\r\n  [isCloseable]=\"context.isCloseable\"\r\n  (closed)=\"onClosed()\"\r\n>\r\n  <h2\r\n    *ngIf=\"context.label\"\r\n    class=\"c-heading\"\r\n  >\r\n    {{ context.label }}\r\n  </h2>\r\n  {{ context.content }}\r\n</cui-notification>\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;max-width:470px}:host[data-resizing=hug]{width:-moz-fit-content;width:fit-content}:host[data-resizing=fixed]{width:470px}.c-heading{font-weight:500;font-size:14px;line-height:20px;margin:0 0 8px}\n"] }]
         }], propDecorators: { resizing: [{
                 type: HostBinding,
                 args: ['attr.data-resizing']
@@ -875,10 +875,10 @@ class CuiDialogHeaderComponent {
     }
 }
 CuiDialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CuiDialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogHeaderComponent, selector: "header[cuiDialogHeader][heading]", inputs: { heading: "heading", headingContext: "headingContext", subheading: "subheading" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"c-heading\">\r\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\r\n</div>\r\n<button\r\n  cuiButton\r\n  type=\"button\"\r\n  appearance=\"ghost\"\r\n  icon=\"cuiIconClearSm\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose($event)\"\r\n></button>\r\n<span *ngIf=\"subheading\">{{ subheading }}</span>\r\n<ng-content />\r\n", styles: [":host{padding:16px 24px;font-weight:500;font-size:14px;line-height:20px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CuiDialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CuiDialogHeaderComponent, selector: "header[cuiDialogHeader][heading]", inputs: { heading: "heading", headingContext: "headingContext", subheading: "subheading" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"c-heading\">\r\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\r\n</div>\r\n<button\r\n  cuiButton\r\n  type=\"button\"\r\n  appearance=\"ghost\"\r\n  icon=\"cuiIconClearSm\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose($event)\"\r\n></button>\r\n<span *ngIf=\"subheading\">{{ subheading }}</span>\r\n<ng-content />\r\n", styles: [":host{padding:16px 24px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiDialogHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'header[cuiDialogHeader][heading]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-heading\">\r\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\r\n</div>\r\n<button\r\n  cuiButton\r\n  type=\"button\"\r\n  appearance=\"ghost\"\r\n  icon=\"cuiIconClearSm\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose($event)\"\r\n></button>\r\n<span *ngIf=\"subheading\">{{ subheading }}</span>\r\n<ng-content />\r\n", styles: [":host{padding:16px 24px;font-weight:500;font-size:14px;line-height:20px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"] }]
+            args: [{ selector: 'header[cuiDialogHeader][heading]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-heading\">\r\n  <ng-container *polymorpheusOutlet=\"heading as heading; context: headingContext\">{{ heading }}</ng-container>\r\n</div>\r\n<button\r\n  cuiButton\r\n  type=\"button\"\r\n  appearance=\"ghost\"\r\n  icon=\"cuiIconClearSm\"\r\n  class=\"c-button\"\r\n  (click)=\"onClose($event)\"\r\n></button>\r\n<span *ngIf=\"subheading\">{{ subheading }}</span>\r\n<ng-content />\r\n", styles: [":host{padding:16px 24px;position:relative;display:flex;flex-direction:column;gap:4px;font-family:var(--cui-main-font);color:var(--cui-base-500)}.c-heading{font-weight:500;font-size:16px;line-height:24px;width:calc(100% - 36px);color:var(--cui-base-900)}.c-button{position:absolute;top:12px;right:12px}\n"] }]
         }], propDecorators: { heading: [{
                 type: Input
             }], headingContext: [{