1 |
|
2 |
|
3 |
|
4 | import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
|
5 | import { b as arrowBackSharp, o as closeCircle, p as closeSharp, s as searchOutline, q as searchSharp } from './index6.js';
|
6 | import { c as config, b as getIonMode } from './ionic-global.js';
|
7 | import { k as debounceEvent, r as raf } from './helpers.js';
|
8 | import { i as isRTL } from './dir.js';
|
9 | import { c as createColorClasses } from './theme.js';
|
10 | import { d as defineCustomElement$2 } from './icon.js';
|
11 |
|
12 | const searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #3880ff);--clear-button-color:var(--ion-color-step-600, #666666);--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, #666666);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;height:60px;contain:strict}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.sc-ion-searchbar-ios-h{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.searchbar-input-container.sc-ion-searchbar-ios{height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:calc(50% - 60px);left:5px;top:0;position:absolute;width:22px;height:100%;contain:strict}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px)}}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}.searchbar-input.sc-ion-searchbar-ios{padding-left:28px;padding-right:28px;padding-top:0;padding-bottom:0;height:100%;font-size:17px;font-weight:400;contain:strict}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:28px;padding-inline-start:28px;-webkit-padding-end:28px;padding-inline-end:28px}}.searchbar-clear-button.sc-ion-searchbar-ios{right:0;top:0;background-position:center;position:absolute;width:30px;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:18px;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:8px;padding-right:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0;background-color:transparent;font-size:16px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:30px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:unset;-webkit-padding-start:30px;padding-inline-start:30px}}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-transition:all 300ms ease;transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:-100%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:all 300ms ease;transition:all 300ms ease;opacity:0;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:unset;-webkit-margin-end:-100%;margin-inline-end:-100%}}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-transition-duration:0ms;transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}";
|
13 |
|
14 | const searchbarMdCss = ".sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-md::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, #1a1a1a);--clear-button-color:initial;--color:var(--ion-color-step-850, #262626);--icon-color:var(--ion-color-step-600, #666666);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;background:inherit}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.searchbar-search-icon.sc-ion-searchbar-md{left:16px;top:11px;width:21px;height:21px}[dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{left:unset;right:unset;right:16px}.searchbar-cancel-button.sc-ion-searchbar-md{left:5px;top:0;background-color:transparent;font-size:1.6em}[dir=rtl].sc-ion-searchbar-md .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{left:unset;right:unset;right:5px}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{padding-left:55px;padding-right:55px;padding-top:6px;padding-bottom:6px;background-position:left 8px center;height:auto;font-size:16px;font-weight:400;line-height:30px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-md{padding-left:unset;padding-right:unset;-webkit-padding-start:55px;padding-inline-start:55px;-webkit-padding-end:55px;padding-inline-end:55px}}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}.searchbar-clear-button.sc-ion-searchbar-md{right:13px;top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-md .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl].sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{left:unset;right:unset;left:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:22px;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:7px;padding-right:7px;padding-top:3px;padding-bottom:3px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}";
|
15 |
|
16 | const Searchbar = proxyCustomElement(class extends HTMLElement {
|
17 | constructor() {
|
18 | super();
|
19 | this.__registerHost();
|
20 | this.ionInput = createEvent(this, "ionInput", 7);
|
21 | this.ionChange = createEvent(this, "ionChange", 7);
|
22 | this.ionCancel = createEvent(this, "ionCancel", 7);
|
23 | this.ionClear = createEvent(this, "ionClear", 7);
|
24 | this.ionBlur = createEvent(this, "ionBlur", 7);
|
25 | this.ionFocus = createEvent(this, "ionFocus", 7);
|
26 | this.ionStyle = createEvent(this, "ionStyle", 7);
|
27 | this.isCancelVisible = false;
|
28 | this.shouldAlignLeft = true;
|
29 | this.focused = false;
|
30 | this.noAnimate = true;
|
31 | |
32 |
|
33 |
|
34 | this.animated = false;
|
35 | |
36 |
|
37 |
|
38 | this.autocomplete = 'off';
|
39 | |
40 |
|
41 |
|
42 | this.autocorrect = 'off';
|
43 | |
44 |
|
45 |
|
46 |
|
47 | this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
|
48 | |
49 |
|
50 |
|
51 | this.cancelButtonText = 'Cancel';
|
52 | |
53 |
|
54 |
|
55 | this.debounce = 250;
|
56 | |
57 |
|
58 |
|
59 | this.disabled = false;
|
60 | |
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | this.placeholder = 'Search';
|
70 | |
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | this.showCancelButton = 'never';
|
78 | |
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | this.showClearButton = 'always';
|
87 | |
88 |
|
89 |
|
90 | this.spellcheck = false;
|
91 | |
92 |
|
93 |
|
94 | this.type = 'search';
|
95 | |
96 |
|
97 |
|
98 | this.value = '';
|
99 | |
100 |
|
101 |
|
102 | this.onClearInput = (ev, shouldFocus) => {
|
103 | this.ionClear.emit();
|
104 | if (ev) {
|
105 | ev.preventDefault();
|
106 | ev.stopPropagation();
|
107 | }
|
108 |
|
109 |
|
110 | setTimeout(() => {
|
111 | const value = this.getValue();
|
112 | if (value !== '') {
|
113 | this.value = '';
|
114 | this.ionInput.emit();
|
115 | |
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 | if (shouldFocus && !this.focused) {
|
122 | this.setFocus();
|
123 | }
|
124 | }
|
125 | }, 16 * 4);
|
126 | };
|
127 | |
128 |
|
129 |
|
130 |
|
131 |
|
132 | this.onCancelSearchbar = (ev) => {
|
133 | if (ev) {
|
134 | ev.preventDefault();
|
135 | ev.stopPropagation();
|
136 | }
|
137 | this.ionCancel.emit();
|
138 | this.onClearInput();
|
139 | if (this.nativeInput) {
|
140 | this.nativeInput.blur();
|
141 | }
|
142 | };
|
143 | |
144 |
|
145 |
|
146 | this.onInput = (ev) => {
|
147 | const input = ev.target;
|
148 | if (input) {
|
149 | this.value = input.value;
|
150 | }
|
151 | this.ionInput.emit(ev);
|
152 | };
|
153 | |
154 |
|
155 |
|
156 |
|
157 | this.onBlur = () => {
|
158 | this.focused = false;
|
159 | this.ionBlur.emit();
|
160 | this.positionElements();
|
161 | };
|
162 | |
163 |
|
164 |
|
165 | this.onFocus = () => {
|
166 | this.focused = true;
|
167 | this.ionFocus.emit();
|
168 | this.positionElements();
|
169 | };
|
170 | }
|
171 | debounceChanged() {
|
172 | this.ionChange = debounceEvent(this.ionChange, this.debounce);
|
173 | }
|
174 | valueChanged() {
|
175 | const inputEl = this.nativeInput;
|
176 | const value = this.getValue();
|
177 | if (inputEl && inputEl.value !== value) {
|
178 | inputEl.value = value;
|
179 | }
|
180 | this.ionChange.emit({ value });
|
181 | }
|
182 | showCancelButtonChanged() {
|
183 | requestAnimationFrame(() => {
|
184 | this.positionElements();
|
185 | forceUpdate(this);
|
186 | });
|
187 | }
|
188 | connectedCallback() {
|
189 | this.emitStyle();
|
190 | }
|
191 | componentDidLoad() {
|
192 | this.positionElements();
|
193 | this.debounceChanged();
|
194 | setTimeout(() => {
|
195 | this.noAnimate = false;
|
196 | }, 300);
|
197 | }
|
198 | emitStyle() {
|
199 | this.ionStyle.emit({
|
200 | 'searchbar': true
|
201 | });
|
202 | }
|
203 | |
204 |
|
205 |
|
206 |
|
207 | async setFocus() {
|
208 | if (this.nativeInput) {
|
209 | this.nativeInput.focus();
|
210 | }
|
211 | }
|
212 | |
213 |
|
214 |
|
215 | getInputElement() {
|
216 | return Promise.resolve(this.nativeInput);
|
217 | }
|
218 | |
219 |
|
220 |
|
221 |
|
222 | positionElements() {
|
223 | const value = this.getValue();
|
224 | const prevAlignLeft = this.shouldAlignLeft;
|
225 | const mode = getIonMode(this);
|
226 | const shouldAlignLeft = (!this.animated || value.trim() !== '' || !!this.focused);
|
227 | this.shouldAlignLeft = shouldAlignLeft;
|
228 | if (mode !== 'ios') {
|
229 | return;
|
230 | }
|
231 | if (prevAlignLeft !== shouldAlignLeft) {
|
232 | this.positionPlaceholder();
|
233 | }
|
234 | if (this.animated) {
|
235 | this.positionCancelButton();
|
236 | }
|
237 | }
|
238 | |
239 |
|
240 |
|
241 | positionPlaceholder() {
|
242 | const inputEl = this.nativeInput;
|
243 | if (!inputEl) {
|
244 | return;
|
245 | }
|
246 | const rtl = isRTL(this.el);
|
247 | const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon');
|
248 | if (this.shouldAlignLeft) {
|
249 | inputEl.removeAttribute('style');
|
250 | iconEl.removeAttribute('style');
|
251 | }
|
252 | else {
|
253 |
|
254 | const doc = document;
|
255 | const tempSpan = doc.createElement('span');
|
256 | tempSpan.innerText = this.placeholder || '';
|
257 | doc.body.appendChild(tempSpan);
|
258 |
|
259 | raf(() => {
|
260 | const textWidth = tempSpan.offsetWidth;
|
261 | tempSpan.remove();
|
262 |
|
263 | const inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
|
264 |
|
265 | const iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
|
266 |
|
267 | if (rtl) {
|
268 | inputEl.style.paddingRight = inputLeft;
|
269 | iconEl.style.marginRight = iconLeft;
|
270 | }
|
271 | else {
|
272 | inputEl.style.paddingLeft = inputLeft;
|
273 | iconEl.style.marginLeft = iconLeft;
|
274 | }
|
275 | });
|
276 | }
|
277 | }
|
278 | |
279 |
|
280 |
|
281 | positionCancelButton() {
|
282 | const rtl = isRTL(this.el);
|
283 | const cancelButton = (this.el.shadowRoot || this.el).querySelector('.searchbar-cancel-button');
|
284 | const shouldShowCancel = this.shouldShowCancelButton();
|
285 | if (cancelButton && shouldShowCancel !== this.isCancelVisible) {
|
286 | const cancelStyle = cancelButton.style;
|
287 | this.isCancelVisible = shouldShowCancel;
|
288 | if (shouldShowCancel) {
|
289 | if (rtl) {
|
290 | cancelStyle.marginLeft = '0';
|
291 | }
|
292 | else {
|
293 | cancelStyle.marginRight = '0';
|
294 | }
|
295 | }
|
296 | else {
|
297 | const offset = cancelButton.offsetWidth;
|
298 | if (offset > 0) {
|
299 | if (rtl) {
|
300 | cancelStyle.marginLeft = -offset + 'px';
|
301 | }
|
302 | else {
|
303 | cancelStyle.marginRight = -offset + 'px';
|
304 | }
|
305 | }
|
306 | }
|
307 | }
|
308 | }
|
309 | getValue() {
|
310 | return this.value || '';
|
311 | }
|
312 | hasValue() {
|
313 | return this.getValue() !== '';
|
314 | }
|
315 | |
316 |
|
317 |
|
318 |
|
319 |
|
320 |
|
321 | shouldShowCancelButton() {
|
322 | if ((this.showCancelButton === 'never') || (this.showCancelButton === 'focus' && !this.focused)) {
|
323 | return false;
|
324 | }
|
325 | return true;
|
326 | }
|
327 | |
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 | shouldShowClearButton() {
|
334 | if ((this.showClearButton === 'never') || (this.showClearButton === 'focus' && !this.focused)) {
|
335 | return false;
|
336 | }
|
337 | return true;
|
338 | }
|
339 | render() {
|
340 | const { cancelButtonText } = this;
|
341 | const animated = this.animated && config.getBoolean('animated', true);
|
342 | const mode = getIonMode(this);
|
343 | const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
344 | const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
345 | const shouldShowCancelButton = this.shouldShowCancelButton();
|
346 | const cancelButton = (this.showCancelButton !== 'never') && (h("button", { "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { "aria-hidden": "true" }, mode === 'md'
|
347 | ? h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })
|
348 | : cancelButtonText)));
|
349 | return (h(Host, { role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
|
350 | [mode]: true,
|
351 | 'searchbar-animated': animated,
|
352 | 'searchbar-disabled': this.disabled,
|
353 | 'searchbar-no-animate': animated && this.noAnimate,
|
354 | 'searchbar-has-value': this.hasValue(),
|
355 | 'searchbar-left-aligned': this.shouldAlignLeft,
|
356 | 'searchbar-has-focus': this.focused,
|
357 | 'searchbar-should-show-clear': this.shouldShowClearButton(),
|
358 | 'searchbar-should-show-cancel': this.shouldShowCancelButton()
|
359 | }) }, h("div", { class: "searchbar-input-container" }, h("input", { "aria-label": "search text", disabled: this.disabled, ref: el => this.nativeInput = el, class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onMouseDown: ev => this.onClearInput(ev, true), onTouchStart: ev => this.onClearInput(ev, true) }, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
360 | }
|
361 | get el() { return this; }
|
362 | static get watchers() { return {
|
363 | "debounce": ["debounceChanged"],
|
364 | "value": ["valueChanged"],
|
365 | "showCancelButton": ["showCancelButtonChanged"]
|
366 | }; }
|
367 | static get style() { return {
|
368 | ios: searchbarIosCss,
|
369 | md: searchbarMdCss
|
370 | }; }
|
371 | }, [34, "ion-searchbar", {
|
372 | "color": [513],
|
373 | "animated": [4],
|
374 | "autocomplete": [1],
|
375 | "autocorrect": [1],
|
376 | "cancelButtonIcon": [1, "cancel-button-icon"],
|
377 | "cancelButtonText": [1, "cancel-button-text"],
|
378 | "clearIcon": [1, "clear-icon"],
|
379 | "debounce": [2],
|
380 | "disabled": [4],
|
381 | "inputmode": [1],
|
382 | "enterkeyhint": [1],
|
383 | "placeholder": [1],
|
384 | "searchIcon": [1, "search-icon"],
|
385 | "showCancelButton": [1, "show-cancel-button"],
|
386 | "showClearButton": [1, "show-clear-button"],
|
387 | "spellcheck": [4],
|
388 | "type": [1],
|
389 | "value": [1025],
|
390 | "focused": [32],
|
391 | "noAnimate": [32],
|
392 | "setFocus": [64],
|
393 | "getInputElement": [64]
|
394 | }]);
|
395 | function defineCustomElement$1() {
|
396 | if (typeof customElements === "undefined") {
|
397 | return;
|
398 | }
|
399 | const components = ["ion-searchbar", "ion-icon"];
|
400 | components.forEach(tagName => { switch (tagName) {
|
401 | case "ion-searchbar":
|
402 | if (!customElements.get(tagName)) {
|
403 | customElements.define(tagName, Searchbar);
|
404 | }
|
405 | break;
|
406 | case "ion-icon":
|
407 | if (!customElements.get(tagName)) {
|
408 | defineCustomElement$2();
|
409 | }
|
410 | break;
|
411 | } });
|
412 | }
|
413 |
|
414 | const IonSearchbar = Searchbar;
|
415 | const defineCustomElement = defineCustomElement$1;
|
416 |
|
417 | export { IonSearchbar, defineCustomElement };
|