How to use the @material/mwc-base/form-element.js.query function in @material/mwc-base

.checked="${this.checked}"
              .value="${this.value}">
        <div class="mdc-checkbox__background">
          <svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
            <path d="M1.73,12.91 8.1,19.28 22.79,4.59" fill="none" class="mdc-checkbox__checkmark-path"></path>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
      `;
    }
};
__decorate([
    query('.mdc-checkbox')
], Checkbox.prototype, "mdcRoot", void 0);
__decorate([
    query('input')
], Checkbox.prototype, "formElement", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "indeterminate", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "disabled", void 0);
__decorate([
    property({ type: String })
], Checkbox.prototype, "value", void 0);

property({ type: Boolean }),
    observer(function (value) {
        this.mdcFoundation.setChecked(value);
    })
], Switch.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean }),
    observer(function (value) {
        this.mdcFoundation.setDisabled(value);
    })
], Switch.prototype, "disabled", void 0);
__decorate([
    query('.mdc-switch')
], Switch.prototype, "mdcRoot", void 0);
__decorate([
    query('input')
], Switch.prototype, "formElement", void 0);
__decorate([
    query('.mdc-switch__thumb-underlay')
], Switch.prototype, "rippleNode", void 0);
Switch = __decorate([
    customElement('mwc-switch')
], Switch);
export { Switch };
//# sourceMappingURL=mwc-switch.js.map

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {MDCCheckboxAdapter} from '@material/checkbox/adapter.js';
import MDCCheckboxFoundation from '@material/checkbox/foundation.js';
import {addHasRemoveClass, FormElement, html, HTMLElementWithRipple, observer, property, query, RippleSurface} from '@material/mwc-base/form-element.js';
import {ripple} from '@material/mwc-ripple/ripple-directive.js';

export class CheckboxBase extends FormElement {
  @query('.mdc-checkbox') protected mdcRoot!: HTMLElementWithRipple;

  @query('input') protected formElement!: HTMLInputElement;

  @property({type: Boolean}) checked = false;

  @property({type: Boolean}) indeterminate = false;

  @property({type: Boolean})
  @observer(function(this: CheckboxBase, value: boolean) {
    this.mdcFoundation.setDisabled(value);
  })
  disabled = false;

  @property({type: String}) value = '';

  protected mdcFoundationClass = MDCCheckboxFoundation;

  protected mdcFoundation!: MDCCheckboxFoundation;

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {BaseElement, html, property, query} from '@material/mwc-base/form-element.js';
import {MDCNotchedOutlineAdapter} from '@material/notched-outline/adapter.js';
import {MDCNotchedOutlineFoundation} from '@material/notched-outline/foundation.js';


export class NotchedOutlineBase extends BaseElement {
  @query('.mdc-notched-outline') protected mdcRoot!: HTMLElement;
  protected mdcFoundation!: MDCNotchedOutlineFoundation;

  protected readonly mdcFoundationClass = MDCNotchedOutlineFoundation;

  @property({type: Number}) width: number = 0;

  @property({type: Boolean, reflect: true}) open: boolean = false;

  protected lastOpen = this.open;

  @query('.mdc-notched-outline__notch') protected notchElement!: HTMLDivElement;

  protected createAdapter(): MDCNotchedOutlineAdapter {
    return {
      addClass: (className) => this.mdcRoot.classList.add(className),
      removeClass: (className) => this.mdcRoot.classList.remove(className),

@query('.mdc-text-field')
  protected mdcRoot!: HTMLElement;

  @query('input')
  protected formElement!: HTMLInputElement;

  @query('mwc-floating-label')
  protected labelElement!: FloatingLabel;

  @query('.mdc-line-ripple')
  protected lineRippleElement!: HTMLElement;

  @query('.mdc-notched-outline')
  protected outlineElement!: HTMLElement;

  @query('.mdc-notched-outline__notch')
  protected notchElement!: HTMLElement;

  @query('.mdc-text-field-character-counter')
  protected charCounterElement!: HTMLElement;

  @property()
  value = '';

  @property()
  type = 'text';

  @property()
  placeholder = '';

  @property()
  label = '';

@query('input')
  protected formElement!: HTMLInputElement;

  @query('mwc-floating-label')
  protected labelElement!: FloatingLabel;

  @query('.mdc-line-ripple')
  protected lineRippleElement!: HTMLElement;

  @query('.mdc-notched-outline')
  protected outlineElement!: HTMLElement;

  @query('.mdc-notched-outline__notch')
  protected notchElement!: HTMLElement;

  @query('.mdc-text-field-character-counter')
  protected charCounterElement!: HTMLElement;

  @property()
  value = '';

  @property()
  type = 'text';

  @property()
  placeholder = '';

  @property()
  label = '';

  @property()
  icon = '';

})
], Switch.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean }),
    observer(function (value) {
        this.mdcFoundation.setDisabled(value);
    })
], Switch.prototype, "disabled", void 0);
__decorate([
    query('.mdc-switch')
], Switch.prototype, "mdcRoot", void 0);
__decorate([
    query('input')
], Switch.prototype, "formElement", void 0);
__decorate([
    query('.mdc-switch__thumb-underlay')
], Switch.prototype, "rippleNode", void 0);
Switch = __decorate([
    customElement('mwc-switch')
], Switch);
export { Switch };
//# sourceMappingURL=mwc-switch.js.map

protected readonly mdcFoundationClass = MDCTextFieldFoundation;

  @query('.mdc-text-field')
  protected mdcRoot!: HTMLElement;

  @query('input')
  protected formElement!: HTMLInputElement;

  @query('mwc-floating-label')
  protected labelElement!: FloatingLabel;

  @query('.mdc-line-ripple')
  protected lineRippleElement!: HTMLElement;

  @query('.mdc-notched-outline')
  protected outlineElement!: HTMLElement;

  @query('.mdc-notched-outline__notch')
  protected notchElement!: HTMLElement;

  @query('.mdc-text-field-character-counter')
  protected charCounterElement!: HTMLElement;

  @property()
  value = '';

  @property()
  type = 'text';

  @property()
  placeholder = '';

<svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
            <path d="M1.73,12.91 8.1,19.28 22.79,4.59" fill="none" class="mdc-checkbox__checkmark-path"></path>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        
      `;
    }
};
__decorate([
    query('.mdc-checkbox')
], Checkbox.prototype, "mdcRoot", void 0);
__decorate([
    query('input')
], Checkbox.prototype, "formElement", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "indeterminate", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "disabled", void 0);
__decorate([
    property({ type: String })
], Checkbox.prototype, "value", void 0);
Checkbox = __decorate([
    customElement('mwc-checkbox')
], Checkbox);

import MDCTextFieldFoundation from '@material/textfield/foundation.js';

import { FloatingLabel } from '@material/mwc-floating-label';
import '@material/mwc-floating-label';

const passiveEvents = ['touchstart', 'touchmove', 'scroll', 'mousewheel'];

export abstract class TextFieldBase extends FormElement {
  protected mdcFoundation!: MDCTextFieldFoundation;

  protected readonly mdcFoundationClass = MDCTextFieldFoundation;

  @query('.mdc-text-field')
  protected mdcRoot!: HTMLElement;

  @query('input')
  protected formElement!: HTMLInputElement;

  @query('mwc-floating-label')
  protected labelElement!: FloatingLabel;

  @query('.mdc-line-ripple')
  protected lineRippleElement!: HTMLElement;

  @query('.mdc-notched-outline')
  protected outlineElement!: HTMLElement;

  @query('.mdc-notched-outline__notch')
  protected notchElement!: HTMLElement;

  @query('.mdc-text-field-character-counter')
  protected charCounterElement!: HTMLElement;