ngx-touch-keyboard 4.3.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, ElementRef, output, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, Directive, model, input, booleanAttribute, effect, NgModule } from '@angular/core';
2
+ import { InjectionToken, inject, ElementRef, output, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, Directive, model, input, booleanAttribute, NgModule } from '@angular/core';
3
3
  import { DomSanitizer } from '@angular/platform-browser';
4
4
  import * as i1 from '@angular/cdk/bidi';
5
5
  import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
@@ -1650,11 +1650,11 @@ class NgxTouchKeyboardComponent {
1650
1650
  }
1651
1651
  }
1652
1652
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxTouchKeyboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1653
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgxTouchKeyboardComponent, selector: "ngx-touch-keyboard", outputs: { closePanel: "closePanel" }, host: { listeners: { "window:keyup": "handleKeyUp($event)", "window:keydown": "handleKeyDown($event)", "window:pointerup": "handleMouseUp($event)", "window:select": "handleSelect($event)", "window:selectionchange": "handleSelectionChange($event)" } }, ngImport: i0, template: "<div class=\"touch-keyboard\" [class]=\"'layout-' + layoutMode + '-' + layoutName\">\r\n @for (row of locale.layouts[layoutMode + \"_\" + layoutName]; track row[0]; let rowIndex = $index) {\r\n <div class=\"touch-keyboard-row\">\r\n @for (key of row; track key) {\r\n <button\r\n [name]=\"key\"\r\n type=\"button\"\r\n [dir]=\"locale.dir\"\r\n class=\"touch-keyboard-key\"\r\n [class]=\"getButtonClass(key)\"\r\n [attr.data-layout]=\"layoutMode\"\r\n (pointerup)=\"handleButtonUp(key, $event)\"\r\n (pointerdown)=\"handleButtonDown(key, $event)\"\r\n (pointercancel)=\"handleButtonUp(key, $event)\"\r\n [innerHtml]=\"getButtonDisplayName(key)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--tk-color-text: #27272a;--tk-background: rgba(238, 238, 238, .87);--tk-background-button: rgba(255, 255, 255, .96);--tk-background-button-fn: rgba(255, 255, 255, .5);--tk-background-button-active: rgba(0, 0, 0, .04)}.dark{--tk-color-text: #ffffff;--tk-background: rgba(33, 33, 33, .87);--tk-background-button: rgba(66, 66, 66, .96);--tk-background-button-fn: rgba(66, 66, 66, .5);--tk-background-button-active: rgba(255, 255, 255, .2)}ngx-touch-keyboard{width:100%;padding:.25rem .25rem .375rem;border-radius:.375rem;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--tk-background);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.ngx-touch-keyboard-fullScreen>ngx-touch-keyboard{border-radius:0}.touch-keyboard{flex:1 1 auto;max-width:840px}.touch-keyboard .touch-keyboard-row{display:flex;flex-direction:row}.touch-keyboard .touch-keyboard-row:not(:last-child){margin-bottom:.25rem}.touch-keyboard .touch-keyboard-key{width:20px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;text-align:center;margin:0;line-height:32px;padding:.25rem;border-radius:.375rem;font-size:14px;font-weight:500;display:flex;flex-grow:1;align-items:center;justify-content:center;color:var(--tk-color-text);background-color:var(--tk-background-button);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.touch-keyboard .touch-keyboard-key>svg{fill:var(--tk-color-text)}.touch-keyboard .touch-keyboard-key.function-key:not(.space-key){background-color:var(--tk-background-button-fn)}.touch-keyboard .touch-keyboard-key.active{background-color:var(--tk-background-button-active)!important}.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:4rem}.touch-keyboard .touch-keyboard-key.space-key{min-width:40%}.touch-keyboard .touch-keyboard-key.hidden-key{visibility:hidden}.touch-keyboard .touch-keyboard-key[data-layout=numeric],.touch-keyboard .touch-keyboard-key[data-layout=decimal],.touch-keyboard .touch-keyboard-key[data-layout=tel]{width:24.33%!important;max-width:none!important}.touch-keyboard .touch-keyboard-key[data-layout=numeric].function-key,.touch-keyboard .touch-keyboard-key[data-layout=decimal].function-key,.touch-keyboard .touch-keyboard-key[data-layout=tel].function-key{max-width:24.33%!important}.touch-keyboard .touch-keyboard-key:not(:last-child){margin-right:.25rem}@media (min-width: 600px){.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:6rem}}\n"], dependencies: [{ kind: "directive", type: i1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1653
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgxTouchKeyboardComponent, selector: "ngx-touch-keyboard", outputs: { closePanel: "closePanel" }, host: { listeners: { "window:keyup": "handleKeyUp($event)", "window:keydown": "handleKeyDown($event)", "window:pointerup": "handleMouseUp($event)", "window:select": "handleSelect($event)", "window:selectionchange": "handleSelectionChange($event)" } }, ngImport: i0, template: "<div class=\"touch-keyboard\" [class]=\"'layout-' + layoutMode + '-' + layoutName\">\r\n @for (row of locale.layouts[layoutMode + \"_\" + layoutName]; track row[0]) {\r\n <div class=\"touch-keyboard-row\">\r\n @for (key of row; track key) {\r\n <button\r\n [name]=\"key\"\r\n type=\"button\"\r\n [dir]=\"locale.dir\"\r\n class=\"touch-keyboard-key\"\r\n [class]=\"getButtonClass(key)\"\r\n [attr.data-layout]=\"layoutMode\"\r\n (pointerup)=\"handleButtonUp(key, $event)\"\r\n (pointerdown)=\"handleButtonDown(key, $event)\"\r\n (pointercancel)=\"handleButtonUp(key, $event)\"\r\n [innerHtml]=\"getButtonDisplayName(key)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--tk-color-text: #27272a;--tk-background: rgba(238, 238, 238, .87);--tk-background-button: rgba(255, 255, 255, .96);--tk-background-button-fn: rgba(255, 255, 255, .5);--tk-background-button-active: rgba(0, 0, 0, .04)}.dark{--tk-color-text: #ffffff;--tk-background: rgba(33, 33, 33, .87);--tk-background-button: rgba(66, 66, 66, .96);--tk-background-button-fn: rgba(66, 66, 66, .5);--tk-background-button-active: rgba(255, 255, 255, .2)}ngx-touch-keyboard{width:100%;padding:.25rem .25rem .375rem;border-radius:.375rem;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--tk-background);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.ngx-touch-keyboard-fullScreen>ngx-touch-keyboard{border-radius:0}.touch-keyboard{flex:1 1 auto;max-width:840px}.touch-keyboard .touch-keyboard-row{display:flex;flex-direction:row}.touch-keyboard .touch-keyboard-row:not(:last-child){margin-bottom:.25rem}.touch-keyboard .touch-keyboard-key{width:20px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;text-align:center;margin:0;line-height:32px;padding:.25rem;border-radius:.375rem;font-size:14px;font-weight:500;display:flex;flex-grow:1;align-items:center;justify-content:center;color:var(--tk-color-text);background-color:var(--tk-background-button);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.touch-keyboard .touch-keyboard-key>svg{fill:var(--tk-color-text)}.touch-keyboard .touch-keyboard-key.function-key:not(.space-key){background-color:var(--tk-background-button-fn)}.touch-keyboard .touch-keyboard-key.active{background-color:var(--tk-background-button-active)!important}.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:4rem}.touch-keyboard .touch-keyboard-key.space-key{min-width:40%}.touch-keyboard .touch-keyboard-key.hidden-key{visibility:hidden}.touch-keyboard .touch-keyboard-key[data-layout=numeric],.touch-keyboard .touch-keyboard-key[data-layout=decimal],.touch-keyboard .touch-keyboard-key[data-layout=tel]{width:24.33%!important;max-width:none!important}.touch-keyboard .touch-keyboard-key[data-layout=numeric].function-key,.touch-keyboard .touch-keyboard-key[data-layout=decimal].function-key,.touch-keyboard .touch-keyboard-key[data-layout=tel].function-key{max-width:24.33%!important}.touch-keyboard .touch-keyboard-key:not(:last-child){margin-right:.25rem}@media (min-width: 600px){.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:6rem}}\n"], dependencies: [{ kind: "directive", type: i1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1654
1654
  }
1655
1655
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxTouchKeyboardComponent, decorators: [{
1656
1656
  type: Component,
1657
- args: [{ selector: 'ngx-touch-keyboard', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"touch-keyboard\" [class]=\"'layout-' + layoutMode + '-' + layoutName\">\r\n @for (row of locale.layouts[layoutMode + \"_\" + layoutName]; track row[0]; let rowIndex = $index) {\r\n <div class=\"touch-keyboard-row\">\r\n @for (key of row; track key) {\r\n <button\r\n [name]=\"key\"\r\n type=\"button\"\r\n [dir]=\"locale.dir\"\r\n class=\"touch-keyboard-key\"\r\n [class]=\"getButtonClass(key)\"\r\n [attr.data-layout]=\"layoutMode\"\r\n (pointerup)=\"handleButtonUp(key, $event)\"\r\n (pointerdown)=\"handleButtonDown(key, $event)\"\r\n (pointercancel)=\"handleButtonUp(key, $event)\"\r\n [innerHtml]=\"getButtonDisplayName(key)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--tk-color-text: #27272a;--tk-background: rgba(238, 238, 238, .87);--tk-background-button: rgba(255, 255, 255, .96);--tk-background-button-fn: rgba(255, 255, 255, .5);--tk-background-button-active: rgba(0, 0, 0, .04)}.dark{--tk-color-text: #ffffff;--tk-background: rgba(33, 33, 33, .87);--tk-background-button: rgba(66, 66, 66, .96);--tk-background-button-fn: rgba(66, 66, 66, .5);--tk-background-button-active: rgba(255, 255, 255, .2)}ngx-touch-keyboard{width:100%;padding:.25rem .25rem .375rem;border-radius:.375rem;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--tk-background);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.ngx-touch-keyboard-fullScreen>ngx-touch-keyboard{border-radius:0}.touch-keyboard{flex:1 1 auto;max-width:840px}.touch-keyboard .touch-keyboard-row{display:flex;flex-direction:row}.touch-keyboard .touch-keyboard-row:not(:last-child){margin-bottom:.25rem}.touch-keyboard .touch-keyboard-key{width:20px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;text-align:center;margin:0;line-height:32px;padding:.25rem;border-radius:.375rem;font-size:14px;font-weight:500;display:flex;flex-grow:1;align-items:center;justify-content:center;color:var(--tk-color-text);background-color:var(--tk-background-button);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.touch-keyboard .touch-keyboard-key>svg{fill:var(--tk-color-text)}.touch-keyboard .touch-keyboard-key.function-key:not(.space-key){background-color:var(--tk-background-button-fn)}.touch-keyboard .touch-keyboard-key.active{background-color:var(--tk-background-button-active)!important}.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:4rem}.touch-keyboard .touch-keyboard-key.space-key{min-width:40%}.touch-keyboard .touch-keyboard-key.hidden-key{visibility:hidden}.touch-keyboard .touch-keyboard-key[data-layout=numeric],.touch-keyboard .touch-keyboard-key[data-layout=decimal],.touch-keyboard .touch-keyboard-key[data-layout=tel]{width:24.33%!important;max-width:none!important}.touch-keyboard .touch-keyboard-key[data-layout=numeric].function-key,.touch-keyboard .touch-keyboard-key[data-layout=decimal].function-key,.touch-keyboard .touch-keyboard-key[data-layout=tel].function-key{max-width:24.33%!important}.touch-keyboard .touch-keyboard-key:not(:last-child){margin-right:.25rem}@media (min-width: 600px){.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:6rem}}\n"] }]
1657
+ args: [{ selector: 'ngx-touch-keyboard', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"touch-keyboard\" [class]=\"'layout-' + layoutMode + '-' + layoutName\">\r\n @for (row of locale.layouts[layoutMode + \"_\" + layoutName]; track row[0]) {\r\n <div class=\"touch-keyboard-row\">\r\n @for (key of row; track key) {\r\n <button\r\n [name]=\"key\"\r\n type=\"button\"\r\n [dir]=\"locale.dir\"\r\n class=\"touch-keyboard-key\"\r\n [class]=\"getButtonClass(key)\"\r\n [attr.data-layout]=\"layoutMode\"\r\n (pointerup)=\"handleButtonUp(key, $event)\"\r\n (pointerdown)=\"handleButtonDown(key, $event)\"\r\n (pointercancel)=\"handleButtonUp(key, $event)\"\r\n [innerHtml]=\"getButtonDisplayName(key)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root{--tk-color-text: #27272a;--tk-background: rgba(238, 238, 238, .87);--tk-background-button: rgba(255, 255, 255, .96);--tk-background-button-fn: rgba(255, 255, 255, .5);--tk-background-button-active: rgba(0, 0, 0, .04)}.dark{--tk-color-text: #ffffff;--tk-background: rgba(33, 33, 33, .87);--tk-background-button: rgba(66, 66, 66, .96);--tk-background-button-fn: rgba(66, 66, 66, .5);--tk-background-button-active: rgba(255, 255, 255, .2)}ngx-touch-keyboard{width:100%;padding:.25rem .25rem .375rem;border-radius:.375rem;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--tk-background);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.ngx-touch-keyboard-fullScreen>ngx-touch-keyboard{border-radius:0}.touch-keyboard{flex:1 1 auto;max-width:840px}.touch-keyboard .touch-keyboard-row{display:flex;flex-direction:row}.touch-keyboard .touch-keyboard-row:not(:last-child){margin-bottom:.25rem}.touch-keyboard .touch-keyboard-key{width:20px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;text-align:center;margin:0;line-height:32px;padding:.25rem;border-radius:.375rem;font-size:14px;font-weight:500;display:flex;flex-grow:1;align-items:center;justify-content:center;color:var(--tk-color-text);background-color:var(--tk-background-button);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.touch-keyboard .touch-keyboard-key>svg{fill:var(--tk-color-text)}.touch-keyboard .touch-keyboard-key.function-key:not(.space-key){background-color:var(--tk-background-button-fn)}.touch-keyboard .touch-keyboard-key.active{background-color:var(--tk-background-button-active)!important}.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:4rem}.touch-keyboard .touch-keyboard-key.space-key{min-width:40%}.touch-keyboard .touch-keyboard-key.hidden-key{visibility:hidden}.touch-keyboard .touch-keyboard-key[data-layout=numeric],.touch-keyboard .touch-keyboard-key[data-layout=decimal],.touch-keyboard .touch-keyboard-key[data-layout=tel]{width:24.33%!important;max-width:none!important}.touch-keyboard .touch-keyboard-key[data-layout=numeric].function-key,.touch-keyboard .touch-keyboard-key[data-layout=decimal].function-key,.touch-keyboard .touch-keyboard-key[data-layout=tel].function-key{max-width:24.33%!important}.touch-keyboard .touch-keyboard-key:not(:last-child){margin-right:.25rem}@media (min-width: 600px){.touch-keyboard .touch-keyboard-key.alphabetic-key,.touch-keyboard .touch-keyboard-key.backspace-key,.touch-keyboard .touch-keyboard-key.shift-key,.touch-keyboard .touch-keyboard-key.numeric-key,.touch-keyboard .touch-keyboard-key.symbolic-key,.touch-keyboard .touch-keyboard-key.language-key,.touch-keyboard .touch-keyboard-key.search-key,.touch-keyboard .touch-keyboard-key.enter-key,.touch-keyboard .touch-keyboard-key.done-key{max-width:6rem}}\n"] }]
1658
1658
  }], propDecorators: { handleKeyUp: [{
1659
1659
  type: HostListener,
1660
1660
  args: ['window:keyup', ['$event']]
@@ -1695,14 +1695,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
1695
1695
  * It also handles the creation and configuration of the overlay used to display the keyboard.
1696
1696
  */
1697
1697
  class NgxTouchKeyboardDirective {
1698
- onFocus() {
1699
- if (this.openOnFocus()) {
1700
- this.open.set(true);
1701
- }
1702
- }
1703
- /**
1704
- * constructor
1705
- */
1706
1698
  constructor() {
1707
1699
  this._overlay = inject(Overlay);
1708
1700
  this._elementRef = inject((ElementRef));
@@ -1728,13 +1720,21 @@ class NgxTouchKeyboardDirective {
1728
1720
  this.origin = input(null, {
1729
1721
  alias: 'ngxConnectedTouchKeyboardOrigin',
1730
1722
  });
1731
- effect(() => {
1732
- this.open() ? this.openPanel() : this.closePanel();
1733
- });
1723
+ }
1724
+ onFocus() {
1725
+ if (this.openOnFocus() && !this.open()) {
1726
+ this.openPanel();
1727
+ }
1734
1728
  }
1735
1729
  // -----------------------------------------------------------------------------------------------------
1736
1730
  // @ Lifecycle hooks
1737
1731
  // -----------------------------------------------------------------------------------------------------
1732
+ /**
1733
+ * On changes
1734
+ */
1735
+ ngOnChanges() {
1736
+ this.open() ? this.openPanel() : this.closePanel();
1737
+ }
1738
1738
  /**
1739
1739
  * On destroy
1740
1740
  */
@@ -1770,15 +1770,17 @@ class NgxTouchKeyboardDirective {
1770
1770
  this._overlayRef.updatePositionStrategy(this._getPositionStrategy(this.fullScreenMode()));
1771
1771
  // Update size the overlay
1772
1772
  this._overlayRef.updateSize(this._getOverlaySize(this.fullScreenMode()));
1773
+ // Get the input element associated with the directive
1774
+ const inputElement = this._getInputElement();
1773
1775
  // Set input to readonly on mobile devices to prevent the native keyboard from appearing
1774
1776
  if (this._isMobile)
1775
- this._elementRef.nativeElement.readOnly = true;
1777
+ inputElement.readOnly = true;
1776
1778
  // Attach the portal to the overlay
1777
1779
  this._panelRef = this._overlayRef.attach(new ComponentPortal(NgxTouchKeyboardComponent));
1778
1780
  this._panelRef.instance.debug = this.debugMode();
1779
1781
  this._panelRef.instance.setLocale(this.locale());
1780
- this._panelRef.instance.setActiveInput(this._elementRef.nativeElement);
1781
- this._panelRef.instance.closePanel.subscribe(() => this.open.set(false));
1782
+ this._panelRef.instance.setActiveInput(inputElement);
1783
+ this._panelRef.instance.closePanel.subscribe(() => this.closePanel());
1782
1784
  this.open.set(true);
1783
1785
  }
1784
1786
  /**
@@ -1796,12 +1798,7 @@ class NgxTouchKeyboardDirective {
1796
1798
  * Toggle keyboard panel
1797
1799
  */
1798
1800
  togglePanel() {
1799
- if (this.open()) {
1800
- this.closePanel();
1801
- }
1802
- else {
1803
- this.openPanel();
1804
- }
1801
+ this.open() ? this.closePanel() : this.openPanel();
1805
1802
  }
1806
1803
  // -----------------------------------------------------------------------------------------------------
1807
1804
  // @ Private methods
@@ -1881,6 +1878,19 @@ class NgxTouchKeyboardDirective {
1881
1878
  minWidth: '260px',
1882
1879
  };
1883
1880
  }
1881
+ /**
1882
+ * Gets the input element associated with the directive.
1883
+ * This is necessary because when the directive is applied to an Ionic component (ion-input or ion-textarea),
1884
+ * the actual input element is nested inside the component's template.
1885
+ *
1886
+ * @private
1887
+ */
1888
+ _getInputElement() {
1889
+ if (['ION-INPUT', 'ION-TEXTAREA'].includes(this._elementRef.nativeElement.tagName)) {
1890
+ return this._elementRef.nativeElement.querySelector('input, textarea');
1891
+ }
1892
+ return this._elementRef.nativeElement;
1893
+ }
1884
1894
  /**
1885
1895
  * Gets the origin element for the keyboard panel.
1886
1896
  *
@@ -1905,17 +1915,23 @@ class NgxTouchKeyboardDirective {
1905
1915
  return element;
1906
1916
  }
1907
1917
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxTouchKeyboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1908
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgxTouchKeyboardDirective, selector: "input[ngxTouchKeyboard], textarea[ngxTouchKeyboard]", inputs: { open: { classPropertyName: "open", publicName: "ngxTouchKeyboardOpen", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "ngxTouchKeyboardOpenOnFocus", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "ngxTouchKeyboardLocale", isSignal: true, isRequired: false, transformFunction: null }, debugMode: { classPropertyName: "debugMode", publicName: "ngxTouchKeyboardDebug", isSignal: true, isRequired: false, transformFunction: null }, fullScreenMode: { classPropertyName: "fullScreenMode", publicName: "ngxTouchKeyboardFullScreen", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "ngxConnectedTouchKeyboardOrigin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "ngxTouchKeyboardOpenChange" }, host: { listeners: { "focus": "onFocus()" } }, exportAs: ["ngxTouchKeyboard"], ngImport: i0 }); }
1918
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgxTouchKeyboardDirective, selector: "input[ngxTouchKeyboard],\n textarea[ngxTouchKeyboard],\n ion-input[ngxTouchKeyboard],\n ion-textarea[ngxTouchKeyboard]", inputs: { open: { classPropertyName: "open", publicName: "ngxTouchKeyboardOpen", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "ngxTouchKeyboardOpenOnFocus", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "ngxTouchKeyboardLocale", isSignal: true, isRequired: false, transformFunction: null }, debugMode: { classPropertyName: "debugMode", publicName: "ngxTouchKeyboardDebug", isSignal: true, isRequired: false, transformFunction: null }, fullScreenMode: { classPropertyName: "fullScreenMode", publicName: "ngxTouchKeyboardFullScreen", isSignal: true, isRequired: false, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "ngxConnectedTouchKeyboardOrigin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "ngxTouchKeyboardOpenChange" }, host: { listeners: { "focus": "onFocus()", "ionFocus": "onFocus()" } }, exportAs: ["ngxTouchKeyboard"], usesOnChanges: true, ngImport: i0 }); }
1909
1919
  }
1910
1920
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxTouchKeyboardDirective, decorators: [{
1911
1921
  type: Directive,
1912
1922
  args: [{
1913
- selector: 'input[ngxTouchKeyboard], textarea[ngxTouchKeyboard]',
1923
+ selector: `input[ngxTouchKeyboard],
1924
+ textarea[ngxTouchKeyboard],
1925
+ ion-input[ngxTouchKeyboard],
1926
+ ion-textarea[ngxTouchKeyboard]`,
1914
1927
  exportAs: 'ngxTouchKeyboard',
1915
1928
  }]
1916
- }], ctorParameters: () => [], propDecorators: { onFocus: [{
1929
+ }], propDecorators: { onFocus: [{
1917
1930
  type: HostListener,
1918
1931
  args: ['focus']
1932
+ }, {
1933
+ type: HostListener,
1934
+ args: ['ionFocus']
1919
1935
  }] } });
1920
1936
 
1921
1937
  class NgxTouchKeyboardModule {