coer-elements 2.0.41 → 2.0.43

package/components/lib/coer-button/coer-button.component.d.ts

@@ -6,7 +6,7 @@ export declare class CoerButton implements AfterViewInit {
     protected _innerButton: HTMLElement;
     protected _innerButtonIcon: HTMLElement;
     id: import("@angular/core").InputSignal<string>;
-    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "dark" | "light" | "information">;
+    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light">;
     type: import("@angular/core").InputSignal<"filled" | "outline" | "icon" | "icon-outline" | "icon-no-border">;
     typeBreakpoint: import("@angular/core").InputSignal<IButtonType>;
     icon: import("@angular/core").InputSignal<string | null | undefined>;

package/components/lib/coer-secretbox/coer-secretbox.component.d.ts

@@ -43,7 +43,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
     protected get _passwordType(): boolean;
     protected _isEnable: import("@angular/core").Signal<boolean>;
     protected _floatLabel: import("@angular/core").Signal<"auto" | "always">;
-    protected _paddingRight: import("@angular/core").Signal<"0px" | "45px" | "18px">;
+    protected _paddingRight: import("@angular/core").Signal<"0px" | "18px" | "45px">;
     /** */
     Focus(select?: boolean, delay?: number): void;
     /** */

package/fesm2022/coer-elements-components.mjs

@@ -271,15 +271,20 @@ class CoerButton {
     Focus(timeout = 0) {
         Tools.Sleep(timeout).then(() => {
             if (this._isEnable()) {
-                this._innerButton.focus();
+                if (this._showButton()) {
+                    this._innerButton?.focus();
+                }
+                else if (this._showButtonIcon()) {
+                    this._innerButtonIcon?.focus();
+                }
             }
         });
     }
     /** */
     Blur(timeout = 0) {
         Tools.Sleep(timeout).then(() => {
-            this._innerButton.blur();
-            this._innerButtonIcon.focus();
+            this._innerButton?.blur();
+            this._innerButtonIcon?.blur();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -640,7 +645,7 @@ class CoerModal {
     }
     /** */
     Open() {
-        this._modal.show();
+        this._modal?.show();
         if (!this._isOpen) {
             this._isOpen = true;
             this._isModalOpen.set(true);
@@ -649,7 +654,7 @@ class CoerModal {
     }
     /** */
     Close() {
-        this._modal.hide();
+        this._modal?.hide();
         if (this._isOpen) {
             HTMLElements.GetElement(`#${this._id}-button-close`)?.blur();
             this._isOpen = false;
@@ -1290,95 +1295,89 @@ class CoerSelectbox extends ControlValue {
         Tools.Sleep().then(_ => {
             //Container
             const container = document.getElementById(`${this._id}-container`);
-            if (container) {
-                container.addEventListener('mouseenter', () => {
-                    this._isOverMenu.set(true);
-                });
-                container.addEventListener('mouseleave', () => {
-                    this._isOverMenu.set(false);
-                });
-            }
+            container?.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            container?.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
             //DropDown
             this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
-            if (this._dropDownMenu) {
-                this._dropDownMenu.addEventListener('mouseenter', () => {
-                    this._isOverMenu.set(true);
-                });
-                this._dropDownMenu.addEventListener('mouseleave', () => {
-                    this._isOverMenu.set(false);
-                });
-            }
+            this._dropDownMenu?.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            this._dropDownMenu?.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
             //TextBox
             this._textbox = document.getElementById(this._id);
-            if (this._textbox) {
-                this._textbox.addEventListener('focus', () => {
-                    if (this._isEnable())
-                        this.Focus();
-                    else
-                        this.Blur();
-                });
-                this._textbox.addEventListener('keyup', (event) => {
-                    const { key } = event;
-                    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
-                        if (key === 'ArrowUp') {
-                            const firstIndex = (this._dataSource().length <= 0) ? -1 : 0;
-                            if ((this._index() - 1) >= firstIndex) {
-                                this._index.update(index => index - 1);
-                                if (this._index() >= 3)
-                                    this._scroll.update(scroll => scroll -= this._scrollByRow);
-                                else
-                                    this._scroll.set(0);
-                                this._dropDownMenu.scrollTo(0, this._scroll());
-                            }
-                            else {
+            this._textbox?.addEventListener('focus', () => {
+                if (this._isEnable())
+                    this.Focus();
+                else
+                    this.Blur();
+            });
+            this._textbox?.addEventListener('keyup', (event) => {
+                const { key } = event;
+                if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+                    if (key === 'ArrowUp') {
+                        const firstIndex = (this._dataSource().length <= 0) ? -1 : 0;
+                        if ((this._index() - 1) >= firstIndex) {
+                            this._index.update(index => index - 1);
+                            if (this._index() >= 3)
+                                this._scroll.update(scroll => scroll -= this._scrollByRow);
+                            else
                                 this._scroll.set(0);
-                                this._index.set(-1);
-                                this._textbox.focus();
-                                this._textbox.select();
-                            }
-                            this._dropDownMenu.scrollTo(0, this._scroll());
+                            this._dropDownMenu?.scrollTo(0, this._scroll());
                         }
-                        else if (key === 'ArrowDown') {
-                            const lastIndex = (this._dataSource().length - 1);
-                            if ((this._index() + 1) <= lastIndex) {
-                                this._index.update(index => index + 1);
-                                if (this._index() >= 3)
-                                    this._scroll.update(scroll => scroll += this._scrollByRow);
-                            }
-                            this._dropDownMenu.scrollTo(0, this._scroll());
+                        else {
+                            this._scroll.set(0);
+                            this._index.set(-1);
+                            this._textbox.focus();
+                            this._textbox.select();
                         }
-                        else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
-                            if (Tools.IsNotNull(this._value) && !this._isDirty()) {
-                                this._scroll.set(0);
-                                this._dropDownMenu.scrollTo(0, this._scroll());
-                                this._Search(this._displayed);
-                            }
-                            this._isDirty.set(true);
+                        this._dropDownMenu?.scrollTo(0, this._scroll());
+                    }
+                    else if (key === 'ArrowDown') {
+                        const lastIndex = (this._dataSource().length - 1);
+                        if ((this._index() + 1) <= lastIndex) {
+                            this._index.update(index => index + 1);
+                            if (this._index() >= 3)
+                                this._scroll.update(scroll => scroll += this._scrollByRow);
                         }
+                        this._dropDownMenu?.scrollTo(0, this._scroll());
                     }
-                    else {
-                        if (key == 'Delete' && this._search() == '') {
-                            this.Unselect();
+                    else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
+                        if (Tools.IsNotNull(this._value) && !this._isDirty()) {
+                            this._scroll.set(0);
+                            this._dropDownMenu?.scrollTo(0, this._scroll());
+                            this._Search(this._displayed);
                         }
                         this._isDirty.set(true);
                     }
+                }
+                else {
+                    if (key == 'Delete' && this._search() == '') {
+                        this.Unselect();
+                    }
+                    this._isDirty.set(true);
+                }
+            });
+            this._textbox.addEventListener('keydown', () => {
+                if (!this._isOpen())
+                    this._Open();
+            });
+            this._textbox.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            this._textbox.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
+            this._textbox.addEventListener('paste', () => {
+                Tools.Sleep().then(_ => {
+                    this._search.update(search => search = search.toString().trim());
                 });
-                this._textbox.addEventListener('keydown', () => {
-                    if (!this._isOpen())
-                        this._Open();
-                });
-                this._textbox.addEventListener('mouseenter', () => {
-                    this._isOverMenu.set(true);
-                });
-                this._textbox.addEventListener('mouseleave', () => {
-                    this._isOverMenu.set(false);
-                });
-                this._textbox.addEventListener('paste', () => {
-                    Tools.Sleep().then(_ => {
-                        this._search.update(search => search = search.toString().trim());
-                    });
-                });
-            }
+            });
             //Document
             document.addEventListener('click', () => {
                 if (!this._isOverMenu())
@@ -1481,8 +1480,8 @@ class CoerSelectbox extends ControlValue {
             this._isLoadingEvent.set(true);
         Tools.Sleep(delay).then(_ => {
             if (this._isEnable()) {
-                this._textbox.focus();
-                this._textbox.select();
+                this._textbox?.focus();
+                this._textbox?.select();
                 if (open)
                     this._Open();
             }
@@ -1502,10 +1501,10 @@ class CoerSelectbox extends ControlValue {
         this._isDirty.set(false);
         this._index.set(-1);
         this._scroll.set(0);
-        this._dropDownMenu.scrollTo(0, this._scroll());
+        this._dropDownMenu?.scrollTo(0, this._scroll());
         this._search.set(this._displayed);
         Tools.Sleep().then(_ => {
-            this._textbox.blur();
+            this._textbox?.blur();
             this._Close();
             Tools.Sleep().then(_ => {
                 const element = document.querySelector(`#${this._id}-container .mdc-line-ripple--active`);
@@ -1517,15 +1516,15 @@ class CoerSelectbox extends ControlValue {
     }
     /** */
     _Open() {
-        if (!this._dropDownMenu.classList.contains('show')) {
-            this._dropDownMenu.classList.add('show');
+        if (!this._dropDownMenu?.classList.contains('show')) {
+            this._dropDownMenu?.classList.add('show');
         }
         this._isOpen.set(true);
     }
     /** */
     _Close() {
-        if (this._dropDownMenu.classList.contains('show')) {
-            this._dropDownMenu.classList.remove('show');
+        if (this._dropDownMenu?.classList.contains('show')) {
+            this._dropDownMenu?.classList.remove('show');
         }
         this._isOpen.set(false);
     }
@@ -1542,7 +1541,7 @@ class CoerSelectbox extends ControlValue {
                 else {
                     this._scroll.set(0);
                 }
-                this._dropDownMenu.scrollTo(0, this._scroll());
+                this._dropDownMenu?.scrollTo(0, this._scroll());
             }
         });
     }