• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• medblocks-ui-master
  • .github
    • workflows
      • test.yml
      • publish.yml
  • src
    • extension
      • transform.ts
    • internal
      • decorators.ts
      • icons.ts
    • medblocks
      • multimedia
        • mediaFunction.ts
        • multimedia.ts
      • boolean
        • checkbox.ts
      • count
        • count.ts
      • quantity
        • unit.ts
        • QuantityElement.ts
        • quantity.ts
      • context
        • context.ts
        • checkboxAny.ts
      • EhrElement.ts
      • form
        • plugins
          • plugins.ts
          • fhir.ts
          • openEHRFlat.ts
        • utils.ts
        • form.ts
        • fhirForm.ts
      • datetime
        • date.ts
      • codedtext
        • CodedTextElement.ts
        • buttons.scss
        • search.ts
        • option.ts
        • dropdown.ts
        • buttons.ts
        • filter.ts
        • select.ts
        • searchFunctions.ts
      • submit
        • submit.ts
      • text
        • text-select.ts
        • input.ts
        • input-multiple.ts
      • proportion
        • proportion.ts
        • percent.ts
        • MbProportion.ts
      • duration
        • duration.ts
  • demo
    • fhir_registration.html
    • demo.html
    • index.html
  • stories
    • search.stories.ts
    • quantity.stories.ts
    • date.stories.ts
    • input.stories.ts
    • select.stories.ts
    • buttons.stories.ts
    • utils.ts
    • context.stories.ts
    • medblocks.stories.mdx
    • getting-started.stories.mdx
  • web-component-manifest.mjs
  • LICENSE
  • test
    • fhirplugin.test.ts
    • mb-form.e2e.test.ts
    • mb-duration.test.ts
    • mb-percent.test.ts
    • mb-form.test.ts
    • mb-text-select.test.ts
    • mb-submit.test.ts
    • mb-ordinal.test.ts
    • mb-proportion.test.ts
    • mb-checkbox.ts
    • mb-input-multiple.test.ts
    • mb-buttons.test.ts
    • mb-select.test.ts
    • mb-input.test.ts
    • utils.test.ts
    • mb-quantity.ts
    • mb-checkbox-any.ts
    • validation-test
      • quantity-validation.test.ts
      • date-validation.test.ts
      • select-validation.test.ts
      • checkbox-validation.test.ts
      • button-validation.test.ts
      • proportion-validation.test.ts
      • percent-validation.test.ts
      • text-select.validation.test.ts
      • input-multiple-validation.test.ts
      • input-validation.test.ts
      • duration-validation.test.ts
    • mb-count.test.ts
    • flatFomat.test.ts
  • templates
  • web-dev-server.config.mjs
  • medblocks.ts
  • styles.ts
  • .editorconfig
  • CHANGELOG.md
  • documentation
    • mb-submit.md
    • mb-input-multiple.md
    • mb-filter.md
    • mb-select.md
    • mb-unit.md
    • mb-proportion.md
    • mb-dropdown.md
    • mb-buttons.md
    • mb-context.md
    • mb-fhir-form.md
    • mb-form.md
    • mb-date.md
    • mb-checkbox-any.md
    • mb-search.md
    • mb-option.md
    • mb-checkbox.md
    • readme.md
    • mb-percent.md
    • mb-duration.md
    • mb-input.md
    • mb-quantity.md
    • mb-text-select.md
  • shoelace.ts
  • README.md
  • package.json
  • utils.ts
  • web-test-runner.config.mjs
  • tsconfig.json
  • .gitignore

import { css, customElement, html, property } from 'lit-element';
import { event, EventEmitter } from '../../internal/decorators';
import SlInput from '@shoelace-style/shoelace/dist/components/input/input';
import '@shoelace-style/shoelace/dist/components/icon/icon';
import EhrElement from '../EhrElement';

@customElement('mb-date')
export default class MbDateTime extends EhrElement {
  /** @ignore */
  static styles = css`
    sl-input::part(base) {
      width: unset;
    }
  `;
  @property({ type: String }) data: string;

  @property({ type: String, reflect: true }) label: string = '';

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

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

  @event('mb-input') _mbInput: EventEmitter<any>;

  handleInput(e: CustomEvent) {
    const inputElement = e.target as SlInput;
    this.data = inputElement.value;
    this._mbInput.emit();
  }

  reportValidity() {
    const input = this.shadowRoot!.querySelector('sl-input') as SlInput;
    return input.reportValidity();
  }

  render() {
    return html`
      <sl-input
      .disabled=${this.disabled}
        ?required=${this.required}
        type="${this.time ? 'datetime-local' : ('date' as any)}"
        label=${this.label}
        @sl-input=${this.handleInput}
        value=${this.data || ''}
      >
      </sl-input>
    `;
  }
}