ngx-tethys 19.1.0-next.0 → 19.1.0-next.2

package/fesm2022/ngx-tethys-button.mjs

@@ -1,6 +1,6 @@
 import { NgClass, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ViewEncapsulation, Component, ChangeDetectionStrategy, inject, ElementRef, Renderer2, NgModule } from '@angular/core';
+import { input, effect, ViewEncapsulation, Component, computed, ChangeDetectionStrategy, inject, ElementRef, Renderer2, afterNextRender, NgModule } from '@angular/core';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -18,78 +18,56 @@ const buttonGroupSizeMap = {
  * @order 30
  */
 class ThyButtonGroup {
-    /**
-     * 大小
-     * @type xs | sm | md | lg
-     * @default md
-     */
-    set thySize(size) {
-        this.size = size;
-        if (this.initialized) {
-            this.setClasses();
-        }
-    }
-    /**
-     * 类型
-     * @type outline-default | outline-primary
-     * @default outline-default
-     */
-    set thyType(type) {
-        this.type = type;
-        if (this.initialized) {
-            this.setClasses();
-        }
-    }
-    /**
-     * 是否需要最小宽度，默认按钮最小宽度为80px
-     * @default false
-     */
-    set thyClearMinWidth(value) {
-        this.thyClearMinWidthClassName = coerceBooleanProperty(value);
-    }
     constructor() {
-        this.initialized = false;
         this.hostRenderer = useHostRenderer();
-        this._isButtonGroup = true;
-        this.thyClearMinWidthClassName = false;
-    }
-    ngOnInit() {
-        this.setClasses();
-        this.initialized = true;
+        /**
+         * 大小
+         * @type xs | sm | md | lg
+         * @default md
+         */
+        this.thySize = input();
+        /**
+         * 类型
+         * @type outline-default | outline-primary
+         * @default outline-default
+         */
+        this.thyType = input();
+        /**
+         * 是否需要最小宽度，默认按钮最小宽度为80px
+         * @default false
+         */
+        this.thyClearMinWidth = input(false, { transform: coerceBooleanProperty });
+        effect(() => {
+            this.setClasses();
+        });
     }
     setClasses() {
+        const type = this.thyType();
+        const size = this.thySize();
         let classNames = [];
-        if (this.type) {
-            classNames.push(`btn-group-${this.type}`);
+        if (type) {
+            classNames.push(`btn-group-${type}`);
         }
-        if (buttonGroupSizeMap[this.size]) {
-            classNames.push(buttonGroupSizeMap[this.size]);
+        if (buttonGroupSizeMap[size]) {
+            classNames = classNames.concat(...buttonGroupSizeMap[size]);
         }
         this.hostRenderer.updateClass(classNames);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyButtonGroup, isStandalone: true, selector: "thy-button-group", inputs: { thySize: "thySize", thyType: "thyType", thyClearMinWidth: "thyClearMinWidth" }, host: { properties: { "class.btn-group": "this._isButtonGroup", "class.btn-group-clear-min-width": "this.thyClearMinWidthClassName" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyButtonGroup, isStandalone: true, selector: "thy-button-group", inputs: { thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thyClearMinWidth: { classPropertyName: "thyClearMinWidth", publicName: "thyClearMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-group-clear-min-width": "thyClearMinWidth()" }, classAttribute: "btn-group" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyButtonGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-button-group',
                     template: '<ng-content></ng-content>',
+                    host: {
+                        class: 'btn-group',
+                        '[class.btn-group-clear-min-width]': 'thyClearMinWidth()'
+                    },
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: () => [], propDecorators: { thySize: [{
-                type: Input
-            }], thyType: [{
-                type: Input
-            }], thyClearMinWidth: [{
-                type: Input
-            }], _isButtonGroup: [{
-                type: HostBinding,
-                args: ['class.btn-group']
-            }], thyClearMinWidthClassName: [{
-                type: HostBinding,
-                args: [`class.btn-group-clear-min-width`]
-            }] } });
+        }], ctorParameters: () => [] });
 
 const sizeClassesMap = {
     lg: ['btn-icon-lg'],
@@ -113,143 +91,97 @@ const themeClassesMap = {
  * @order 20
  */
 class ThyButtonIcon {
-    /**
-     * 大小
-     * @type xs | sm | md | lg
-     * @default 36px
-     */
-    set thySize(size) {
-        this.size = size;
-        this.setClasses();
-    }
-    /**
-     * 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标
-     */
-    set thyIcon(icon) {
-        this.setIconClass(icon);
-    }
-    /**
-     * 图标按钮的图标
-     */
-    set thyButtonIcon(icon) {
-        this.setIconClass(icon);
-    }
-    /**
-     * 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗
-     */
-    set thyShape(value) {
-        this.shape = value;
-        this.setClasses();
-    }
-    /**
-     * 亮色，颜色更浅，适合左侧导航顶部的按钮
-     * @default false
-     */
-    set thyLight(value) {
-        this._isLighted = value;
-    }
-    /**
-     * 设置为选中状态
-     * @default false
-     */
-    set thyActive(value) {
-        this._isActive = value;
-    }
-    /**
-     * 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色
-     */
-    set thyTheme(value) {
-        this.theme = value;
-        this.setClasses();
-    }
     constructor() {
-        this.initialized = false;
+        /**
+         * 大小
+         * @type xs | sm | md | lg
+         * @default 36px
+         */
+        this.thySize = input();
+        /**
+         * 图标, 和`thyButtonIcon`相同，当使用`thy-button-icon`时，只能使用 thyIcon 设置图标
+         */
+        this.thyIcon = input();
+        /**
+         * 图标按钮的图标
+         */
+        this.thyButtonIcon = input();
+        /**
+         * 展示的形状，默认只显示字体图标图标，circle-dashed, circle-solid 展示成虚线,实线边框圆形图标, circle-thick-dashed, circle-thick-solid 边框加粗
+         */
+        this.thyShape = input();
+        /**
+         * 亮色，颜色更浅，适合左侧导航顶部的按钮
+         * @default false
+         */
+        this.thyLight = input(false, { transform: coerceBooleanProperty$1 });
+        /**
+         * 设置为选中状态
+         * @default false
+         */
+        this.thyActive = input(false, { transform: coerceBooleanProperty$1 });
+        /**
+         * 按钮展示类型，默认图标移上去显示主色， danger-weak 鼠标移上去显示 danger 红色
+         */
+        this.thyTheme = input();
+        this.thyColor = input();
         this.hostRenderer = useHostRenderer();
-        this.iconPrefix = 'wtf';
-        this._isBtn = true;
-        this._isBtnIcon = true;
-        this._isLighted = false;
-        this._isActive = false;
-    }
-    setIconClass(icon) {
-        if (icon) {
-            if (icon.includes('wtf')) {
+        this.icon = computed(() => {
+            return this.thyButtonIcon() || this.thyIcon();
+        });
+        this.isWtfIcon = computed(() => {
+            const icon = this.icon();
+            return icon && icon.includes('wtf');
+        });
+        this.svgIconName = computed(() => {
+            if (!this.isWtfIcon()) {
+                return this.icon();
+            }
+            return null;
+        });
+        this.iconClasses = computed(() => {
+            const icon = this.icon();
+            if (this.isWtfIcon()) {
                 const classes = icon.split(' ');
                 if (classes.length === 1) {
                     classes.unshift('wtf');
                 }
-                this.iconClasses = classes;
-                this.svgIconName = null;
-            }
-            else {
-                this.svgIconName = icon;
+                return classes;
             }
-        }
-        else {
-            this.iconClasses = null;
-            this.svgIconName = null;
-        }
+            return null;
+        });
+        effect(() => {
+            this.setClasses();
+        });
     }
-    setClasses(first = false) {
-        // 设置样式判断是否已经初始化，未初始化直接返回，除非是初次调用
-        // 只有 ngOnInit 调用会传入 first = true
-        if (!first && !this.initialized) {
-            return;
-        }
-        const classes = sizeClassesMap[this.size] ? [...sizeClassesMap[this.size]] : [];
-        if (this.shape && shapeClassesMap[this.shape]) {
-            shapeClassesMap[this.shape].forEach((className) => {
+    setClasses() {
+        const size = this.thySize();
+        const shape = this.thyShape();
+        const theme = this.thyTheme();
+        const classes = sizeClassesMap[size] ? [...sizeClassesMap[size]] : [];
+        if (shape && shapeClassesMap[shape]) {
+            shapeClassesMap[shape].forEach((className) => {
                 classes.push(className);
             });
         }
-        if (this.theme && themeClassesMap[this.theme]) {
-            themeClassesMap[this.theme].forEach((className) => {
+        if (theme && themeClassesMap[theme]) {
+            themeClassesMap[theme].forEach((className) => {
                 classes.push(className);
             });
         }
         this.hostRenderer.updateClass(classes);
     }
-    ngOnInit() {
-        this.setClasses(true);
-        this.initialized = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyButtonIcon, isStandalone: true, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: { thySize: "thySize", thyIcon: "thyIcon", thyButtonIcon: "thyButtonIcon", thyShape: "thyShape", thyLight: ["thyLight", "thyLight", coerceBooleanProperty$1], thyActive: ["thyActive", "thyActive", coerceBooleanProperty$1], thyTheme: "thyTheme", thyColor: "thyColor" }, host: { properties: { "class.btn": "this._isBtn", "class.btn-icon": "this._isBtnIcon", "class.btn-icon-light": "this._isLighted", "class.btn-icon-active": "this._isActive" } }, ngImport: i0, template: "@if (svgIconName) {\n  <thy-icon [thyIconName]=\"svgIconName\" [style.color]=\"thyColor\" [style.borderColor]=\"thyColor\"></thy-icon>\n} @else {\n  @if (iconClasses) {\n    <i [ngClass]=\"iconClasses\" [style.color]=\"thyColor\" [style.borderColor]=\"thyColor\"></i>\n  }\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyButtonIcon, isStandalone: true, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: { thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyIcon: { classPropertyName: "thyIcon", publicName: "thyIcon", isSignal: true, isRequired: false, transformFunction: null }, thyButtonIcon: { classPropertyName: "thyButtonIcon", publicName: "thyButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, thyShape: { classPropertyName: "thyShape", publicName: "thyShape", isSignal: true, isRequired: false, transformFunction: null }, thyLight: { classPropertyName: "thyLight", publicName: "thyLight", isSignal: true, isRequired: false, transformFunction: null }, thyActive: { classPropertyName: "thyActive", publicName: "thyActive", isSignal: true, isRequired: false, transformFunction: null }, thyTheme: { classPropertyName: "thyTheme", publicName: "thyTheme", isSignal: true, isRequired: false, transformFunction: null }, thyColor: { classPropertyName: "thyColor", publicName: "thyColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-icon-light": "thyLight()", "class.btn-icon-active": "thyActive()" }, classAttribute: "btn btn-icon" }, ngImport: i0, template: "@if (svgIconName()) {\n  <thy-icon [thyIconName]=\"svgIconName()\" [style.color]=\"thyColor()\" [style.borderColor]=\"thyColor()\"></thy-icon>\n} @else {\n  @if (iconClasses()) {\n    <i [ngClass]=\"iconClasses()\" [style.color]=\"thyColor()\" [style.borderColor]=\"thyColor()\"></i>\n  }\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyButtonIcon, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-button-icon,[thy-button-icon],[thyButtonIcon]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyIcon, NgClass], template: "@if (svgIconName) {\n  <thy-icon [thyIconName]=\"svgIconName\" [style.color]=\"thyColor\" [style.borderColor]=\"thyColor\"></thy-icon>\n} @else {\n  @if (iconClasses) {\n    <i [ngClass]=\"iconClasses\" [style.color]=\"thyColor\" [style.borderColor]=\"thyColor\"></i>\n  }\n}\n<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [], propDecorators: { thySize: [{
-                type: Input
-            }], thyIcon: [{
-                type: Input
-            }], thyButtonIcon: [{
-                type: Input
-            }], thyShape: [{
-                type: Input
-            }], thyLight: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyActive: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyTheme: [{
-                type: Input
-            }], _isBtn: [{
-                type: HostBinding,
-                args: ['class.btn']
-            }], _isBtnIcon: [{
-                type: HostBinding,
-                args: ['class.btn-icon']
-            }], _isLighted: [{
-                type: HostBinding,
-                args: ['class.btn-icon-light']
-            }], _isActive: [{
-                type: HostBinding,
-                args: ['class.btn-icon-active']
-            }], thyColor: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'thy-button-icon,[thy-button-icon],[thyButtonIcon]', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'btn btn-icon',
+                        '[class.btn-icon-light]': 'thyLight()',
+                        '[class.btn-icon-active]': 'thyActive()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyIcon, NgClass], template: "@if (svgIconName()) {\n  <thy-icon [thyIconName]=\"svgIconName()\" [style.color]=\"thyColor()\" [style.borderColor]=\"thyColor()\"></thy-icon>\n} @else {\n  @if (iconClasses()) {\n    <i [ngClass]=\"iconClasses()\" [style.color]=\"thyColor()\" [style.borderColor]=\"thyColor()\"></i>\n  }\n}\n<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [] });
 
 const btnTypeClassesMap = {
     primary: ['btn-primary'],
@@ -273,153 +205,142 @@ const iconOnlyClass = 'thy-btn-icon-only';
  * @order 10
  */
 class ThyButton {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this._initialized = false;
-        // 圆角方形
-        this._isRadiusSquare = false;
-        this.hostRenderer = useHostRenderer();
-    }
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    /**
-     * 按钮类型，支持添加前缀`outline-`实现线框按钮，支持添加前缀`link-`实现按钮链接
-     * @type primary | info | warning | danger | success
-     * @default primary
-     */
-    set thyButton(value) {
-        this.setBtnType(value);
-    }
-    /**
-     * 和`thyButton`参数一样，一般使用`thyButton`，为了减少参数输入, 当通过`thy-button`使用时，只能使用该参数控制类型
-     * @default primary
-     */
-    set thyType(value) {
-        this.setBtnType(value);
-    }
-    /**
-     * 加载状态
-     * @default false
-     */
-    set thyLoading(value) {
-        if (!this._loading && value) {
-            this._loading = value;
-            const textElement = this.nativeElement.querySelector('span');
-            this._originalText = textElement ? textElement.innerText : '';
-            this.setLoadingStatus();
-        }
-        else {
-            this._loading = value;
-            this.setLoadingStatus();
-        }
-    }
-    /**
-     * 加载状态时显示的文案
-     */
-    set thyLoadingText(value) {
-        if (this._loadingText !== value) {
-            this._loadingText = value;
-            if (this._loading) {
-                this.setLoadingText(this._loadingText);
-            }
-        }
-    }
-    /**
-     * 按钮大小
-     * @type xs | sm | md | default | lg
-     * @default default
-     */
-    set thySize(size) {
-        this._size = size;
-        if (this._initialized) {
-            this.updateClasses();
-        }
-    }
-    /**
-     * 按钮中显示的图标，支持SVG图标名称，比如`angle-left`，也支持传之前的 wtf 字体，比如: wtf-plus
-     */
-    set thyIcon(icon) {
-        this._icon = icon;
-        if (this._icon) {
-            if (icon.includes('wtf')) {
-                const classes = this._icon.split(' ');
-                if (classes.length === 1) {
-                    classes.unshift('wtf');
-                }
-                this.iconClass = classes;
-                this.svgIconName = null;
-            }
-            else {
-                this.svgIconName = icon;
-            }
-        }
-        else {
-            this.iconClass = null;
-            this.svgIconName = null;
-        }
-    }
-    setBtnType(value) {
-        if (value) {
-            if (value.includes('-square')) {
-                this._type = value.replace('-square', '');
-                this._isRadiusSquare = true;
-            }
-            else {
-                this._type = value;
-            }
-            if (this._initialized) {
-                this.updateClasses();
-            }
-        }
-    }
-    setLoadingText(text) {
+    setButtonText() {
+        const text = this.thyLoading() ? this.thyLoadingText() : this._originalText;
         const spanElement = this.nativeElement.querySelector('span');
-        if (spanElement) {
+        if (spanElement && text) {
             this.renderer.setProperty(spanElement, 'innerText', text);
         }
     }
-    setLoadingStatus() {
-        const innerText = this._loading ? this._loadingText : this._originalText;
-        this.updateClasses();
-        if (innerText) {
-            this.setLoadingText(innerText);
-        }
-    }
     updateClasses() {
+        const type = this.type();
+        if (!type) {
+            return;
+        }
         let classNames = [];
-        if (btnTypeClassesMap[this._type]) {
-            classNames = [...btnTypeClassesMap[this._type]];
+        if (btnTypeClassesMap[type]) {
+            classNames = [...btnTypeClassesMap[type]];
         }
         else {
-            if (this._type) {
-                classNames.push(`btn-${this._type}`);
+            if (type) {
+                classNames.push(`btn-${type}`);
             }
         }
-        if (this._size) {
-            classNames.push(`btn-${this._size}`);
+        const size = this.thySize();
+        if (size) {
+            classNames.push(`btn-${size}`);
         }
-        if (this._isRadiusSquare) {
+        if (this.isRadiusSquare()) {
             classNames.push('btn-square');
         }
-        if (this._loading) {
+        const loading = this.thyLoading();
+        if (loading) {
             classNames.push('loading');
         }
         this.hostRenderer.updateClass(classNames);
     }
-    ngOnInit() {
-        this.updateClasses();
-        this._initialized = true;
-    }
-    ngAfterViewInit() {
-        if (assertIconOnly(this.nativeElement)) {
-            this.hostRenderer.addClass(iconOnlyClass);
-        }
-        else {
-            this.hostRenderer.removeClass(iconOnlyClass);
-        }
-        this.wrapSpanForText(this.nativeElement.childNodes);
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.hostRenderer = useHostRenderer();
+        /**
+         * 按钮类型，支持添加前缀`outline-`实现线框按钮，支持添加前缀`link-`实现按钮链接
+         * @type primary | info | warning | danger | success
+         * @default primary
+         */
+        this.thyButton = input();
+        /**
+         * 和`thyButton`参数一样，一般使用`thyButton`，为了减少参数输入, 当通过`thy-button`使用时，只能使用该参数控制类型
+         * @default primary
+         */
+        this.thyType = input();
+        /**
+         * 加载状态
+         * @default false
+         */
+        this.thyLoading = input(false, {
+            transform: value => {
+                if (!this.thyLoading() && value) {
+                    const textElement = this.nativeElement?.querySelector('span');
+                    this._originalText = textElement ? textElement.innerText : '';
+                }
+                return coerceBooleanProperty$1(value);
+            }
+        });
+        /**
+         * 加载状态时显示的文案
+         */
+        this.thyLoadingText = input();
+        /**
+         * 按钮大小
+         * @type xs | sm | md | default | lg
+         * @default default
+         */
+        this.thySize = input();
+        /**
+         * 按钮中显示的图标，支持SVG图标名称，比如`angle-left`，也支持传之前的 wtf 字体，比如: wtf-plus
+         */
+        this.thyIcon = input();
+        /**
+         * 按钮整块展示
+         * @default false
+         */
+        this.thyBlock = input(false, { transform: coerceBooleanProperty$1 });
+        this.isWtfIcon = computed(() => {
+            const icon = this.thyIcon();
+            return icon && icon.includes('wtf');
+        });
+        this.svgIconName = computed(() => {
+            if (!this.isWtfIcon()) {
+                return this.thyIcon();
+            }
+            return null;
+        });
+        this.iconClass = computed(() => {
+            const icon = this.thyIcon();
+            if (this.isWtfIcon()) {
+                const classes = icon.split(' ');
+                if (classes.length === 1) {
+                    classes.unshift('wtf');
+                }
+                return classes;
+            }
+            return null;
+        });
+        this.buttonType = computed(() => {
+            return this.thyButton() || this.thyType();
+        });
+        this.isRadiusSquare = computed(() => {
+            const type = this.buttonType();
+            return !!type?.includes('-square');
+        });
+        this.type = computed(() => {
+            const type = this.buttonType();
+            if (this.isRadiusSquare()) {
+                return type.replace('-square', '');
+            }
+            else {
+                return type;
+            }
+        });
+        effect(() => {
+            this.updateClasses();
+        });
+        effect(() => {
+            this.setButtonText();
+        });
+        afterNextRender(() => {
+            if (assertIconOnly(this.nativeElement)) {
+                this.hostRenderer.addClass(iconOnlyClass);
+            }
+            else {
+                this.hostRenderer.removeClass(iconOnlyClass);
+            }
+            this.wrapSpanForText(this.nativeElement.childNodes);
+        });
     }
     wrapSpanForText(nodes) {
         nodes.forEach(node => {
@@ -433,33 +354,15 @@ class ThyButton {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyButton, isStandalone: true, selector: "thy-button,[thy-button],[thyButton]", inputs: { thyButton: "thyButton", thyType: "thyType", thyLoading: ["thyLoading", "thyLoading", coerceBooleanProperty$1], thyLoadingText: "thyLoadingText", thySize: "thySize", thyIcon: "thyIcon", thyBlock: ["thyBlock", "thyBlock", coerceBooleanProperty$1] }, host: { properties: { "class.btn-block": "this.thyBlock" }, classAttribute: "thy-btn btn" }, ngImport: i0, template: "@if (svgIconName) {\n  <thy-icon [thyIconName]=\"svgIconName\"></thy-icon>\n} @else {\n  @if (iconClass) {\n    <i [ngClass]=\"iconClass\"></i>\n  }\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyButton, isStandalone: true, selector: "thy-button,[thy-button],[thyButton]", inputs: { thyButton: { classPropertyName: "thyButton", publicName: "thyButton", isSignal: true, isRequired: false, transformFunction: null }, thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thyLoading: { classPropertyName: "thyLoading", publicName: "thyLoading", isSignal: true, isRequired: false, transformFunction: null }, thyLoadingText: { classPropertyName: "thyLoadingText", publicName: "thyLoadingText", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyIcon: { classPropertyName: "thyIcon", publicName: "thyIcon", isSignal: true, isRequired: false, transformFunction: null }, thyBlock: { classPropertyName: "thyBlock", publicName: "thyBlock", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-block": "thyBlock()" }, classAttribute: "thy-btn btn" }, ngImport: i0, template: "@if (svgIconName()) {\n  <thy-icon [thyIconName]=\"svgIconName()\"></thy-icon>\n} @else {\n  @if (iconClass()) {\n    <i [ngClass]=\"iconClass()\"></i>\n  }\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyButton, decorators: [{
             type: Component,
             args: [{ selector: 'thy-button,[thy-button],[thyButton]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'thy-btn btn'
-                    }, imports: [ThyIcon, NgClass], template: "@if (svgIconName) {\n  <thy-icon [thyIconName]=\"svgIconName\"></thy-icon>\n} @else {\n  @if (iconClass) {\n    <i [ngClass]=\"iconClass\"></i>\n  }\n}\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { thyButton: [{
-                type: Input
-            }], thyType: [{
-                type: Input
-            }], thyLoading: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }], thyLoadingText: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyIcon: [{
-                type: Input
-            }], thyBlock: [{
-                type: HostBinding,
-                args: [`class.btn-block`]
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty$1 }]
-            }] } });
+                        class: 'thy-btn btn',
+                        '[class.btn-block]': 'thyBlock()'
+                    }, imports: [ThyIcon, NgClass], template: "@if (svgIconName()) {\n  <thy-icon [thyIconName]=\"svgIconName()\"></thy-icon>\n} @else {\n  @if (iconClass()) {\n    <i [ngClass]=\"iconClass()\"></i>\n  }\n}\n<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [] });
 
 class ThyButtonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }