@ng-nest/ui 17.0.12 → 18.0.1

package/fesm2022/ng-nest-ui-button.mjs

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, Input, inject, Renderer2, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ChangeDetectorRef, ViewChild, NgModule } from '@angular/core';
-import { XProperty, XWithConfig, XInputBoolean, XInputNumber, XConfigService, XIsChange, XClearClass, XIsEmpty } from '@ng-nest/ui/core';
-import { of, delay } from 'rxjs';
-import { __decorate } from 'tslib';
+import { input, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, viewChild, ElementRef, inject, signal, computed, afterRender, NgModule } from '@angular/core';
+import { XPropertyFunction, XToNumber, XToBoolean, XToCssPixelValue, XIsEmpty } from '@ng-nest/ui/core';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XRippleDirective } from '@ng-nest/ui/ripple';
 import { NgClass } from '@angular/common';
+import { FocusMonitor } from '@angular/cdk/a11y';
 
 /**
  * Button
@@ -13,241 +12,443 @@ import { NgClass } from '@angular/common';
  * @decorator component
  */
 const XButtonPrefix = 'x-button';
-const X_CONFIG_NAME = 'button';
+const X_BUTTON_CONFIG_NAME = 'button';
 /**
  * Button Property
  */
-class XButtonProperty extends XProperty {
+class XButtonProperty extends XPropertyFunction(X_BUTTON_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 按钮类型
+         * @en_US Button type
+         * @example
+         *
+         * ```html
+         * <x-button>Initial</x-button>
+         * <x-button type="primary">Primary</x-button>
+         * <x-button type="success">Success</x-button>
+         * <x-button type="warning">Warning</x-button>
+         * <x-button type="danger">Danger</x-button>
+         * <x-button type="info">Info</x-button>
+         * <x-button [type]="'primary'">Primary</x-button>
+         * ```
+         *
+         */
+        this.type = input(this.config?.type ?? 'initial');
+        /**
+         * @zh_CN 图标
+         * @en_US Icon
+         * @example
+         *
+         * ```html
+         * <x-button icon="fto-edit"></x-button>
+         * <x-button icon="fto-edit">Edit</x-button>
+         * <x-button [icon]="'fto-edit'">Edit</x-button>
+         * ```
+         *
+         */
+        this.icon = input('');
         /**
          * @zh_CN 提示
          * @en_US Title
+         * @example
+         *
+         * ```html
+         * <x-button title="information"></x-button>
+         * <x-button [title]="'information'"></x-button>
+         * ```
+         *
          */
-        this.title = '';
+        this.title = input('');
         /**
-         * @zh_CN 布局方式
-         * @en_US Layout
+         * @zh_CN 按钮中元素的布局方式
+         * @en_US Button elements in the layout
+         * @example
+         *
+         * ```html
+         * <x-button direction="column" icon="edit">Button</x-button>
+         * <x-button direction="column-reverse" icon="edit">Button</x-button>
+         * <x-button direction="row" icon="edit">Button</x-button>
+         * <x-button direction="row-reverse" icon="edit">Button</x-button>
+         * <x-button [direction]="row" icon="edit">Button</x-button>
+         * ```
+         *
          */
-        this.direction = 'row';
+        this.direction = input('row');
         /**
          * @zh_CN tab 键控制次序
          * @en_US Tab key control order
+         * @example
+         *
+         * ```html
+         * <x-button tabindex="0"></x-button>
+         * <x-button [tabindex]="0"></x-button>
+         * ```
+         *
+         */
+        this.tabindex = input(0, { transform: XToNumber });
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         * @example
+         *
+         * ```html
+         * <x-button size="big">Big</x-button>
+         * <x-button size="large">Large</x-button>
+         * <x-button size="medium">Medium</x-button>
+         * <x-button size="small">Small</x-button>
+         * <x-button size="mini">Mini</x-button>
+         * <x-button [size]="'medium'">Medium</x-button>
+         * ```
+         *
+         */
+        this.size = input(this.config?.size ?? 'medium');
+        /**
+         * @zh_CN 仅显示图标
+         * @en_US Icon only
+         * @example
+         *
+         * ```html
+         * <x-button icon="fto-edit" onlyIcon></x-button>
+         * <x-button icon="fto-edit" onlyIcon="true"></x-button>
+         * <x-button icon="fto-edit" [onlyIcon]="true"></x-button>
+         * ```
+         *
          */
-        this.tabindex = 0;
+        this.onlyIcon = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 激活的按钮（样式差异）
+         * @en_US Active button (style difference)
+         * @example
+         *
+         * ```html
+         * <x-button activated>Button</x-button>
+         * <x-button activated="true">Button</x-button>
+         * <x-button [activated]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.activated = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 禁用按钮
+         * @en_US Disable button
+         * @example
+         *
+         * ```html
+         * <x-button disabled>Button</x-button>
+         * <x-button disabled="true">Button</x-button>
+         * <x-button [disabled]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.disabled = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 朴素按钮
+         * @en_US Plain button
+         * @example
+         *
+         * ```html
+         * <x-button plain>Button</x-button>
+         * <x-button plain="true">Button</x-button>
+         * <x-button [plain]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.plain = input(this.config?.plain ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 平铺按钮
+         * @en_US Flat button
+         * @example
+         *
+         * ```html
+         * <x-button flat>Button</x-button>
+         * <x-button flat="true">Button</x-button>
+         * <x-button [flat]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.flat = input(this.config?.flat ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 文字按钮
+         * @en_US Text button
+         * @example
+         *
+         * ```html
+         * <x-button text>Button</x-button>
+         * <x-button text="true">Button</x-button>
+         * <x-button [text]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.text = input(this.config?.text ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 圆角按钮
+         * @en_US Round button
+         * @example
+         *
+         * ```html
+         * <x-button round>Button</x-button>
+         * <x-button round="true">Button</x-button>
+         * <x-button [round]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.round = input(this.config?.round ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 圆型按钮（配合图标来使用）
+         * @en_US Round button (use with icon)
+         * @example
+         *
+         * ```html
+         * <x-button circle>Button</x-button>
+         * <x-button circle="true">Button</x-button>
+         * <x-button [circle]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.circle = input(this.config?.circle ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 加载中
+         * @en_US Loading
+         * @example
+         *
+         * ```html
+         * <x-button loading>Button</x-button>
+         * <x-button loading="true">Button</x-button>
+         * <x-button [loading]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.loading = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 关闭按钮
+         * @en_US Close button
+         * @example
+         *
+         * ```html
+         * <x-button closable>Button</x-button>
+         * <x-button closable="true">Button</x-button>
+         * <x-button [closable]="true">Button</x-button>
+         * ```
+         *
+         */
+        this.closable = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 按钮类型属性 submit, button, reset
+         * @en_US Button type attribute. submit, button, reset
+         * @example
+         *
+         * ```html
+         * <x-button attrType="button">Button</x-button>
+         * <x-button attrType="submit">Button</x-button>
+         * <x-button attrType="reset">Button</x-button>
+         * ```
+         *
+         */
+        this.attrType = input(this.config?.attrType ?? 'button');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XButtonProperty, selector: "x-button-property", inputs: { type: "type", icon: "icon", title: "title", direction: "direction", tabindex: "tabindex", size: "size", onlyIcon: "onlyIcon", activated: "activated", disabled: "disabled", plain: "plain", round: "round", circle: "circle", loading: "loading", closable: "closable", attrType: "attrType" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XButtonProperty, selector: "x-button-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, activated: { classPropertyName: "activated", publicName: "activated", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, attrType: { classPropertyName: "attrType", publicName: "attrType", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'initial')
-], XButtonProperty.prototype, "type", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XButtonProperty.prototype, "size", void 0);
-__decorate([
-    XInputBoolean()
-], XButtonProperty.prototype, "onlyIcon", void 0);
-__decorate([
-    XInputBoolean()
-], XButtonProperty.prototype, "activated", void 0);
-__decorate([
-    XInputBoolean()
-], XButtonProperty.prototype, "disabled", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME),
-    XInputBoolean()
-], XButtonProperty.prototype, "plain", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME),
-    XInputBoolean()
-], XButtonProperty.prototype, "round", void 0);
-__decorate([
-    XInputBoolean()
-], XButtonProperty.prototype, "circle", void 0);
-__decorate([
-    XInputBoolean()
-], XButtonProperty.prototype, "loading", void 0);
-__decorate([
-    XInputBoolean()
-], XButtonProperty.prototype, "closable", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'button')
-], XButtonProperty.prototype, "attrType", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XButtonPrefix}-property`, template: '' }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], onlyIcon: [{
-                type: Input
-            }], activated: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], plain: [{
-                type: Input
-            }], round: [{
-                type: Input
-            }], circle: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], attrType: [{
-                type: Input
-            }] } });
+        }] });
 /**
  * Buttons
  * @selector x-buttons
  * @decorator component
  */
 const XButtonsPrefix = 'x-buttons';
-const X_CONFIG_NAME_BUTTONS = 'buttons';
+const X_BUTTONS_CONFIG_NAME = 'buttons';
 /**
  * Buttons Property
  */
-class XButtonsProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XButtonsProperty, selector: "x-buttons-property", inputs: { space: "space", hiddenBorder: "hiddenBorder" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+class XButtonsProperty extends XPropertyFunction(X_BUTTONS_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 按钮间距
+         * @en_US Button spacing
+         * @example
+         *
+         * ```html
+         * // ex: 10,'10px','1rem'
+         * <x-buttons space="1rem">
+         *  <x-button>Button1</button>
+         *  <x-button>Button2</button>
+         * </x-buttons>
+         * ```
+         *
+         */
+        this.space = input(this.config?.space ?? '', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 隐藏边框
+         * @en_US Hide border
+         * @example
+         *
+         * ```html
+         * <x-buttons hiddenBorder>
+         *  <x-button>Button1</button>
+         *  <x-button>Button2</button>
+         * </x-buttons>
+         * ```
+         *
+         */
+        this.hiddenBorder = input(this.config?.hiddenBorder ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 显示阴影
+         * @en_US show box shadow
+         * @example
+         *
+         * ```html
+         * <x-buttons boxShadow>
+         *  <x-button>Button1</button>
+         *  <x-button>Button2</button>
+         * </x-buttons>
+         * ```
+         *
+         */
+        this.boxShadow = input(this.config?.boxShadow ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 圆角按钮
+         * @en_US Round button
+         * @example
+         *
+         * ```html
+         * <x-buttons round>
+         *  <x-button>Button1</button>
+         *  <x-button>Button2</button>
+         * </x-buttons>
+         * ```
+         *
+         */
+        this.round = input(this.config?.round ?? false, { transform: XToBoolean });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XButtonsProperty, selector: "x-buttons-property", inputs: { space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, hiddenBorder: { classPropertyName: "hiddenBorder", publicName: "hiddenBorder", isSignal: true, isRequired: false, transformFunction: null }, boxShadow: { classPropertyName: "boxShadow", publicName: "boxShadow", isSignal: true, isRequired: false, transformFunction: null }, round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME_BUTTONS, 0),
-    XInputNumber()
-], XButtonsProperty.prototype, "space", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME_BUTTONS),
-    XInputBoolean()
-], XButtonsProperty.prototype, "hiddenBorder", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonsProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonsProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XButtonsPrefix}-property`, template: '' }]
-        }], propDecorators: { space: [{
-                type: Input
-            }], hiddenBorder: [{
-                type: Input
-            }] } });
+        }] });
 
 class XButtonsComponent extends XButtonsProperty {
     constructor() {
         super(...arguments);
-        this.renderer = inject(Renderer2);
-        this.elementRef = inject(ElementRef);
-        this.configService = inject(XConfigService);
+        this.className = XButtonsPrefix;
     }
     get getSpace() {
-        return this.space;
+        return !!this.space();
     }
     get getHiddenBorder() {
-        return this.hiddenBorder;
+        return this.hiddenBorder();
+    }
+    get getBoxShadow() {
+        return this.boxShadow();
     }
-    ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, XButtonsPrefix);
-        this.setSpace();
+    get getRound() {
+        return this.round();
     }
-    setSpace() {
-        if (!this.space)
-            return;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'margin-left', `-${Number(this.space) / 2}rem`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `-${Number(this.space) / 2}rem`);
+    get getMarginLeft() {
+        return '-' + this.space();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XButtonsComponent, isStandalone: true, selector: "x-buttons", host: { properties: { "class.x-buttons-space": "this.getSpace", "class.x-buttons-hiddenBorder": "this.getHiddenBorder" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}.x-buttons{margin:0;padding:0;display:inline-flex;position:relative}.x-buttons:not(.x-buttons-space)>x-button .x-button{border-left-width:var(--x-border-width);border-right-width:var(--x-border-width);border-radius:0;position:relative}.x-buttons:not(.x-buttons-space)>x-button .x-button-round{border-radius:0}.x-buttons:not(.x-buttons-space)>x-button .x-button:focus,.x-buttons:not(.x-buttons-space)>x-button .x-button-activated{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:not(:first-child) .x-button{margin-left:-1px}.x-buttons:not(.x-buttons-space)>x-button:hover{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:active{z-index:2}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button-round{border-top-left-radius:5rem;border-bottom-left-radius:5rem}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:.125rem;border-bottom-right-radius:.125rem}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button-round{border-top-right-radius:5rem;border-bottom-right-radius:5rem}.x-buttons-hiddenBorder>x-button .x-button{border:0;padding:0 .4rem;background-color:transparent}.x-buttons-hiddenBorder>x-button .x-button-icon{padding:.2rem .4rem}.x-buttons-hiddenBorder>x-button .x-button-icon>.x-icon{font-size:1.125rem}.x-buttons-hiddenBorder>x-button .x-button-icon:hover{color:var(--x-primary)}.x-buttons>x-button:not(:first-child)>.x-button-primary{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-success{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-warning{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-danger{border-left-color:#fff3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    get getMarginRight() {
+        return '-' + this.space();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: XButtonsComponent, isStandalone: true, selector: "x-buttons", host: { properties: { "class": "this.className", "class.x-buttons-space": "this.getSpace", "class.x-buttons-hiddenBorder": "this.getHiddenBorder", "class.x-buttons-box-shadow": "this.getBoxShadow", "class.x-buttons-round": "this.getRound", "style.marginLeft": "this.getMarginLeft", "style.marginRight": "this.getMarginRight" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}.x-buttons{margin:0;padding:0;display:inline-flex;position:relative}.x-buttons:not(.x-buttons-space)>x-button .x-button{border-radius:0;position:relative;box-shadow:none!important}.x-buttons:not(.x-buttons-space)>x-button .x-button-round{border-radius:0}.x-buttons:not(.x-buttons-space)>x-button .x-button:focus,.x-buttons:not(.x-buttons-space)>x-button .x-button-activated{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:hover{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:active{z-index:2}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button-round{border-top-left-radius:5rem;border-bottom-left-radius:5rem}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button-round{border-top-right-radius:5rem;border-bottom-right-radius:5rem}.x-buttons-hiddenBorder>x-button .x-button{border:none;padding:0 var(--x-padding-small);background-color:transparent;box-shadow:none!important}.x-buttons-hiddenBorder>x-button .x-button-icon>.x-icon{font-size:1.125rem}.x-buttons-hiddenBorder>x-button .x-button-icon:hover{color:var(--x-primary)}.x-buttons-box-shadow:not(.x-buttons-space){border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow)}.x-buttons-round:not(.x-buttons-space){border-radius:5rem}.x-buttons>x-button:not(:first-child)>.x-button-primary{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-success{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-warning{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-danger{border-left-color:#fff3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XButtonsPrefix}`, standalone: true, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}.x-buttons{margin:0;padding:0;display:inline-flex;position:relative}.x-buttons:not(.x-buttons-space)>x-button .x-button{border-left-width:var(--x-border-width);border-right-width:var(--x-border-width);border-radius:0;position:relative}.x-buttons:not(.x-buttons-space)>x-button .x-button-round{border-radius:0}.x-buttons:not(.x-buttons-space)>x-button .x-button:focus,.x-buttons:not(.x-buttons-space)>x-button .x-button-activated{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:not(:first-child) .x-button{margin-left:-1px}.x-buttons:not(.x-buttons-space)>x-button:hover{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:active{z-index:2}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button-round{border-top-left-radius:5rem;border-bottom-left-radius:5rem}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:.125rem;border-bottom-right-radius:.125rem}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button-round{border-top-right-radius:5rem;border-bottom-right-radius:5rem}.x-buttons-hiddenBorder>x-button .x-button{border:0;padding:0 .4rem;background-color:transparent}.x-buttons-hiddenBorder>x-button .x-button-icon{padding:.2rem .4rem}.x-buttons-hiddenBorder>x-button .x-button-icon>.x-icon{font-size:1.125rem}.x-buttons-hiddenBorder>x-button .x-button-icon:hover{color:var(--x-primary)}.x-buttons>x-button:not(:first-child)>.x-button-primary{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-success{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-warning{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-danger{border-left-color:#fff3}\n"] }]
-        }], propDecorators: { getSpace: [{
+            args: [{ selector: `${XButtonsPrefix}`, standalone: true, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}.x-buttons{margin:0;padding:0;display:inline-flex;position:relative}.x-buttons:not(.x-buttons-space)>x-button .x-button{border-radius:0;position:relative;box-shadow:none!important}.x-buttons:not(.x-buttons-space)>x-button .x-button-round{border-radius:0}.x-buttons:not(.x-buttons-space)>x-button .x-button:focus,.x-buttons:not(.x-buttons-space)>x-button .x-button-activated{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:hover{z-index:1}.x-buttons:not(.x-buttons-space)>x-button:active{z-index:2}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button{border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius)}.x-buttons:not(.x-buttons-space)>x-button:first-child .x-button-round{border-top-left-radius:5rem;border-bottom-left-radius:5rem}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button{border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-buttons:not(.x-buttons-space)>x-button:last-child .x-button-round{border-top-right-radius:5rem;border-bottom-right-radius:5rem}.x-buttons-hiddenBorder>x-button .x-button{border:none;padding:0 var(--x-padding-small);background-color:transparent;box-shadow:none!important}.x-buttons-hiddenBorder>x-button .x-button-icon>.x-icon{font-size:1.125rem}.x-buttons-hiddenBorder>x-button .x-button-icon:hover{color:var(--x-primary)}.x-buttons-box-shadow:not(.x-buttons-space){border-radius:var(--x-border-radius);box-shadow:var(--x-box-shadow)}.x-buttons-round:not(.x-buttons-space){border-radius:5rem}.x-buttons>x-button:not(:first-child)>.x-button-primary{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-success{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-warning{border-left-color:#fff3}.x-buttons>x-button:not(:first-child)>.x-button-danger{border-left-color:#fff3}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], getSpace: [{
                 type: HostBinding,
                 args: ['class.x-buttons-space']
             }], getHiddenBorder: [{
                 type: HostBinding,
                 args: ['class.x-buttons-hiddenBorder']
+            }], getBoxShadow: [{
+                type: HostBinding,
+                args: ['class.x-buttons-box-shadow']
+            }], getRound: [{
+                type: HostBinding,
+                args: ['class.x-buttons-round']
+            }], getMarginLeft: [{
+                type: HostBinding,
+                args: ['style.marginLeft']
+            }], getMarginRight: [{
+                type: HostBinding,
+                args: ['style.marginRight']
             }] } });
 
 class XButtonComponent extends XButtonProperty {
-    constructor() {
-        super(...arguments);
-        this.transition = false;
-        this.buttons = inject(XButtonsComponent, { optional: true, host: true });
-        this.cdr = inject(ChangeDetectorRef);
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.configService = inject(XConfigService);
+    get marginLeft() {
+        return this.buttons?.space();
     }
-    ngOnInit() {
-        this.setSpace();
-        this.setClassMap();
+    get marginRight() {
+        return this.buttons?.space();
     }
-    ngOnChanges(changes) {
-        const { loading, disabled, activated, type, plain, size, direction } = changes;
-        XIsChange(loading, disabled) && this.setDisabled();
-        XIsChange(activated) && this.cdr.detectChanges();
-        XIsChange(type, plain, size, direction) && this.setClassMap();
+    get pointerEvents() {
+        return this.disabledComputed() ? 'none' : '';
     }
-    setClassMap() {
-        XClearClass(this.classMap);
-        this.classMap = {
-            [`${XButtonPrefix}-${this.type}`]: !XIsEmpty(this.type) && XIsEmpty(this.plain),
-            [`${XButtonPrefix}-${this.type}-plain`]: !XIsEmpty(this.type) && !XIsEmpty(this.plain),
-            [`${XButtonPrefix}-plain`]: XIsEmpty(this.type) && !XIsEmpty(this.plain),
-            [`x-size-${this.size}`]: !XIsEmpty(this.size),
-            [`x-direction-${this.direction}`]: !XIsEmpty(this.direction)
-        };
-        if (!this.transition)
-            of(true)
-                .pipe(delay(0))
-                .subscribe(() => {
-                this.transition = true;
-                this.cdr.detectChanges();
-            });
-        this.cdr.detectChanges();
+    constructor() {
+        super();
+        this.buttonRef = viewChild.required('buttonRef', { read: (ElementRef) });
+        this.buttons = inject(XButtonsComponent, { optional: true, host: true });
+        this.focusMontitor = inject(FocusMonitor);
+        this.transition = signal(false);
+        this.classMap = computed(() => ({
+            [`${XButtonPrefix}-${this.type()}`]: !XIsEmpty(this.type()) && !this.plain(),
+            [`${XButtonPrefix}-${this.type()}-plain`]: !XIsEmpty(this.type()) && this.plain(),
+            [`${XButtonPrefix}-${this.type()}-text`]: !XIsEmpty(this.type()) && this.text(),
+            [`${XButtonPrefix}-${this.type()}-flat`]: !XIsEmpty(this.type()) && this.flat(),
+            [`x-size-${this.size()}`]: !XIsEmpty(this.size()),
+            [`x-direction-${this.direction()}`]: !XIsEmpty(this.direction())
+        }));
+        this.roundSignal = computed(() => {
+            return this.buttons?.round() || this.round();
+        });
+        this.disabledComputed = computed(() => {
+            return this.loading() || this.disabled();
+        });
+        afterRender(() => {
+            this.transition.set(true);
+        });
     }
-    setSpace() {
-        if (!this.buttons?.space)
-            return;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'margin-left', `${Number(this.buttons.space) / 2}rem`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `${Number(this.buttons.space) / 2}rem`);
+    ngAfterViewInit() {
+        this.focusMontitor.monitor(this.buttonRef(), true);
     }
-    setDisabled() {
-        if (this.loading || this.disabled) {
-            this.renderer.setStyle(this.elementRef.nativeElement, 'pointer-events', 'none');
-            this.renderer.setStyle(this.buttonRef?.nativeElement, 'disabled', 'none');
-        }
-        else {
-            this.renderer.removeStyle(this.elementRef.nativeElement, 'pointer-events');
-            this.renderer.removeStyle(this.buttonRef?.nativeElement, 'disabled');
-        }
-        this.cdr.detectChanges();
+    ngOnDestroy() {
+        this.focusMontitor.stopMonitoring(this.buttonRef());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XButtonComponent, isStandalone: true, selector: "x-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\r\n  #buttonRef\r\n  class=\"x-button\"\r\n  [tabindex]=\"tabindex\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-button-only-icon]=\"onlyIcon\"\r\n  [class.x-button-activated]=\"activated\"\r\n  [class.x-button-disabled]=\"disabled\"\r\n  [class.x-button-round]=\"round\"\r\n  [class.x-button-circle]=\"circle\"\r\n  [class.x-button-icon]=\"icon && !content.innerHTML.trim()\"\r\n  [class.x-button-icon-not-content]=\"icon && content.innerHTML.trim() === ''\"\r\n  [class.x-button-closable]=\"closable\"\r\n  [class.x-button-transition]=\"transition\"\r\n  [title]=\"title\"\r\n  x-ripple\r\n  [type]=\"type\"\r\n  [disabled]=\"disabled\"\r\n  [attr.type]=\"attrType\"\r\n>\r\n  @if (direction === 'row' && icon && !loading) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n  @if (loading) {\r\n    <span class=\"x-button-loading\">\r\n      <svg class=\"x-button-circular\" viewBox=\"25 25 50 50\">\r\n        <circle class=\"x-button-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n      </svg>\r\n    </span>\r\n  }\r\n  <span #content><ng-content></ng-content></span>\r\n  @if (direction === 'row-reverse' && icon && !loading) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n</button>\r\n", styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}x-button{display:inline-block;line-height:initial}.x-button{margin:0;padding:0;position:relative;border:var(--x-border-width) solid;border-radius:var(--x-border-radius);font-size:var(--x-font-size-small);text-align:center;background-clip:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;touch-action:manipulation;will-change:color,background-color,border}.x-button:focus{outline:none}.x-button>.x-icon{font-size:1rem;vertical-align:-.1875rem}.x-button.x-direction-row>.x-icon{margin-right:.25rem;margin-left:-.25rem}.x-button.x-direction-row-reverse>.x-icon{margin-right:-.25rem;margin-left:.25rem}.x-button-icon.x-direction-row>.x-icon,.x-button-icon.x-direction-row-reverse>.x-icon{margin-right:0;margin-left:0}.x-button-loading{margin-right:.25rem;margin-left:-.25rem;font-size:1rem;vertical-align:-.1875rem}.x-button-circular{width:1rem;height:1rem;animation:loading-rotate 2s linear infinite}.x-button-path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke-linecap:round}.x-button-transition{transition:color var(--x-animation-duration-base) ease-in-out,background-color var(--x-animation-duration-base) ease-in-out,border var(--x-animation-duration-base) ease-in-out}.x-button-disabled{transform:none!important}.x-button-round{border-radius:5rem}.x-button-circle{border-radius:50%;padding:0!important;width:1.675rem}.x-button-circle .x-button-loading,.x-button-icon-not-content .x-button-loading{margin-right:0;margin-left:0}.x-button-only-icon,.x-button-only-icon.x-button-initial,.x-button-text{border:none;background-color:transparent;box-shadow:none}.x-button-only-icon:focus,.x-button-only-icon:hover,.x-button-only-icon:active,.x-button-only-icon.x-button-initial:focus,.x-button-only-icon.x-button-initial:hover,.x-button-only-icon.x-button-initial:active,.x-button-text:focus,.x-button-text:hover,.x-button-text:active{color:var(--x-primary);background-color:#0000001a;border-color:transparent}.x-button-only-icon:focus .x-button-path,.x-button-only-icon:hover .x-button-path,.x-button-only-icon:active .x-button-path,.x-button-only-icon.x-button-initial:focus .x-button-path,.x-button-only-icon.x-button-initial:hover .x-button-path,.x-button-only-icon.x-button-initial:active .x-button-path,.x-button-text:focus .x-button-path,.x-button-text:hover .x-button-path,.x-button-text:active .x-button-path{stroke:var(--x-primary)}.x-button-closable{color:var(--x-text-400)}.x-button-closable:hover{color:var(--x-text-300)}.x-button-disabled.x-button-activated.x-button-initial{color:var(--x-primary-700);cursor:not-allowed;background-image:none;background-color:var(--x-background);border-color:var(--x-primary-700);box-shadow:none}.x-button-disabled.x-button-activated.x-button-initial:hover,.x-button-disabled.x-button-activated.x-button-initial:active,.x-button-disabled.x-button-activated.x-button-initial:focus{color:var(--x-primary-700);background-color:var(--x-background);border-color:var(--x-primary-700)}.x-button-disabled.x-button-activated.x-button-initial:active .x-button-inner{transform:none}.x-button-disabled.x-button-activated.x-button-initial:hover,.x-button-disabled.x-button-activated.x-button-initial:active{color:var(--x-primary-700);cursor:not-allowed;background-image:none;background-color:var(--x-background);border-color:var(--x-primary-700);box-shadow:none}.x-button-disabled.x-button-activated.x-button-initial:hover:hover,.x-button-disabled.x-button-activated.x-button-initial:hover:active,.x-button-disabled.x-button-activated.x-button-initial:hover:focus,.x-button-disabled.x-button-activated.x-button-initial:active:hover,.x-button-disabled.x-button-activated.x-button-initial:active:active,.x-button-disabled.x-button-activated.x-button-initial:active:focus{color:var(--x-primary-700);background-color:var(--x-background);border-color:var(--x-primary-700)}.x-button-disabled.x-button-activated.x-button-initial:hover:active .x-button-inner,.x-button-disabled.x-button-activated.x-button-initial:active:active .x-button-inner{transform:none}.x-button-disabled.x-button-text,.x-button-disabled.x-button-only-icon{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:transparent;box-shadow:none}.x-button-disabled.x-button-text:hover,.x-button-disabled.x-button-text:active,.x-button-disabled.x-button-text:focus,.x-button-disabled.x-button-only-icon:hover,.x-button-disabled.x-button-only-icon:active,.x-button-disabled.x-button-only-icon:focus{color:var(--x-text-400);background-color:transparent;border-color:transparent}.x-button-disabled.x-button-text:active .x-button-inner,.x-button-disabled.x-button-only-icon:active .x-button-inner{transform:none}.x-button-disabled.x-button-text:hover,.x-button-disabled.x-button-text:active,.x-button-disabled.x-button-only-icon:hover,.x-button-disabled.x-button-only-icon:active{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:transparent;box-shadow:none}.x-button-disabled.x-button-text:hover:hover,.x-button-disabled.x-button-text:hover:active,.x-button-disabled.x-button-text:hover:focus,.x-button-disabled.x-button-text:active:hover,.x-button-disabled.x-button-text:active:active,.x-button-disabled.x-button-text:active:focus,.x-button-disabled.x-button-only-icon:hover:hover,.x-button-disabled.x-button-only-icon:hover:active,.x-button-disabled.x-button-only-icon:hover:focus,.x-button-disabled.x-button-only-icon:active:hover,.x-button-disabled.x-button-only-icon:active:active,.x-button-disabled.x-button-only-icon:active:focus{color:var(--x-text-400);background-color:transparent;border-color:transparent}.x-button-disabled.x-button-text:hover:active .x-button-inner,.x-button-disabled.x-button-text:active:active .x-button-inner,.x-button-disabled.x-button-only-icon:hover:active .x-button-inner,.x-button-disabled.x-button-only-icon:active:active .x-button-inner{transform:none}.x-button.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-button.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-button.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-button.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-button.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-button-initial{color:var(--x-text);background-color:var(--x-background);border-color:var(--x-border)}.x-button-initial .x-button-path{stroke:var(--x-text)}.x-button-initial:hover{color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary)}.x-button-initial:hover .x-button-path{stroke:var(--x-primary)}.x-button-initial:active{color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary)}.x-button-initial:active .x-button-path{stroke:var(--x-primary)}.x-button-initial:focus{color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary);box-shadow:var(--x-box-shadow-focus)}.x-button-initial:focus .x-button-path{stroke:var(--x-primary)}.x-button-initial.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-200);border-color:var(--x-border);box-shadow:none}.x-button-initial.x-button-disabled:hover,.x-button-initial.x-button-disabled:active,.x-button-initial.x-button-disabled:focus{color:var(--x-text-400);background-color:var(--x-background-200);border-color:var(--x-border)}.x-button-initial.x-button-disabled:active .x-button-inner{transform:none}.x-button-initial-plain{color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border)}.x-button-initial-plain .x-button-path{stroke:var(--x-text)}.x-button-initial-plain:hover{color:var(--x-primary);background-color:var(--x-background-a200);border-color:var(--x-primary)}.x-button-initial-plain:hover .x-button-path{stroke:var(--x-primary)}.x-button-initial-plain:active{color:var(--x-primary-a100);background-color:var(--x-background-a200);border-color:var(--x-primary-a100)}.x-button-initial-plain:active .x-button-path{stroke:var(--x-primary-a100)}.x-button-initial-plain:focus{color:var(--x-primary-a100);background-color:var(--x-background-a200);border-color:var(--x-primary-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-initial-plain:focus .x-button-path{stroke:var(--x-primary-a100)}.x-button-initial-plain.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-200);border-color:var(--x-border);box-shadow:none}.x-button-initial-plain.x-button-disabled:hover,.x-button-initial-plain.x-button-disabled:active,.x-button-initial-plain.x-button-disabled:focus{color:var(--x-text-400);background-color:var(--x-background-200);border-color:var(--x-border)}.x-button-initial-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-initial.x-button-activated{z-index:2;color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary)}.x-button-initial.x-button-activated .x-button-path{stroke:var(--x-primary)}.x-button-primary{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary .x-button-path{stroke:var(--x-white)}.x-button-primary:hover{color:var(--x-white);background-color:var(--x-primary-100);border-color:var(--x-primary-100)}.x-button-primary:hover .x-button-path{stroke:var(--x-white)}.x-button-primary:active{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary:active .x-button-path{stroke:var(--x-white)}.x-button-primary:focus{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary);box-shadow:var(--x-box-shadow-focus)}.x-button-primary:focus .x-button-path{stroke:var(--x-white)}.x-button-primary.x-button-disabled{color:var(--x-primary-800);cursor:not-allowed;background-image:none;background-color:var(--x-primary-500);border-color:var(--x-primary-500);box-shadow:none}.x-button-primary.x-button-disabled:hover,.x-button-primary.x-button-disabled:active,.x-button-primary.x-button-disabled:focus{color:var(--x-primary-800);background-color:var(--x-primary-500);border-color:var(--x-primary-500)}.x-button-primary.x-button-disabled:active .x-button-inner{transform:none}.x-button-primary-plain{color:var(--x-primary);background-color:var(--x-primary-900);border-color:var(--x-primary-600)}.x-button-primary-plain .x-button-path{stroke:var(--x-primary)}.x-button-primary-plain:hover{color:var(--x-background-900);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-primary-plain:active{color:var(--x-background-900);background-color:var(--x-primary-a100);border-color:var(--x-primary-a100)}.x-button-primary-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-primary-plain:focus{color:var(--x-background-900);background-color:var(--x-primary-a100);border-color:var(--x-primary-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-primary-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-primary-plain.x-button-disabled{color:var(--x-primary-400);cursor:not-allowed;background-image:none;background-color:var(--x-primary-900);border-color:var(--x-primary-800);box-shadow:none}.x-button-primary-plain.x-button-disabled:hover,.x-button-primary-plain.x-button-disabled:active,.x-button-primary-plain.x-button-disabled:focus{color:var(--x-primary-400);background-color:var(--x-primary-900);border-color:var(--x-primary-800)}.x-button-primary-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-primary.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-success{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success .x-button-path{stroke:var(--x-white)}.x-button-success:hover{color:var(--x-white);background-color:var(--x-success-100);border-color:var(--x-success-100)}.x-button-success:hover .x-button-path{stroke:var(--x-white)}.x-button-success:active{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success:active .x-button-path{stroke:var(--x-white)}.x-button-success:focus{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success);box-shadow:var(--x-box-shadow-focus)}.x-button-success:focus .x-button-path{stroke:var(--x-white)}.x-button-success.x-button-disabled{color:var(--x-success-800);cursor:not-allowed;background-image:none;background-color:var(--x-success-500);border-color:var(--x-success-500);box-shadow:none}.x-button-success.x-button-disabled:hover,.x-button-success.x-button-disabled:active,.x-button-success.x-button-disabled:focus{color:var(--x-success-800);background-color:var(--x-success-500);border-color:var(--x-success-500)}.x-button-success.x-button-disabled:active .x-button-inner{transform:none}.x-button-success-plain{color:var(--x-success);background-color:var(--x-success-900);border-color:var(--x-success-600)}.x-button-success-plain .x-button-path{stroke:var(--x-success)}.x-button-success-plain:hover{color:var(--x-background-900);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-success-plain:active{color:var(--x-background-900);background-color:var(--x-success-a100);border-color:var(--x-success-a100)}.x-button-success-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-success-plain:focus{color:var(--x-background-900);background-color:var(--x-success-a100);border-color:var(--x-success-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-success-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-success-plain.x-button-disabled{color:var(--x-success-400);cursor:not-allowed;background-image:none;background-color:var(--x-success-900);border-color:var(--x-success-800);box-shadow:none}.x-button-success-plain.x-button-disabled:hover,.x-button-success-plain.x-button-disabled:active,.x-button-success-plain.x-button-disabled:focus{color:var(--x-success-400);background-color:var(--x-success-900);border-color:var(--x-success-800)}.x-button-success-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-success.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-warning{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning .x-button-path{stroke:var(--x-white)}.x-button-warning:hover{color:var(--x-white);background-color:var(--x-warning-100);border-color:var(--x-warning-100)}.x-button-warning:hover .x-button-path{stroke:var(--x-white)}.x-button-warning:active{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning:active .x-button-path{stroke:var(--x-white)}.x-button-warning:focus{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning);box-shadow:var(--x-box-shadow-focus)}.x-button-warning:focus .x-button-path{stroke:var(--x-white)}.x-button-warning.x-button-disabled{color:var(--x-warning-800);cursor:not-allowed;background-image:none;background-color:var(--x-warning-500);border-color:var(--x-warning-500);box-shadow:none}.x-button-warning.x-button-disabled:hover,.x-button-warning.x-button-disabled:active,.x-button-warning.x-button-disabled:focus{color:var(--x-warning-800);background-color:var(--x-warning-500);border-color:var(--x-warning-500)}.x-button-warning.x-button-disabled:active .x-button-inner{transform:none}.x-button-warning-plain{color:var(--x-warning);background-color:var(--x-warning-900);border-color:var(--x-warning-600)}.x-button-warning-plain .x-button-path{stroke:var(--x-warning)}.x-button-warning-plain:hover{color:var(--x-background-900);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-warning-plain:active{color:var(--x-background-900);background-color:var(--x-warning-a100);border-color:var(--x-warning-a100)}.x-button-warning-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-warning-plain:focus{color:var(--x-background-900);background-color:var(--x-warning-a100);border-color:var(--x-warning-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-warning-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-warning-plain.x-button-disabled{color:var(--x-warning-400);cursor:not-allowed;background-image:none;background-color:var(--x-warning-900);border-color:var(--x-warning-800);box-shadow:none}.x-button-warning-plain.x-button-disabled:hover,.x-button-warning-plain.x-button-disabled:active,.x-button-warning-plain.x-button-disabled:focus{color:var(--x-warning-400);background-color:var(--x-warning-900);border-color:var(--x-warning-800)}.x-button-warning-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-warning.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-danger{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger .x-button-path{stroke:var(--x-white)}.x-button-danger:hover{color:var(--x-white);background-color:var(--x-danger-100);border-color:var(--x-danger-100)}.x-button-danger:hover .x-button-path{stroke:var(--x-white)}.x-button-danger:active{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger:active .x-button-path{stroke:var(--x-white)}.x-button-danger:focus{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger);box-shadow:var(--x-box-shadow-focus)}.x-button-danger:focus .x-button-path{stroke:var(--x-white)}.x-button-danger.x-button-disabled{color:var(--x-danger-800);cursor:not-allowed;background-image:none;background-color:var(--x-danger-500);border-color:var(--x-danger-500);box-shadow:none}.x-button-danger.x-button-disabled:hover,.x-button-danger.x-button-disabled:active,.x-button-danger.x-button-disabled:focus{color:var(--x-danger-800);background-color:var(--x-danger-500);border-color:var(--x-danger-500)}.x-button-danger.x-button-disabled:active .x-button-inner{transform:none}.x-button-danger-plain{color:var(--x-danger);background-color:var(--x-danger-900);border-color:var(--x-danger-600)}.x-button-danger-plain .x-button-path{stroke:var(--x-danger)}.x-button-danger-plain:hover{color:var(--x-background-900);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-danger-plain:active{color:var(--x-background-900);background-color:var(--x-danger-a100);border-color:var(--x-danger-a100)}.x-button-danger-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-danger-plain:focus{color:var(--x-background-900);background-color:var(--x-danger-a100);border-color:var(--x-danger-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-danger-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-danger-plain.x-button-disabled{color:var(--x-danger-400);cursor:not-allowed;background-image:none;background-color:var(--x-danger-900);border-color:var(--x-danger-800);box-shadow:none}.x-button-danger-plain.x-button-disabled:hover,.x-button-danger-plain.x-button-disabled:active,.x-button-danger-plain.x-button-disabled:focus{color:var(--x-danger-400);background-color:var(--x-danger-900);border-color:var(--x-danger-800)}.x-button-danger-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-danger.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-info{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info .x-button-path{stroke:var(--x-white)}.x-button-info:hover{color:var(--x-white);background-color:var(--x-info-100);border-color:var(--x-info-100)}.x-button-info:hover .x-button-path{stroke:var(--x-white)}.x-button-info:active{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info:active .x-button-path{stroke:var(--x-white)}.x-button-info:focus{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info);box-shadow:var(--x-box-shadow-focus)}.x-button-info:focus .x-button-path{stroke:var(--x-white)}.x-button-info.x-button-disabled{color:var(--x-info-800);cursor:not-allowed;background-image:none;background-color:var(--x-info-500);border-color:var(--x-info-500);box-shadow:none}.x-button-info.x-button-disabled:hover,.x-button-info.x-button-disabled:active,.x-button-info.x-button-disabled:focus{color:var(--x-info-800);background-color:var(--x-info-500);border-color:var(--x-info-500)}.x-button-info.x-button-disabled:active .x-button-inner{transform:none}.x-button-info-plain{color:var(--x-info);background-color:var(--x-info-900);border-color:var(--x-info-600)}.x-button-info-plain .x-button-path{stroke:var(--x-info)}.x-button-info-plain:hover{color:var(--x-background-900);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-info-plain:active{color:var(--x-background-900);background-color:var(--x-info-a100);border-color:var(--x-info-a100)}.x-button-info-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-info-plain:focus{color:var(--x-background-900);background-color:var(--x-info-a100);border-color:var(--x-info-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-info-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-info-plain.x-button-disabled{color:var(--x-info-400);cursor:not-allowed;background-image:none;background-color:var(--x-info-900);border-color:var(--x-info-800);box-shadow:none}.x-button-info-plain.x-button-disabled:hover,.x-button-info-plain.x-button-disabled:active,.x-button-info-plain.x-button-disabled:focus{color:var(--x-info-400);background-color:var(--x-info-900);border-color:var(--x-info-800)}.x-button-info-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-info.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info.x-button-activated .x-button-path{stroke:var(--x-white)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XRippleDirective, selector: "[x-ripple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XButtonComponent, isStandalone: true, selector: "x-button", host: { properties: { "style.marginLeft": "this.marginLeft", "style.marginRight": "this.marginRight", "style.pointerEvents": "this.pointerEvents" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  #buttonRef\r\n  class=\"x-button\"\r\n  [tabindex]=\"tabindex()\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-button-only-icon]=\"onlyIcon()\"\r\n  [class.x-button-activated]=\"activated()\"\r\n  [class.x-button-disabled]=\"disabledComputed()\"\r\n  [class.x-button-round]=\"roundSignal()\"\r\n  [class.x-button-circle]=\"circle()\"\r\n  [class.x-button-icon]=\"icon() && !content.innerHTML.trim()\"\r\n  [class.x-button-icon-not-content]=\"icon() && content.innerHTML.trim() === ''\"\r\n  [class.x-button-closable]=\"closable()\"\r\n  [class.x-button-transition]=\"transition()\"\r\n  [title]=\"title()\"\r\n  x-ripple\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabledComputed()\"\r\n  [attr.type]=\"attrType()\"\r\n  [attr.disabled]=\"disabledComputed() || null\"\r\n>\r\n  @if (direction() === 'row' && icon() && !loading()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (loading()) {\r\n    <span class=\"x-button-loading\">\r\n      <svg class=\"x-button-circular\" viewBox=\"25 25 50 50\">\r\n        <circle class=\"x-button-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n      </svg>\r\n    </span>\r\n  }\r\n  <span #content><ng-content></ng-content></span>\r\n  @if (direction() === 'row-reverse' && icon() && !loading()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n</button>\r\n", styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}x-button{display:inline-block;line-height:initial}.x-button{margin:0;padding:0;position:relative;border:none;outline:none;border-radius:var(--x-border-radius);font-size:var(--x-font-size-small);text-align:center;background-clip:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;touch-action:manipulation;box-shadow:var(--x-box-shadow);width:100%}.x-button:focus{outline:none}.x-button>.x-icon{font-size:1rem;vertical-align:-.1875rem}.x-button.x-direction-row>.x-icon{margin-right:.25rem;margin-left:-.25rem}.x-button.x-direction-row-reverse>.x-icon{margin-right:-.25rem;margin-left:.25rem}.x-button-icon.x-direction-row>.x-icon,.x-button-icon.x-direction-row-reverse>.x-icon{margin-right:0;margin-left:0}.x-button-loading{margin-right:.25rem;margin-left:-.25rem;font-size:1rem;vertical-align:-.1875rem}.x-button-circular{width:1rem;height:1rem;animation:loading-rotate 2s linear infinite}.x-button-path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke-linecap:round}.x-button-transition{will-change:color,background-color,border,box-shadow;transition:color var(--x-animation-duration-base) ease-in-out,background-color var(--x-animation-duration-base) ease-in-out,border var(--x-animation-duration-base) ease-in-out,box-shadow var(--x-animation-duration-base) ease-in-out}.x-button-disabled{transform:none!important;opacity:.6}.x-button-round{border-radius:5rem}.x-button-circle{border-radius:50%;padding:0!important}.x-button-circle.x-size-big{width:var(--x-height-big)}.x-button-circle.x-size-large{width:var(--x-height-large)}.x-button-circle.x-size-medium{width:var(--x-height-medium)}.x-button-circle.x-size-small{width:var(--x-height-small)}.x-button-circle.x-size-mini{width:var(--x-height-mini)}.x-button-circle .x-button-loading,.x-button-icon-not-content .x-button-loading{margin-right:0;margin-left:0}.x-button-only-icon,.x-button-only-icon.x-button-initial,.x-button-text{color:var(--x-text);border:none;background-color:transparent;box-shadow:none}.x-button-only-icon:hover,.x-button-only-icon:active,.x-button-only-icon.x-button-initial:hover,.x-button-only-icon.x-button-initial:active,.x-button-text:hover,.x-button-text:active{color:var(--x-primary);background-color:var(--x-background-a200);border-color:transparent}.x-button-only-icon:hover .x-button-path,.x-button-only-icon:active .x-button-path,.x-button-only-icon.x-button-initial:hover .x-button-path,.x-button-only-icon.x-button-initial:active .x-button-path,.x-button-text:hover .x-button-path,.x-button-text:active .x-button-path{stroke:var(--x-primary)}.x-button-closable{color:var(--x-text-400);box-shadow:none;background:none}.x-button-closable:hover{background:none;color:var(--x-text)}.x-button-disabled.x-button-activated.x-button-initial,.x-button-disabled.x-button-activated.x-button-initial:hover,.x-button-disabled.x-button-activated.x-button-initial:active{color:var(--x-primary-700);cursor:not-allowed;background-image:none;background-color:var(--x-background);border-color:var(--x-primary-700);box-shadow:none}.x-button-disabled.x-button-text,.x-button-disabled.x-button-only-icon,.x-button-disabled.x-button-text:hover,.x-button-disabled.x-button-text:active,.x-button-disabled.x-button-only-icon:hover,.x-button-disabled.x-button-only-icon:active{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:transparent;box-shadow:none}.x-button.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-button.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-button.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-button.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-button.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-button-initial{color:var(--x-text);background-color:var(--x-background-100);border-color:var(--x-border)}.x-button-initial .x-button-path{stroke:var(--x-text)}.x-button-initial:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial.cdk-program-focused:not(.x-button-disabled),.x-button-initial.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border);box-shadow:var(--x-box-shadow-hover)}.x-button-initial:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-initial.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-initial.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial:active:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a600);border-color:var(--x-border)}.x-button-initial:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-a400);border-color:var(--x-border);box-shadow:none}.x-button-initial-plain{color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border)}.x-button-initial-plain .x-button-path{stroke:var(--x-text)}.x-button-initial-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial-plain.cdk-program-focused:not(.x-button-disabled),.x-button-initial-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a300);border-color:var(--x-primary)}.x-button-initial-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-initial-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-initial-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial-plain:active:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-primary-a100)}.x-button-initial-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial-plain.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-a400);border-color:var(--x-border);box-shadow:none}.x-button-initial-plain.x-button-activated{z-index:2;color:var(--x-text);background-color:var(--x-background-a600);border-color:var(--x-border)}.x-button-initial-plain.x-button-activated .x-button-path{stroke:var(--x-text)}.x-button-initial-text{box-shadow:none;color:var(--x-text);background-color:transparent;border-color:var(--x-border)}.x-button-initial-text .x-button-path{stroke:var(--x-text)}.x-button-initial-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial-text.cdk-program-focused:not(.x-button-disabled),.x-button-initial-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border)}.x-button-initial-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-initial-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-initial-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial-text.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-border);box-shadow:none}.x-button-initial-flat{box-shadow:none}.x-button-initial-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial-flat.cdk-program-focused:not(.x-button-disabled),.x-button-initial-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-initial.x-button-activated{z-index:2;color:var(--x-text);background-color:var(--x-background-a600);border-color:var(--x-border)}.x-button-initial.x-button-activated .x-button-path{stroke:var(--x-text)}.x-button-initial .x-ripple-element{background-color:var(--x-text-800)}.x-button-primary{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary .x-button-path{stroke:var(--x-white)}.x-button-primary:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary.cdk-program-focused:not(.x-button-disabled),.x-button-primary.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary-100);border-color:var(--x-primary-100);box-shadow:var(--x-box-shadow-hover)}.x-button-primary:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-primary.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-primary.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary.x-button-disabled{color:var(--x-primary-800);cursor:not-allowed;background-image:none;background-color:var(--x-primary-500);border-color:var(--x-primary-500);box-shadow:none}.x-button-primary-plain{color:var(--x-primary);background-color:var(--x-primary-900);border-color:var(--x-primary-600)}.x-button-primary-plain .x-button-path{stroke:var(--x-primary)}.x-button-primary-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary-plain.cdk-program-focused:not(.x-button-disabled),.x-button-primary-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-primary-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-primary-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary-a100);border-color:var(--x-primary-a100)}.x-button-primary-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary-plain.x-button-disabled{color:var(--x-primary-400);cursor:not-allowed;background-image:none;background-color:var(--x-primary-900);border-color:var(--x-primary-800);box-shadow:none}.x-button-primary-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-primary-text{box-shadow:none;color:var(--x-primary);background-color:transparent;border-color:var(--x-primary-600)}.x-button-primary-text .x-button-path{stroke:var(--x-primary)}.x-button-primary-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary-text.cdk-program-focused:not(.x-button-disabled),.x-button-primary-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-primary);background-color:var(--x-primary-900);border-color:var(--x-primary-600)}.x-button-primary-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-primary-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-primary-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-primary)}.x-button-primary-text.x-button-disabled{color:var(--x-primary-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-primary-800);box-shadow:none}.x-button-primary-flat{box-shadow:none}.x-button-primary-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary-flat.cdk-program-focused:not(.x-button-disabled),.x-button-primary-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-primary.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-primary .x-ripple-element{background-color:var(--x-primary-500)}.x-button-success{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success .x-button-path{stroke:var(--x-white)}.x-button-success:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success.cdk-program-focused:not(.x-button-disabled),.x-button-success.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success-100);border-color:var(--x-success-100);box-shadow:var(--x-box-shadow-hover)}.x-button-success:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-success.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-success.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success.x-button-disabled{color:var(--x-success-800);cursor:not-allowed;background-image:none;background-color:var(--x-success-500);border-color:var(--x-success-500);box-shadow:none}.x-button-success-plain{color:var(--x-success);background-color:var(--x-success-900);border-color:var(--x-success-600)}.x-button-success-plain .x-button-path{stroke:var(--x-success)}.x-button-success-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success-plain.cdk-program-focused:not(.x-button-disabled),.x-button-success-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-success-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-success-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success-a100);border-color:var(--x-success-a100)}.x-button-success-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success-plain.x-button-disabled{color:var(--x-success-400);cursor:not-allowed;background-image:none;background-color:var(--x-success-900);border-color:var(--x-success-800);box-shadow:none}.x-button-success-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-success-text{box-shadow:none;color:var(--x-success);background-color:transparent;border-color:var(--x-success-600)}.x-button-success-text .x-button-path{stroke:var(--x-success)}.x-button-success-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success-text.cdk-program-focused:not(.x-button-disabled),.x-button-success-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-success);background-color:var(--x-success-900);border-color:var(--x-success-600)}.x-button-success-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-success-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-success-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-success)}.x-button-success-text.x-button-disabled{color:var(--x-success-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-success-800);box-shadow:none}.x-button-success-flat{box-shadow:none}.x-button-success-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success-flat.cdk-program-focused:not(.x-button-disabled),.x-button-success-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-success.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-success .x-ripple-element{background-color:var(--x-success-500)}.x-button-warning{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning .x-button-path{stroke:var(--x-white)}.x-button-warning:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning.cdk-program-focused:not(.x-button-disabled),.x-button-warning.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning-100);border-color:var(--x-warning-100);box-shadow:var(--x-box-shadow-hover)}.x-button-warning:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-warning.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-warning.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning.x-button-disabled{color:var(--x-warning-800);cursor:not-allowed;background-image:none;background-color:var(--x-warning-500);border-color:var(--x-warning-500);box-shadow:none}.x-button-warning-plain{color:var(--x-warning);background-color:var(--x-warning-900);border-color:var(--x-warning-600)}.x-button-warning-plain .x-button-path{stroke:var(--x-warning)}.x-button-warning-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning-plain.cdk-program-focused:not(.x-button-disabled),.x-button-warning-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-warning-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-warning-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning-a100);border-color:var(--x-warning-a100)}.x-button-warning-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning-plain.x-button-disabled{color:var(--x-warning-400);cursor:not-allowed;background-image:none;background-color:var(--x-warning-900);border-color:var(--x-warning-800);box-shadow:none}.x-button-warning-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-warning-text{box-shadow:none;color:var(--x-warning);background-color:transparent;border-color:var(--x-warning-600)}.x-button-warning-text .x-button-path{stroke:var(--x-warning)}.x-button-warning-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning-text.cdk-program-focused:not(.x-button-disabled),.x-button-warning-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-warning);background-color:var(--x-warning-900);border-color:var(--x-warning-600)}.x-button-warning-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-warning-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-warning-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-warning)}.x-button-warning-text.x-button-disabled{color:var(--x-warning-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-warning-800);box-shadow:none}.x-button-warning-flat{box-shadow:none}.x-button-warning-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning-flat.cdk-program-focused:not(.x-button-disabled),.x-button-warning-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-warning.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-warning .x-ripple-element{background-color:var(--x-warning-500)}.x-button-danger{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger .x-button-path{stroke:var(--x-white)}.x-button-danger:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger.cdk-program-focused:not(.x-button-disabled),.x-button-danger.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger-100);border-color:var(--x-danger-100);box-shadow:var(--x-box-shadow-hover)}.x-button-danger:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-danger.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-danger.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger.x-button-disabled{color:var(--x-danger-800);cursor:not-allowed;background-image:none;background-color:var(--x-danger-500);border-color:var(--x-danger-500);box-shadow:none}.x-button-danger-plain{color:var(--x-danger);background-color:var(--x-danger-900);border-color:var(--x-danger-600)}.x-button-danger-plain .x-button-path{stroke:var(--x-danger)}.x-button-danger-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger-plain.cdk-program-focused:not(.x-button-disabled),.x-button-danger-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-danger-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-danger-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger-a100);border-color:var(--x-danger-a100)}.x-button-danger-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger-plain.x-button-disabled{color:var(--x-danger-400);cursor:not-allowed;background-image:none;background-color:var(--x-danger-900);border-color:var(--x-danger-800);box-shadow:none}.x-button-danger-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-danger-text{box-shadow:none;color:var(--x-danger);background-color:transparent;border-color:var(--x-danger-600)}.x-button-danger-text .x-button-path{stroke:var(--x-danger)}.x-button-danger-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger-text.cdk-program-focused:not(.x-button-disabled),.x-button-danger-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-danger);background-color:var(--x-danger-900);border-color:var(--x-danger-600)}.x-button-danger-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-danger-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-danger-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-danger)}.x-button-danger-text.x-button-disabled{color:var(--x-danger-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-danger-800);box-shadow:none}.x-button-danger-flat{box-shadow:none}.x-button-danger-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger-flat.cdk-program-focused:not(.x-button-disabled),.x-button-danger-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-danger.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-danger .x-ripple-element{background-color:var(--x-danger-500)}.x-button-info{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info .x-button-path{stroke:var(--x-white)}.x-button-info:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info.cdk-program-focused:not(.x-button-disabled),.x-button-info.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info-100);border-color:var(--x-info-100);box-shadow:var(--x-box-shadow-hover)}.x-button-info:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-info.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-info.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info.x-button-disabled{color:var(--x-info-800);cursor:not-allowed;background-image:none;background-color:var(--x-info-500);border-color:var(--x-info-500);box-shadow:none}.x-button-info-plain{color:var(--x-info);background-color:var(--x-info-900);border-color:var(--x-info-600)}.x-button-info-plain .x-button-path{stroke:var(--x-info)}.x-button-info-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info-plain.cdk-program-focused:not(.x-button-disabled),.x-button-info-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-info-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-info-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info-a100);border-color:var(--x-info-a100)}.x-button-info-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info-plain.x-button-disabled{color:var(--x-info-400);cursor:not-allowed;background-image:none;background-color:var(--x-info-900);border-color:var(--x-info-800);box-shadow:none}.x-button-info-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-info-text{box-shadow:none;color:var(--x-info);background-color:transparent;border-color:var(--x-info-600)}.x-button-info-text .x-button-path{stroke:var(--x-info)}.x-button-info-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info-text.cdk-program-focused:not(.x-button-disabled),.x-button-info-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-info);background-color:var(--x-info-900);border-color:var(--x-info-600)}.x-button-info-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-info-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-info-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-info)}.x-button-info-text.x-button-disabled{color:var(--x-info-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-info-800);box-shadow:none}.x-button-info-flat{box-shadow:none}.x-button-info-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info-flat.cdk-program-focused:not(.x-button-disabled),.x-button-info-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-info.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-info .x-ripple-element{background-color:var(--x-info-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XRippleDirective, selector: "[x-ripple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XButtonPrefix}`, standalone: true, imports: [NgClass, XIconComponent, XRippleDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #buttonRef\r\n  class=\"x-button\"\r\n  [tabindex]=\"tabindex\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-button-only-icon]=\"onlyIcon\"\r\n  [class.x-button-activated]=\"activated\"\r\n  [class.x-button-disabled]=\"disabled\"\r\n  [class.x-button-round]=\"round\"\r\n  [class.x-button-circle]=\"circle\"\r\n  [class.x-button-icon]=\"icon && !content.innerHTML.trim()\"\r\n  [class.x-button-icon-not-content]=\"icon && content.innerHTML.trim() === ''\"\r\n  [class.x-button-closable]=\"closable\"\r\n  [class.x-button-transition]=\"transition\"\r\n  [title]=\"title\"\r\n  x-ripple\r\n  [type]=\"type\"\r\n  [disabled]=\"disabled\"\r\n  [attr.type]=\"attrType\"\r\n>\r\n  @if (direction === 'row' && icon && !loading) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n  @if (loading) {\r\n    <span class=\"x-button-loading\">\r\n      <svg class=\"x-button-circular\" viewBox=\"25 25 50 50\">\r\n        <circle class=\"x-button-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n      </svg>\r\n    </span>\r\n  }\r\n  <span #content><ng-content></ng-content></span>\r\n  @if (direction === 'row-reverse' && icon && !loading) {\r\n    <x-icon [type]=\"icon\"></x-icon>\r\n  }\r\n</button>\r\n", styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}x-button{display:inline-block;line-height:initial}.x-button{margin:0;padding:0;position:relative;border:var(--x-border-width) solid;border-radius:var(--x-border-radius);font-size:var(--x-font-size-small);text-align:center;background-clip:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;touch-action:manipulation;will-change:color,background-color,border}.x-button:focus{outline:none}.x-button>.x-icon{font-size:1rem;vertical-align:-.1875rem}.x-button.x-direction-row>.x-icon{margin-right:.25rem;margin-left:-.25rem}.x-button.x-direction-row-reverse>.x-icon{margin-right:-.25rem;margin-left:.25rem}.x-button-icon.x-direction-row>.x-icon,.x-button-icon.x-direction-row-reverse>.x-icon{margin-right:0;margin-left:0}.x-button-loading{margin-right:.25rem;margin-left:-.25rem;font-size:1rem;vertical-align:-.1875rem}.x-button-circular{width:1rem;height:1rem;animation:loading-rotate 2s linear infinite}.x-button-path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke-linecap:round}.x-button-transition{transition:color var(--x-animation-duration-base) ease-in-out,background-color var(--x-animation-duration-base) ease-in-out,border var(--x-animation-duration-base) ease-in-out}.x-button-disabled{transform:none!important}.x-button-round{border-radius:5rem}.x-button-circle{border-radius:50%;padding:0!important;width:1.675rem}.x-button-circle .x-button-loading,.x-button-icon-not-content .x-button-loading{margin-right:0;margin-left:0}.x-button-only-icon,.x-button-only-icon.x-button-initial,.x-button-text{border:none;background-color:transparent;box-shadow:none}.x-button-only-icon:focus,.x-button-only-icon:hover,.x-button-only-icon:active,.x-button-only-icon.x-button-initial:focus,.x-button-only-icon.x-button-initial:hover,.x-button-only-icon.x-button-initial:active,.x-button-text:focus,.x-button-text:hover,.x-button-text:active{color:var(--x-primary);background-color:#0000001a;border-color:transparent}.x-button-only-icon:focus .x-button-path,.x-button-only-icon:hover .x-button-path,.x-button-only-icon:active .x-button-path,.x-button-only-icon.x-button-initial:focus .x-button-path,.x-button-only-icon.x-button-initial:hover .x-button-path,.x-button-only-icon.x-button-initial:active .x-button-path,.x-button-text:focus .x-button-path,.x-button-text:hover .x-button-path,.x-button-text:active .x-button-path{stroke:var(--x-primary)}.x-button-closable{color:var(--x-text-400)}.x-button-closable:hover{color:var(--x-text-300)}.x-button-disabled.x-button-activated.x-button-initial{color:var(--x-primary-700);cursor:not-allowed;background-image:none;background-color:var(--x-background);border-color:var(--x-primary-700);box-shadow:none}.x-button-disabled.x-button-activated.x-button-initial:hover,.x-button-disabled.x-button-activated.x-button-initial:active,.x-button-disabled.x-button-activated.x-button-initial:focus{color:var(--x-primary-700);background-color:var(--x-background);border-color:var(--x-primary-700)}.x-button-disabled.x-button-activated.x-button-initial:active .x-button-inner{transform:none}.x-button-disabled.x-button-activated.x-button-initial:hover,.x-button-disabled.x-button-activated.x-button-initial:active{color:var(--x-primary-700);cursor:not-allowed;background-image:none;background-color:var(--x-background);border-color:var(--x-primary-700);box-shadow:none}.x-button-disabled.x-button-activated.x-button-initial:hover:hover,.x-button-disabled.x-button-activated.x-button-initial:hover:active,.x-button-disabled.x-button-activated.x-button-initial:hover:focus,.x-button-disabled.x-button-activated.x-button-initial:active:hover,.x-button-disabled.x-button-activated.x-button-initial:active:active,.x-button-disabled.x-button-activated.x-button-initial:active:focus{color:var(--x-primary-700);background-color:var(--x-background);border-color:var(--x-primary-700)}.x-button-disabled.x-button-activated.x-button-initial:hover:active .x-button-inner,.x-button-disabled.x-button-activated.x-button-initial:active:active .x-button-inner{transform:none}.x-button-disabled.x-button-text,.x-button-disabled.x-button-only-icon{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:transparent;box-shadow:none}.x-button-disabled.x-button-text:hover,.x-button-disabled.x-button-text:active,.x-button-disabled.x-button-text:focus,.x-button-disabled.x-button-only-icon:hover,.x-button-disabled.x-button-only-icon:active,.x-button-disabled.x-button-only-icon:focus{color:var(--x-text-400);background-color:transparent;border-color:transparent}.x-button-disabled.x-button-text:active .x-button-inner,.x-button-disabled.x-button-only-icon:active .x-button-inner{transform:none}.x-button-disabled.x-button-text:hover,.x-button-disabled.x-button-text:active,.x-button-disabled.x-button-only-icon:hover,.x-button-disabled.x-button-only-icon:active{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:transparent;box-shadow:none}.x-button-disabled.x-button-text:hover:hover,.x-button-disabled.x-button-text:hover:active,.x-button-disabled.x-button-text:hover:focus,.x-button-disabled.x-button-text:active:hover,.x-button-disabled.x-button-text:active:active,.x-button-disabled.x-button-text:active:focus,.x-button-disabled.x-button-only-icon:hover:hover,.x-button-disabled.x-button-only-icon:hover:active,.x-button-disabled.x-button-only-icon:hover:focus,.x-button-disabled.x-button-only-icon:active:hover,.x-button-disabled.x-button-only-icon:active:active,.x-button-disabled.x-button-only-icon:active:focus{color:var(--x-text-400);background-color:transparent;border-color:transparent}.x-button-disabled.x-button-text:hover:active .x-button-inner,.x-button-disabled.x-button-text:active:active .x-button-inner,.x-button-disabled.x-button-only-icon:hover:active .x-button-inner,.x-button-disabled.x-button-only-icon:active:active .x-button-inner{transform:none}.x-button.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-button.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-button.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-button.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-button.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-button-initial{color:var(--x-text);background-color:var(--x-background);border-color:var(--x-border)}.x-button-initial .x-button-path{stroke:var(--x-text)}.x-button-initial:hover{color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary)}.x-button-initial:hover .x-button-path{stroke:var(--x-primary)}.x-button-initial:active{color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary)}.x-button-initial:active .x-button-path{stroke:var(--x-primary)}.x-button-initial:focus{color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary);box-shadow:var(--x-box-shadow-focus)}.x-button-initial:focus .x-button-path{stroke:var(--x-primary)}.x-button-initial.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-200);border-color:var(--x-border);box-shadow:none}.x-button-initial.x-button-disabled:hover,.x-button-initial.x-button-disabled:active,.x-button-initial.x-button-disabled:focus{color:var(--x-text-400);background-color:var(--x-background-200);border-color:var(--x-border)}.x-button-initial.x-button-disabled:active .x-button-inner{transform:none}.x-button-initial-plain{color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border)}.x-button-initial-plain .x-button-path{stroke:var(--x-text)}.x-button-initial-plain:hover{color:var(--x-primary);background-color:var(--x-background-a200);border-color:var(--x-primary)}.x-button-initial-plain:hover .x-button-path{stroke:var(--x-primary)}.x-button-initial-plain:active{color:var(--x-primary-a100);background-color:var(--x-background-a200);border-color:var(--x-primary-a100)}.x-button-initial-plain:active .x-button-path{stroke:var(--x-primary-a100)}.x-button-initial-plain:focus{color:var(--x-primary-a100);background-color:var(--x-background-a200);border-color:var(--x-primary-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-initial-plain:focus .x-button-path{stroke:var(--x-primary-a100)}.x-button-initial-plain.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-200);border-color:var(--x-border);box-shadow:none}.x-button-initial-plain.x-button-disabled:hover,.x-button-initial-plain.x-button-disabled:active,.x-button-initial-plain.x-button-disabled:focus{color:var(--x-text-400);background-color:var(--x-background-200);border-color:var(--x-border)}.x-button-initial-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-initial.x-button-activated{z-index:2;color:var(--x-primary);background-color:var(--x-background);border-color:var(--x-primary)}.x-button-initial.x-button-activated .x-button-path{stroke:var(--x-primary)}.x-button-primary{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary .x-button-path{stroke:var(--x-white)}.x-button-primary:hover{color:var(--x-white);background-color:var(--x-primary-100);border-color:var(--x-primary-100)}.x-button-primary:hover .x-button-path{stroke:var(--x-white)}.x-button-primary:active{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary:active .x-button-path{stroke:var(--x-white)}.x-button-primary:focus{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary);box-shadow:var(--x-box-shadow-focus)}.x-button-primary:focus .x-button-path{stroke:var(--x-white)}.x-button-primary.x-button-disabled{color:var(--x-primary-800);cursor:not-allowed;background-image:none;background-color:var(--x-primary-500);border-color:var(--x-primary-500);box-shadow:none}.x-button-primary.x-button-disabled:hover,.x-button-primary.x-button-disabled:active,.x-button-primary.x-button-disabled:focus{color:var(--x-primary-800);background-color:var(--x-primary-500);border-color:var(--x-primary-500)}.x-button-primary.x-button-disabled:active .x-button-inner{transform:none}.x-button-primary-plain{color:var(--x-primary);background-color:var(--x-primary-900);border-color:var(--x-primary-600)}.x-button-primary-plain .x-button-path{stroke:var(--x-primary)}.x-button-primary-plain:hover{color:var(--x-background-900);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-primary-plain:active{color:var(--x-background-900);background-color:var(--x-primary-a100);border-color:var(--x-primary-a100)}.x-button-primary-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-primary-plain:focus{color:var(--x-background-900);background-color:var(--x-primary-a100);border-color:var(--x-primary-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-primary-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-primary-plain.x-button-disabled{color:var(--x-primary-400);cursor:not-allowed;background-image:none;background-color:var(--x-primary-900);border-color:var(--x-primary-800);box-shadow:none}.x-button-primary-plain.x-button-disabled:hover,.x-button-primary-plain.x-button-disabled:active,.x-button-primary-plain.x-button-disabled:focus{color:var(--x-primary-400);background-color:var(--x-primary-900);border-color:var(--x-primary-800)}.x-button-primary-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-primary.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-success{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success .x-button-path{stroke:var(--x-white)}.x-button-success:hover{color:var(--x-white);background-color:var(--x-success-100);border-color:var(--x-success-100)}.x-button-success:hover .x-button-path{stroke:var(--x-white)}.x-button-success:active{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success:active .x-button-path{stroke:var(--x-white)}.x-button-success:focus{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success);box-shadow:var(--x-box-shadow-focus)}.x-button-success:focus .x-button-path{stroke:var(--x-white)}.x-button-success.x-button-disabled{color:var(--x-success-800);cursor:not-allowed;background-image:none;background-color:var(--x-success-500);border-color:var(--x-success-500);box-shadow:none}.x-button-success.x-button-disabled:hover,.x-button-success.x-button-disabled:active,.x-button-success.x-button-disabled:focus{color:var(--x-success-800);background-color:var(--x-success-500);border-color:var(--x-success-500)}.x-button-success.x-button-disabled:active .x-button-inner{transform:none}.x-button-success-plain{color:var(--x-success);background-color:var(--x-success-900);border-color:var(--x-success-600)}.x-button-success-plain .x-button-path{stroke:var(--x-success)}.x-button-success-plain:hover{color:var(--x-background-900);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-success-plain:active{color:var(--x-background-900);background-color:var(--x-success-a100);border-color:var(--x-success-a100)}.x-button-success-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-success-plain:focus{color:var(--x-background-900);background-color:var(--x-success-a100);border-color:var(--x-success-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-success-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-success-plain.x-button-disabled{color:var(--x-success-400);cursor:not-allowed;background-image:none;background-color:var(--x-success-900);border-color:var(--x-success-800);box-shadow:none}.x-button-success-plain.x-button-disabled:hover,.x-button-success-plain.x-button-disabled:active,.x-button-success-plain.x-button-disabled:focus{color:var(--x-success-400);background-color:var(--x-success-900);border-color:var(--x-success-800)}.x-button-success-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-success.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-warning{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning .x-button-path{stroke:var(--x-white)}.x-button-warning:hover{color:var(--x-white);background-color:var(--x-warning-100);border-color:var(--x-warning-100)}.x-button-warning:hover .x-button-path{stroke:var(--x-white)}.x-button-warning:active{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning:active .x-button-path{stroke:var(--x-white)}.x-button-warning:focus{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning);box-shadow:var(--x-box-shadow-focus)}.x-button-warning:focus .x-button-path{stroke:var(--x-white)}.x-button-warning.x-button-disabled{color:var(--x-warning-800);cursor:not-allowed;background-image:none;background-color:var(--x-warning-500);border-color:var(--x-warning-500);box-shadow:none}.x-button-warning.x-button-disabled:hover,.x-button-warning.x-button-disabled:active,.x-button-warning.x-button-disabled:focus{color:var(--x-warning-800);background-color:var(--x-warning-500);border-color:var(--x-warning-500)}.x-button-warning.x-button-disabled:active .x-button-inner{transform:none}.x-button-warning-plain{color:var(--x-warning);background-color:var(--x-warning-900);border-color:var(--x-warning-600)}.x-button-warning-plain .x-button-path{stroke:var(--x-warning)}.x-button-warning-plain:hover{color:var(--x-background-900);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-warning-plain:active{color:var(--x-background-900);background-color:var(--x-warning-a100);border-color:var(--x-warning-a100)}.x-button-warning-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-warning-plain:focus{color:var(--x-background-900);background-color:var(--x-warning-a100);border-color:var(--x-warning-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-warning-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-warning-plain.x-button-disabled{color:var(--x-warning-400);cursor:not-allowed;background-image:none;background-color:var(--x-warning-900);border-color:var(--x-warning-800);box-shadow:none}.x-button-warning-plain.x-button-disabled:hover,.x-button-warning-plain.x-button-disabled:active,.x-button-warning-plain.x-button-disabled:focus{color:var(--x-warning-400);background-color:var(--x-warning-900);border-color:var(--x-warning-800)}.x-button-warning-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-warning.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-danger{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger .x-button-path{stroke:var(--x-white)}.x-button-danger:hover{color:var(--x-white);background-color:var(--x-danger-100);border-color:var(--x-danger-100)}.x-button-danger:hover .x-button-path{stroke:var(--x-white)}.x-button-danger:active{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger:active .x-button-path{stroke:var(--x-white)}.x-button-danger:focus{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger);box-shadow:var(--x-box-shadow-focus)}.x-button-danger:focus .x-button-path{stroke:var(--x-white)}.x-button-danger.x-button-disabled{color:var(--x-danger-800);cursor:not-allowed;background-image:none;background-color:var(--x-danger-500);border-color:var(--x-danger-500);box-shadow:none}.x-button-danger.x-button-disabled:hover,.x-button-danger.x-button-disabled:active,.x-button-danger.x-button-disabled:focus{color:var(--x-danger-800);background-color:var(--x-danger-500);border-color:var(--x-danger-500)}.x-button-danger.x-button-disabled:active .x-button-inner{transform:none}.x-button-danger-plain{color:var(--x-danger);background-color:var(--x-danger-900);border-color:var(--x-danger-600)}.x-button-danger-plain .x-button-path{stroke:var(--x-danger)}.x-button-danger-plain:hover{color:var(--x-background-900);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-danger-plain:active{color:var(--x-background-900);background-color:var(--x-danger-a100);border-color:var(--x-danger-a100)}.x-button-danger-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-danger-plain:focus{color:var(--x-background-900);background-color:var(--x-danger-a100);border-color:var(--x-danger-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-danger-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-danger-plain.x-button-disabled{color:var(--x-danger-400);cursor:not-allowed;background-image:none;background-color:var(--x-danger-900);border-color:var(--x-danger-800);box-shadow:none}.x-button-danger-plain.x-button-disabled:hover,.x-button-danger-plain.x-button-disabled:active,.x-button-danger-plain.x-button-disabled:focus{color:var(--x-danger-400);background-color:var(--x-danger-900);border-color:var(--x-danger-800)}.x-button-danger-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-danger.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-info{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info .x-button-path{stroke:var(--x-white)}.x-button-info:hover{color:var(--x-white);background-color:var(--x-info-100);border-color:var(--x-info-100)}.x-button-info:hover .x-button-path{stroke:var(--x-white)}.x-button-info:active{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info:active .x-button-path{stroke:var(--x-white)}.x-button-info:focus{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info);box-shadow:var(--x-box-shadow-focus)}.x-button-info:focus .x-button-path{stroke:var(--x-white)}.x-button-info.x-button-disabled{color:var(--x-info-800);cursor:not-allowed;background-image:none;background-color:var(--x-info-500);border-color:var(--x-info-500);box-shadow:none}.x-button-info.x-button-disabled:hover,.x-button-info.x-button-disabled:active,.x-button-info.x-button-disabled:focus{color:var(--x-info-800);background-color:var(--x-info-500);border-color:var(--x-info-500)}.x-button-info.x-button-disabled:active .x-button-inner{transform:none}.x-button-info-plain{color:var(--x-info);background-color:var(--x-info-900);border-color:var(--x-info-600)}.x-button-info-plain .x-button-path{stroke:var(--x-info)}.x-button-info-plain:hover{color:var(--x-background-900);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info-plain:hover .x-button-path{stroke:var(--x-background-900)}.x-button-info-plain:active{color:var(--x-background-900);background-color:var(--x-info-a100);border-color:var(--x-info-a100)}.x-button-info-plain:active .x-button-path{stroke:var(--x-background-900)}.x-button-info-plain:focus{color:var(--x-background-900);background-color:var(--x-info-a100);border-color:var(--x-info-a100);box-shadow:var(--x-box-shadow-focus)}.x-button-info-plain:focus .x-button-path{stroke:var(--x-background-900)}.x-button-info-plain.x-button-disabled{color:var(--x-info-400);cursor:not-allowed;background-image:none;background-color:var(--x-info-900);border-color:var(--x-info-800);box-shadow:none}.x-button-info-plain.x-button-disabled:hover,.x-button-info-plain.x-button-disabled:active,.x-button-info-plain.x-button-disabled:focus{color:var(--x-info-400);background-color:var(--x-info-900);border-color:var(--x-info-800)}.x-button-info-plain.x-button-disabled:active .x-button-inner{transform:none}.x-button-info.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info.x-button-activated .x-button-path{stroke:var(--x-white)}\n"] }]
-        }], propDecorators: { buttonRef: [{
-                type: ViewChild,
-                args: ['buttonRef', { static: true }]
+            args: [{ selector: `${XButtonPrefix}`, standalone: true, imports: [NgClass, XIconComponent, XRippleDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #buttonRef\r\n  class=\"x-button\"\r\n  [tabindex]=\"tabindex()\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-button-only-icon]=\"onlyIcon()\"\r\n  [class.x-button-activated]=\"activated()\"\r\n  [class.x-button-disabled]=\"disabledComputed()\"\r\n  [class.x-button-round]=\"roundSignal()\"\r\n  [class.x-button-circle]=\"circle()\"\r\n  [class.x-button-icon]=\"icon() && !content.innerHTML.trim()\"\r\n  [class.x-button-icon-not-content]=\"icon() && content.innerHTML.trim() === ''\"\r\n  [class.x-button-closable]=\"closable()\"\r\n  [class.x-button-transition]=\"transition()\"\r\n  [title]=\"title()\"\r\n  x-ripple\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabledComputed()\"\r\n  [attr.type]=\"attrType()\"\r\n  [attr.disabled]=\"disabledComputed() || null\"\r\n>\r\n  @if (direction() === 'row' && icon() && !loading()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (loading()) {\r\n    <span class=\"x-button-loading\">\r\n      <svg class=\"x-button-circular\" viewBox=\"25 25 50 50\">\r\n        <circle class=\"x-button-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n      </svg>\r\n    </span>\r\n  }\r\n  <span #content><ng-content></ng-content></span>\r\n  @if (direction() === 'row-reverse' && icon() && !loading()) {\r\n    <x-icon [type]=\"icon()\"></x-icon>\r\n  }\r\n</button>\r\n", styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}x-button{display:inline-block;line-height:initial}.x-button{margin:0;padding:0;position:relative;border:none;outline:none;border-radius:var(--x-border-radius);font-size:var(--x-font-size-small);text-align:center;background-clip:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;touch-action:manipulation;box-shadow:var(--x-box-shadow);width:100%}.x-button:focus{outline:none}.x-button>.x-icon{font-size:1rem;vertical-align:-.1875rem}.x-button.x-direction-row>.x-icon{margin-right:.25rem;margin-left:-.25rem}.x-button.x-direction-row-reverse>.x-icon{margin-right:-.25rem;margin-left:.25rem}.x-button-icon.x-direction-row>.x-icon,.x-button-icon.x-direction-row-reverse>.x-icon{margin-right:0;margin-left:0}.x-button-loading{margin-right:.25rem;margin-left:-.25rem;font-size:1rem;vertical-align:-.1875rem}.x-button-circular{width:1rem;height:1rem;animation:loading-rotate 2s linear infinite}.x-button-path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke-linecap:round}.x-button-transition{will-change:color,background-color,border,box-shadow;transition:color var(--x-animation-duration-base) ease-in-out,background-color var(--x-animation-duration-base) ease-in-out,border var(--x-animation-duration-base) ease-in-out,box-shadow var(--x-animation-duration-base) ease-in-out}.x-button-disabled{transform:none!important;opacity:.6}.x-button-round{border-radius:5rem}.x-button-circle{border-radius:50%;padding:0!important}.x-button-circle.x-size-big{width:var(--x-height-big)}.x-button-circle.x-size-large{width:var(--x-height-large)}.x-button-circle.x-size-medium{width:var(--x-height-medium)}.x-button-circle.x-size-small{width:var(--x-height-small)}.x-button-circle.x-size-mini{width:var(--x-height-mini)}.x-button-circle .x-button-loading,.x-button-icon-not-content .x-button-loading{margin-right:0;margin-left:0}.x-button-only-icon,.x-button-only-icon.x-button-initial,.x-button-text{color:var(--x-text);border:none;background-color:transparent;box-shadow:none}.x-button-only-icon:hover,.x-button-only-icon:active,.x-button-only-icon.x-button-initial:hover,.x-button-only-icon.x-button-initial:active,.x-button-text:hover,.x-button-text:active{color:var(--x-primary);background-color:var(--x-background-a200);border-color:transparent}.x-button-only-icon:hover .x-button-path,.x-button-only-icon:active .x-button-path,.x-button-only-icon.x-button-initial:hover .x-button-path,.x-button-only-icon.x-button-initial:active .x-button-path,.x-button-text:hover .x-button-path,.x-button-text:active .x-button-path{stroke:var(--x-primary)}.x-button-closable{color:var(--x-text-400);box-shadow:none;background:none}.x-button-closable:hover{background:none;color:var(--x-text)}.x-button-disabled.x-button-activated.x-button-initial,.x-button-disabled.x-button-activated.x-button-initial:hover,.x-button-disabled.x-button-activated.x-button-initial:active{color:var(--x-primary-700);cursor:not-allowed;background-image:none;background-color:var(--x-background);border-color:var(--x-primary-700);box-shadow:none}.x-button-disabled.x-button-text,.x-button-disabled.x-button-only-icon,.x-button-disabled.x-button-text:hover,.x-button-disabled.x-button-text:active,.x-button-disabled.x-button-only-icon:hover,.x-button-disabled.x-button-only-icon:active{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:transparent;box-shadow:none}.x-button.x-size-big{height:var(--x-height-big);line-height:var(--x-height-big);padding:0 var(--x-padding-big)}.x-button.x-size-large{height:var(--x-height-large);line-height:var(--x-height-large);padding:0 var(--x-padding-large)}.x-button.x-size-medium{height:var(--x-height-medium);line-height:var(--x-height-medium);padding:0 var(--x-padding-medium)}.x-button.x-size-small{height:var(--x-height-small);line-height:var(--x-height-small);padding:0 var(--x-padding-small)}.x-button.x-size-mini{height:var(--x-height-mini);line-height:var(--x-height-mini);padding:0 var(--x-padding-mini)}.x-button-initial{color:var(--x-text);background-color:var(--x-background-100);border-color:var(--x-border)}.x-button-initial .x-button-path{stroke:var(--x-text)}.x-button-initial:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial.cdk-program-focused:not(.x-button-disabled),.x-button-initial.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border);box-shadow:var(--x-box-shadow-hover)}.x-button-initial:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-initial.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-initial.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial:active:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a600);border-color:var(--x-border)}.x-button-initial:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-a400);border-color:var(--x-border);box-shadow:none}.x-button-initial-plain{color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border)}.x-button-initial-plain .x-button-path{stroke:var(--x-text)}.x-button-initial-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial-plain.cdk-program-focused:not(.x-button-disabled),.x-button-initial-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a300);border-color:var(--x-primary)}.x-button-initial-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-initial-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-initial-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial-plain:active:not(.x-button-disabled){color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-primary-a100)}.x-button-initial-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial-plain.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:var(--x-background-a400);border-color:var(--x-border);box-shadow:none}.x-button-initial-plain.x-button-activated{z-index:2;color:var(--x-text);background-color:var(--x-background-a600);border-color:var(--x-border)}.x-button-initial-plain.x-button-activated .x-button-path{stroke:var(--x-text)}.x-button-initial-text{box-shadow:none;color:var(--x-text);background-color:transparent;border-color:var(--x-border)}.x-button-initial-text .x-button-path{stroke:var(--x-text)}.x-button-initial-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial-text.cdk-program-focused:not(.x-button-disabled),.x-button-initial-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-text);background-color:var(--x-background-a200);border-color:var(--x-border)}.x-button-initial-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-initial-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-initial-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-text)}.x-button-initial-text.x-button-disabled{color:var(--x-text-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-border);box-shadow:none}.x-button-initial-flat{box-shadow:none}.x-button-initial-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-initial-flat.cdk-program-focused:not(.x-button-disabled),.x-button-initial-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-initial.x-button-activated{z-index:2;color:var(--x-text);background-color:var(--x-background-a600);border-color:var(--x-border)}.x-button-initial.x-button-activated .x-button-path{stroke:var(--x-text)}.x-button-initial .x-ripple-element{background-color:var(--x-text-800)}.x-button-primary{color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary .x-button-path{stroke:var(--x-white)}.x-button-primary:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary.cdk-program-focused:not(.x-button-disabled),.x-button-primary.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary-100);border-color:var(--x-primary-100);box-shadow:var(--x-box-shadow-hover)}.x-button-primary:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-primary.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-primary.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary.x-button-disabled{color:var(--x-primary-800);cursor:not-allowed;background-image:none;background-color:var(--x-primary-500);border-color:var(--x-primary-500);box-shadow:none}.x-button-primary-plain{color:var(--x-primary);background-color:var(--x-primary-900);border-color:var(--x-primary-600)}.x-button-primary-plain .x-button-path{stroke:var(--x-primary)}.x-button-primary-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary-plain.cdk-program-focused:not(.x-button-disabled),.x-button-primary-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-primary-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-primary-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-primary-a100);border-color:var(--x-primary-a100)}.x-button-primary-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-primary-plain.x-button-disabled{color:var(--x-primary-400);cursor:not-allowed;background-image:none;background-color:var(--x-primary-900);border-color:var(--x-primary-800);box-shadow:none}.x-button-primary-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-primary-text{box-shadow:none;color:var(--x-primary);background-color:transparent;border-color:var(--x-primary-600)}.x-button-primary-text .x-button-path{stroke:var(--x-primary)}.x-button-primary-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary-text.cdk-program-focused:not(.x-button-disabled),.x-button-primary-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-primary);background-color:var(--x-primary-900);border-color:var(--x-primary-600)}.x-button-primary-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-primary-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-primary-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-primary)}.x-button-primary-text.x-button-disabled{color:var(--x-primary-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-primary-800);box-shadow:none}.x-button-primary-flat{box-shadow:none}.x-button-primary-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-primary-flat.cdk-program-focused:not(.x-button-disabled),.x-button-primary-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-primary.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-primary);border-color:var(--x-primary)}.x-button-primary.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-primary .x-ripple-element{background-color:var(--x-primary-500)}.x-button-success{color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success .x-button-path{stroke:var(--x-white)}.x-button-success:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success.cdk-program-focused:not(.x-button-disabled),.x-button-success.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success-100);border-color:var(--x-success-100);box-shadow:var(--x-box-shadow-hover)}.x-button-success:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-success.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-success.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success.x-button-disabled{color:var(--x-success-800);cursor:not-allowed;background-image:none;background-color:var(--x-success-500);border-color:var(--x-success-500);box-shadow:none}.x-button-success-plain{color:var(--x-success);background-color:var(--x-success-900);border-color:var(--x-success-600)}.x-button-success-plain .x-button-path{stroke:var(--x-success)}.x-button-success-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success-plain.cdk-program-focused:not(.x-button-disabled),.x-button-success-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-success-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-success-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-success-a100);border-color:var(--x-success-a100)}.x-button-success-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-success-plain.x-button-disabled{color:var(--x-success-400);cursor:not-allowed;background-image:none;background-color:var(--x-success-900);border-color:var(--x-success-800);box-shadow:none}.x-button-success-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-success-text{box-shadow:none;color:var(--x-success);background-color:transparent;border-color:var(--x-success-600)}.x-button-success-text .x-button-path{stroke:var(--x-success)}.x-button-success-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success-text.cdk-program-focused:not(.x-button-disabled),.x-button-success-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-success);background-color:var(--x-success-900);border-color:var(--x-success-600)}.x-button-success-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-success-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-success-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-success)}.x-button-success-text.x-button-disabled{color:var(--x-success-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-success-800);box-shadow:none}.x-button-success-flat{box-shadow:none}.x-button-success-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-success-flat.cdk-program-focused:not(.x-button-disabled),.x-button-success-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-success.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-success);border-color:var(--x-success)}.x-button-success.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-success .x-ripple-element{background-color:var(--x-success-500)}.x-button-warning{color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning .x-button-path{stroke:var(--x-white)}.x-button-warning:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning.cdk-program-focused:not(.x-button-disabled),.x-button-warning.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning-100);border-color:var(--x-warning-100);box-shadow:var(--x-box-shadow-hover)}.x-button-warning:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-warning.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-warning.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning.x-button-disabled{color:var(--x-warning-800);cursor:not-allowed;background-image:none;background-color:var(--x-warning-500);border-color:var(--x-warning-500);box-shadow:none}.x-button-warning-plain{color:var(--x-warning);background-color:var(--x-warning-900);border-color:var(--x-warning-600)}.x-button-warning-plain .x-button-path{stroke:var(--x-warning)}.x-button-warning-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning-plain.cdk-program-focused:not(.x-button-disabled),.x-button-warning-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-warning-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-warning-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-warning-a100);border-color:var(--x-warning-a100)}.x-button-warning-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-warning-plain.x-button-disabled{color:var(--x-warning-400);cursor:not-allowed;background-image:none;background-color:var(--x-warning-900);border-color:var(--x-warning-800);box-shadow:none}.x-button-warning-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-warning-text{box-shadow:none;color:var(--x-warning);background-color:transparent;border-color:var(--x-warning-600)}.x-button-warning-text .x-button-path{stroke:var(--x-warning)}.x-button-warning-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning-text.cdk-program-focused:not(.x-button-disabled),.x-button-warning-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-warning);background-color:var(--x-warning-900);border-color:var(--x-warning-600)}.x-button-warning-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-warning-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-warning-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-warning)}.x-button-warning-text.x-button-disabled{color:var(--x-warning-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-warning-800);box-shadow:none}.x-button-warning-flat{box-shadow:none}.x-button-warning-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-warning-flat.cdk-program-focused:not(.x-button-disabled),.x-button-warning-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-warning.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-warning);border-color:var(--x-warning)}.x-button-warning.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-warning .x-ripple-element{background-color:var(--x-warning-500)}.x-button-danger{color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger .x-button-path{stroke:var(--x-white)}.x-button-danger:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger.cdk-program-focused:not(.x-button-disabled),.x-button-danger.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger-100);border-color:var(--x-danger-100);box-shadow:var(--x-box-shadow-hover)}.x-button-danger:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-danger.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-danger.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger.x-button-disabled{color:var(--x-danger-800);cursor:not-allowed;background-image:none;background-color:var(--x-danger-500);border-color:var(--x-danger-500);box-shadow:none}.x-button-danger-plain{color:var(--x-danger);background-color:var(--x-danger-900);border-color:var(--x-danger-600)}.x-button-danger-plain .x-button-path{stroke:var(--x-danger)}.x-button-danger-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger-plain.cdk-program-focused:not(.x-button-disabled),.x-button-danger-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-danger-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-danger-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-danger-a100);border-color:var(--x-danger-a100)}.x-button-danger-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-danger-plain.x-button-disabled{color:var(--x-danger-400);cursor:not-allowed;background-image:none;background-color:var(--x-danger-900);border-color:var(--x-danger-800);box-shadow:none}.x-button-danger-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-danger-text{box-shadow:none;color:var(--x-danger);background-color:transparent;border-color:var(--x-danger-600)}.x-button-danger-text .x-button-path{stroke:var(--x-danger)}.x-button-danger-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger-text.cdk-program-focused:not(.x-button-disabled),.x-button-danger-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-danger);background-color:var(--x-danger-900);border-color:var(--x-danger-600)}.x-button-danger-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-danger-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-danger-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-danger)}.x-button-danger-text.x-button-disabled{color:var(--x-danger-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-danger-800);box-shadow:none}.x-button-danger-flat{box-shadow:none}.x-button-danger-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-danger-flat.cdk-program-focused:not(.x-button-disabled),.x-button-danger-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-danger.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-danger);border-color:var(--x-danger)}.x-button-danger.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-danger .x-ripple-element{background-color:var(--x-danger-500)}.x-button-info{color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info .x-button-path{stroke:var(--x-white)}.x-button-info:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info.cdk-program-focused:not(.x-button-disabled),.x-button-info.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info-100);border-color:var(--x-info-100);box-shadow:var(--x-box-shadow-hover)}.x-button-info:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-info.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-info.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info.x-button-disabled{color:var(--x-info-800);cursor:not-allowed;background-image:none;background-color:var(--x-info-500);border-color:var(--x-info-500);box-shadow:none}.x-button-info-plain{color:var(--x-info);background-color:var(--x-info-900);border-color:var(--x-info-600)}.x-button-info-plain .x-button-path{stroke:var(--x-info)}.x-button-info-plain:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info-plain.cdk-program-focused:not(.x-button-disabled),.x-button-info-plain.cdk-keyboard-focused:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info-plain:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-info-plain.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-info-plain.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info-plain:active:not(.x-button-disabled){color:var(--x-white);background-color:var(--x-info-a100);border-color:var(--x-info-a100)}.x-button-info-plain:active:not(.x-button-disabled) .x-button-path{stroke:var(--x-white)}.x-button-info-plain.x-button-disabled{color:var(--x-info-400);cursor:not-allowed;background-image:none;background-color:var(--x-info-900);border-color:var(--x-info-800);box-shadow:none}.x-button-info-plain.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info-plain.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-info-text{box-shadow:none;color:var(--x-info);background-color:transparent;border-color:var(--x-info-600)}.x-button-info-text .x-button-path{stroke:var(--x-info)}.x-button-info-text:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info-text.cdk-program-focused:not(.x-button-disabled),.x-button-info-text.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none;color:var(--x-info);background-color:var(--x-info-900);border-color:var(--x-info-600)}.x-button-info-text:hover:not(.x-button-disabled):not(.x-button-activated) .x-button-path,.x-button-info-text.cdk-program-focused:not(.x-button-disabled) .x-button-path,.x-button-info-text.cdk-keyboard-focused:not(.x-button-disabled) .x-button-path{stroke:var(--x-info)}.x-button-info-text.x-button-disabled{color:var(--x-info-400);cursor:not-allowed;background-image:none;background-color:transparent;border-color:var(--x-info-800);box-shadow:none}.x-button-info-flat{box-shadow:none}.x-button-info-flat:hover:not(.x-button-disabled):not(.x-button-activated),.x-button-info-flat.cdk-program-focused:not(.x-button-disabled),.x-button-info-flat.cdk-keyboard-focused:not(.x-button-disabled){box-shadow:none}.x-button-info.x-button-activated{z-index:2;color:var(--x-white);background-color:var(--x-info);border-color:var(--x-info)}.x-button-info.x-button-activated .x-button-path{stroke:var(--x-white)}.x-button-info .x-ripple-element{background-color:var(--x-info-500)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { marginLeft: [{
+                type: HostBinding,
+                args: ['style.marginLeft']
+            }], marginRight: [{
+                type: HostBinding,
+                args: ['style.marginRight']
+            }], pointerEvents: [{
+                type: HostBinding,
+                args: ['style.pointerEvents']
             }] } });
 
 class XButtonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XButtonModule, imports: [XButtonComponent, XButtonsComponent], exports: [XButtonComponent, XButtonsComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonModule, imports: [XButtonComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XButtonModule, imports: [XButtonComponent, XButtonsComponent], exports: [XButtonComponent, XButtonsComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonModule, imports: [XButtonComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XButtonComponent, XButtonsComponent],