jebamo 0.0.1 → 0.0.2

package/dist/collection/components/je-input/je-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-input.js","sourceRoot":"","sources":["../../../src/components/je-input/je-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAgB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACtI,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAclD,MAAM,OAAO,OAAO;;QAIV,mBAAc,GAAG,KAAK,CAAC;QAIvB,iBAAY,GAAG,KAAK,CAAC;QACrB,WAAM,GAAa,EAAE,CAAC;QACtB,kBAAa,GAAG,EAAE,CAAC;QA6PnB,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;QACxD,CAAC,CAAA;QAEO,gBAAW,GAAG,KAAK,EAAE,EAAc,EAAE,EAAE;YAC7C,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACzB,KAAK,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAA;QAEO,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;YACvC,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;gBACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAA;QAgBO,yBAAoB,GAAG,KAAK,IAAI,EAAE;YACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC;gBACpF,MAAM,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACvD,CAAC;QACH,CAAC,CAAA;QAEO,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC,CAAA;yBAjToB,KAAK;qBAYV,EAAE;wBAKC,KAAK;8BAKC,KAAK;4BAKP,KAAK;2BAKQ,KAAK;;;;;;;wBAmCtB,KAAK;;wBAUL,KAAK;wBAKL,KAAK;0BAKH,KAAK;;oBAUM,MAAM;qBAKL,EAAE;2BAKb,EAAE;wBAKL,CAAC;;;wBAeD,KAAK;;wBAUL,KAAK;;;;IAiBxB,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;QAC/E,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACvC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1D,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;YACtC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACrD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC;IAGD,iBAAiB,CAAC,CAAgC;QAChD,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;IAC7D,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;IAGD,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,iBAAiB;QACrB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACxC,MAAM,GAAG,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACxC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAGD,KAAK,CAAC,YAAY;QAChB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YACtD,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGD,eAAe;QACb,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAGD,eAAe,CAAC,IAAI,GAAG,eAAe;QACpC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAGD,aAAa;QACX,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,QAAQ;;QACN,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IACnG,CAAC;IAGD,KAAK;QACH,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAClC,CAAC;IAsBO,WAAW;;QACjB,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,CAAC;QACzD,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,aAAa,EAAE,CAAC;gBAClB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,YAAY,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YAChH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YAClF,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAeD,MAAM;;QACJ,MAAM,YAAY,GAAG,gEAAS,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,IAAI,EAAC,UAAU,GAAG,CAAC;QAC5G,MAAM,KAAK,GAAG,8DAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAAG,IAAI,CAAC,KAAK;;YAAG,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAS,CAAC;QACnH,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACzF,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,SAAS;SACxB,CAAC;QAEF,IAAI,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;QAClC,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE,gBAAgB;gBACvH,4DAAK,IAAI,EAAC,iBAAiB;oBACzB,6DAAM,IAAI,EAAC,OAAO,GAAE;oBACnB,IAAI,CAAC,KAAK,IAAI,KAAK,CAChB;gBAEN,8DAAO,IAAI,EAAC,cAAc,EACxB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,EAC5B,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,GAAI;gBAEnC,4DAAK,IAAI,EAAC,eAAe;oBACvB,6DAAM,IAAI,EAAC,KAAK,GAAE;oBACjB,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,IAAI,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAI;oBACjH,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,gEAAS,IAAI,EAAC,gBAAgB,EAAC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAI,CAC7G,CACF;YAEL,IAAI,CAAC,UAAU,IAAI,8DAAO,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,UAAU,CAAS;YAElE,IAAI,CAAC,QAAQ,IAAI,mEAAY,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,EAAE,WAAW,EAAC,SAAS,EAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,EAAE,IAAI,CAAC,aAAa;gBACvJ,6DAAM,IAAI,EAAC,UAAU,GAAQ,CAClB,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, Event, AttachInternals, EventEmitter, Method, State, Watch, Listen } from '@stencil/core';\nimport { debounceEvent } from '../../utils/utils';\n\nexport type FormatterFn = (newValue: string, oldValue?: string, ev?: InputEvent) => string;\nexport type AsyncFormatterFn = (newValue: string, oldValue?: string, ev?: InputEvent) => Promise<string>;\n\nexport type ValidationFn = (value: string) => string[];\nexport type AsyncValidationFn = (value: string) => Promise<string[]>;\n\n@Component({\n  tag: 'je-input',\n  styleUrl: 'je-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeInput {\n  @Element() hostEl!: HTMLJeInputElement;\n  @AttachInternals() internals: ElementInternals;\n  @State() isTouched = false;\n  private dropdownActive = false;\n  private containerEl!: HTMLDivElement;\n  private popoverEl!: HTMLJePopoverElement;\n  private inputEl!: HTMLInputElement;\n  private showPassword = false;\n  private errors: string[] = [];\n  private originalValue = '';\n\n  /**\n   * Text above the control\n   */\n  @Prop() label = '';\n\n  /**\n   * Renders input as disabled and prevents changes\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoCapitalize = 'off';\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoComplete = 'off';\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoCorrect: 'off' | 'on' = 'off';\n\n  /**\n   * Passed to native input\n   */\n  @Prop() autoFocus?: boolean;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() inputMode: string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Renders input as read only and prevents changes\n   */\n  @Prop() readOnly = false;\n\n  /**\n   * Marks as required in form and adds asterisk to the end of the label\n   */\n  @Prop() required = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() spellcheck = false;\n\n  /**\n   * Passed to native input\n   */\n  @Prop() step?: string;\n\n  /**\n   * Passed to native input\n   */\n  @Prop({ mutable: true }) type = 'text';\n\n  /**\n   * Current value of the input\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * Input placeholder text\n   */\n  @Prop() placeholder = '';\n\n  /**\n   * Optional debounce of the didInput event\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * Formatter function that gets applied as the user types\n   */\n  @Prop() format?: FormatterFn | AsyncFormatterFn;\n\n  /**\n   * Custom validator functions for form participation\n   */\n  @Prop() validators?: (ValidationFn | AsyncValidationFn)[];\n\n  /**\n   * Will prevent changes, does not change the input's state in any way\n   */\n  @Prop() noTyping = false;\n\n  /**\n   * Helper text directly below the control\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Whether or not to render a dropdown when input is focused\n   */\n  @Prop() dropdown = false;\n\n  /**\n   * Whether or not the input should expand to the full width of it's container\n   */\n  @Prop({ reflect: true }) expand?: boolean;\n\n  /**\n   * Whether or not the dropdown should dismiss itself on click\n   */\n  @Prop({ reflect: true }) dismissOnClick?: boolean;\n\n  /**\n   * Emits as the user types\n   */\n  @Event({ bubbles: false }) valueChange: EventEmitter<string>;\n\n  componentWillLoad() {\n    if (this.label && !this.hostEl.getAttribute('name')) {\n      this.hostEl.setAttribute('name', this.label.replace(' ', '-').toLowerCase());\n    }\n  }\n\n  connectedCallback() {\n    this.internals.setFormValue(this.value);\n  }\n\n  async componentDidLoad() {\n    this.originalValue = this.value;\n    const { valueChange, debounce } = this;\n    if (debounce) {\n      this.valueChange = debounceEvent(valueChange, debounce);\n    }\n    if (this.format) {\n      this.value = await this.format(this.value);\n    } else {\n      this.validatorsChanged();\n    }\n  }\n\n  async formResetCallback() {\n    this.isTouched = false;\n    if (this.value !== this.originalValue) {\n      if (this.format) {\n        this.value = await this.format(this.originalValue);\n      } else {\n        this.value = this.originalValue;\n      }\n    }\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.hostEl.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  @Listen('focus')\n  handleFocus() {\n    this.containerEl.classList.add('focus');\n  }\n\n  @Listen('blur')\n  handleBlur() {\n    this.isTouched = true;\n    if (!this.dropdownActive) {\n      this.containerEl.classList.remove('focus');\n    }\n  }\n\n  @Watch('validators')\n  async validatorsChanged() {\n    this.errors = [];\n    if (this.validators) {\n      for (const validator of this.validators) {\n        const res = await validator(this.value);\n        this.errors = [...this.errors, ...res];\n      }\n    }\n    this.setValidity();\n  }\n\n  @Watch('required')\n  requiredChanged() {\n    this.setValidity();\n  }\n\n  @Watch('value')\n  async valueChanged() {\n    if (this.inputEl && this.inputEl.value !== this.value) {\n      this.inputEl.value = this.value;\n    }\n    this.internals.setFormValue(this.value);\n    this.validatorsChanged();\n  }\n\n  @Method()\n  getInputElement() {\n    return Promise.resolve(this.inputEl);\n  }\n\n  @Method()\n  dismissDropdown(role = 'manualDismiss') {\n    return this.popoverEl.dismiss(role);\n  }\n\n  @Method()\n  markAsTouched() {\n    return new Promise<void>(resolve => {\n      this.isTouched = true;\n      resolve();\n    });\n  }\n\n  @Method()\n  hasError() {\n    return Promise.resolve(this.errors.length > 0 || (this.required && ((this.value ?? '') === '')));\n  }\n\n  @Method()\n  reset() {\n    return this.formResetCallback();\n  }\n\n  private togglePassword = () => {\n    this.showPassword = !this.showPassword;\n    this.type = this.type == 'text' ? 'password' : 'text';\n  }\n\n  private formatInput = async (ev: InputEvent) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input && this.format) {\n      input.value = await this.format(input.value, this.value, ev);\n    }\n  }\n\n  private handleInput = (ev: InputEvent) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value;\n      this.valueChange.emit(this.value);\n    }\n  }\n\n  private setValidity() {\n    const requiredError = this.required && ((this.value ?? '') === '');\n    const hasError = this.errors.length > 0 || requiredError;\n    if (hasError) {\n      if (requiredError) {\n        this.internals.setValidity({ valueMissing: true }, `${this.label || 'This field'} is required`, this.inputEl);\n      } else {\n        this.internals.setValidity({ customError: true }, this.errors[0], this.inputEl);\n      }\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  private handleContainerClick = async () => {\n    if (this.dropdown) {\n      this.dropdownActive = true;\n      this.hostEl.style.setProperty('--je-content-width', `${this.hostEl.clientWidth}px`);\n      await this.popoverEl.present('element', this.hostEl);\n    }\n  }\n\n  private handleDismiss = () => {\n    this.dropdownActive = false;\n    this.containerEl.classList.remove('focus');\n  }\n\n  render() {\n    const requiredIcon = <je-icon style={{ fontSize: '10px', color: 'var(--je-error-500)' }} icon=\"asterisk\" />;\n    const label = <label part='label' style={{ display: 'flex' }}>{this.label} {this.required && requiredIcon}</label>;\n    const invalid = this.errors.length > 0 || (this.required && ((this.value ?? '') === ''));\n    const containerClasses = {\n      disabled: this.disabled,\n      touched: this.isTouched\n    };\n\n    if (invalid && this.isTouched) {\n      this.internals.reportValidity();\n    }\n\n    return (\n      <Host>\n        <div ref={el => this.containerEl = el} part='outer-container' onClick={this.handleContainerClick} class={containerClasses}>\n          <div part='start-container'>\n            <slot name='start'/>\n            {this.label && label}\n          </div>\n\n          <input part=\"native-input\"\n            ref={el => this.inputEl = el}\n            onInputCapture={this.formatInput}\n            onInput={this.handleInput}\n            disabled={this.disabled}\n            autoCapitalize={this.autoCapitalize}\n            autoComplete={this.autoComplete}\n            autoCorrect={this.autoCorrect}\n            autoFocus={this.autoFocus}\n            inputMode={this.inputMode}\n            min={this.min}\n            max={this.max}\n            minLength={this.minLength}\n            maxLength={this.maxLength}\n            multiple={this.multiple}\n            pattern={this.pattern}\n            readOnly={this.readOnly || this.noTyping}\n            required={this.required}\n            spellcheck={this.spellcheck}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder} />\n\n          <div part='end-container'>\n            <slot name='end'/>\n            {!this.showPassword && this.type == 'password' && <je-icon icon=\"visibility\" fill onClick={this.togglePassword} />}\n            {this.showPassword && this.type == 'text' && <je-icon icon=\"visibility_off\" fill onClick={this.togglePassword} />}\n          </div>\n        </div>\n\n        {this.helperText && <small class=\"helper\">{this.helperText}</small>}\n\n        {this.dropdown && <je-popover ref={el => this.popoverEl = el} exportparts='content' dismissOnClick={this.dismissOnClick} onDidDismiss={this.handleDismiss}>\n          <slot name='dropdown'></slot>\n        </je-popover>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-link/je-link.css

@@ -0,0 +1,15 @@
+:host {
+  display: inline-block;
+}
+
+a {
+  display: inline-block;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.bold {
+  font-weight: var(--je-font-semi-bold);
+}

package/dist/collection/components/je-link/je-link.js

@@ -0,0 +1,207 @@
+import { Host, h } from "@stencil/core";
+export class JeLink {
+    constructor() {
+        this.color = undefined;
+        this.lightModeColor = undefined;
+        this.darkModeColor = undefined;
+        this.underline = true;
+        this.bold = false;
+        this.href = undefined;
+        this.target = undefined;
+        this.rel = undefined;
+        this.download = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'e6ee6a71161ce3871e55b3cda15beab656c17910' }, h("a", { key: '98998f6dda359644563b531e4532e68882e273b6', href: this.href, target: this.target, rel: this.rel, download: this.download }, h("je-color", { key: '83600909f33b1dd9decf4d75c3abc2e3a8447e3a', class: { underline: this.underline, bold: this.bold }, color: this.color, "light-mode-color": this.lightModeColor, "dark-mode-color": this.darkModeColor }, h("slot", { key: '3caebb42da2d13dfc78b9237981d5c2c94cc96cb' })))));
+    }
+    static get is() { return "je-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color | 'auto'",
+                    "resolved": "\"auto\" | \"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Predefined colors. Auto will switch between light and dark based on the closest je-page's theme."
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "lightModeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides what the light mode color will be when color is \"auto\"."
+                },
+                "attribute": "light-mode-color",
+                "reflect": false
+            },
+            "darkModeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides what the dark mode color will be when color is \"auto\"."
+                },
+                "attribute": "dark-mode-color",
+                "reflect": false
+            },
+            "underline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Underlines the text"
+                },
+                "attribute": "underline",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "bold": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes text bold"
+                },
+                "attribute": "bold",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to anchor"
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to anchor"
+                },
+                "attribute": "target",
+                "reflect": false
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to anchor"
+                },
+                "attribute": "rel",
+                "reflect": false
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to anchor"
+                },
+                "attribute": "download",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=je-link.js.map

package/dist/collection/components/je-link/je-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-link.js","sourceRoot":"","sources":["../../../src/components/je-link/je-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,MAAM;;;;;yBAWG,IAAI;oBAGT,KAAK;;;;;;IAcpB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAC7E,iEAAU,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,sBAAoB,IAAI,CAAC,cAAc,qBAAmB,IAAI,CAAC,aAAa;oBAC1J,8DAAa,CACJ,CACT,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Color } from '../../components';\n\n@Component({\n  tag: 'je-link',\n  styleUrl: 'je-link.scss',\n  shadow: true,\n})\nexport class JeLink {\n  /** Predefined colors. Auto will switch between light and dark based on the closest je-page's theme. */\n  @Prop() color?: Color | 'auto';\n\n  /** Overrides what the light mode color will be when color is \"auto\". */\n  @Prop() lightModeColor?: Color;\n\n  /** Overrides what the dark mode color will be when color is \"auto\". */\n  @Prop() darkModeColor?: Color;\n\n  /** Underlines the text */\n  @Prop() underline = true;\n\n  /** Makes text bold */\n  @Prop() bold = false;\n\n  /** Passed to anchor */\n  @Prop() href?: string;\n\n  /** Passed to anchor */\n  @Prop() target?: string;\n\n  /** Passed to anchor */\n  @Prop() rel?: string;\n\n  /** Passed to anchor */\n  @Prop() download?: string;\n\n  render() {\n    return (\n      <Host>\n        <a href={this.href} target={this.target} rel={this.rel} download={this.download}>\n          <je-color class={{underline: this.underline, bold: this.bold}} color={this.color} light-mode-color={this.lightModeColor} dark-mode-color={this.darkModeColor}>\n            <slot></slot>\n          </je-color>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-loading/je-loading.css

@@ -0,0 +1,50 @@
+:host {
+  display: inline-block;
+  position: relative;
+  width: 23px;
+  height: 23px;
+  user-select: none;
+}
+
+svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(0);
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
+  stroke-width: 7px;
+}
+
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: 4px;
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line,
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-linecap: round;
+  stroke: currentColor;
+}
+
+:host(.spinner-lines) svg,
+:host(.spinner-lines-small) svg,
+:host(.spinner-lines-sharp) svg,
+:host(.spinner-lines-sharp-small) svg {
+  animation: spinner-fade-out 1s linear infinite;
+}
+
+@keyframes spinner-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/dist/collection/components/je-loading/je-loading.js

@@ -0,0 +1,48 @@
+import { Host, h } from "@stencil/core";
+const spinners = {
+    lines: {
+        dur: 1000,
+        lines: 8,
+        fn: (dur, index, total) => {
+            const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
+            const animationDelay = `${(dur * index) / total - dur}ms`;
+            return {
+                y1: 14,
+                y2: 26,
+                style: {
+                    transform: transform,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+};
+const buildLine = (spinner, duration, index, total) => {
+    const data = spinner.fn(duration, index, total);
+    data.style['animation-duration'] = duration + 'ms';
+    return (h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, h("line", { transform: "translate(32,32)", y1: data.y1, y2: data.y2 })));
+};
+export class JeLoading {
+    render() {
+        const spinner = spinners['lines'];
+        const duration = spinner.dur;
+        const svgs = [];
+        for (let i = 0; i < spinner.lines; i++) {
+            svgs.push(buildLine(spinner, duration, i, spinner.lines));
+        }
+        return (h(Host, { key: '7520159371b0c6ff774055d3f6eecf5af172d4df', class: { [`spinner-lines`]: true } }, svgs));
+    }
+    static get is() { return "je-loading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-loading.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-loading.css"]
+        };
+    }
+}
+//# sourceMappingURL=je-loading.js.map

package/dist/collection/components/je-loading/je-loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-loading.js","sourceRoot":"","sources":["../../../src/components/je-loading/je-loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAqBnD,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;QACT,KAAK,EAAE,CAAC;QACR,EAAE,EAAE,CAAC,GAAW,EAAE,KAAa,EAAE,KAAa,EAAE,EAAE;YAChD,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;YAC3F,MAAM,cAAc,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC;YAE1D,OAAO;gBACL,EAAE,EAAE,EAAE;gBACN,EAAE,EAAE,EAAE;gBACN,KAAK,EAAE;oBACL,SAAS,EAAE,SAAS;oBACpB,iBAAiB,EAAE,cAAc;iBAClC;aACF,CAAC;QACJ,CAAC;KACF;CACF,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,OAAsB,EAAE,QAAgB,EAAE,KAAa,EAAE,KAAa,EAAE,EAAE;IAC3F,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAChD,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC;IAEnD,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;QAC1D,YAAM,SAAS,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,GAAI,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC;QAC7B,MAAM,IAAI,GAAiB,EAAE,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5D,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,IACrC,IAAI,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\nexport interface SpinnerConfig {\n  dur: number;\n  circles?: number;\n  lines?: number;\n  elmDuration?: boolean;\n  fn: (dur: number, index: number, total: number) => SpinnerData;\n}\n\nexport interface SpinnerData {\n  r?: number;\n  y1?: number;\n  y2?: number;\n  cx?: number;\n  cy?: number;\n  style: { [key: string]: string | undefined };\n  viewBox?: string;\n  transform?: string;\n}\n\nconst spinners = {\n  lines: {\n    dur: 1000,\n    lines: 8,\n    fn: (dur: number, index: number, total: number) => {\n      const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;\n      const animationDelay = `${(dur * index) / total - dur}ms`;\n\n      return {\n        y1: 14,\n        y2: 26,\n        style: {\n          transform: transform,\n          'animation-delay': animationDelay,\n        },\n      };\n    },\n  },\n}\n\nconst buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {\n  const data = spinner.fn(duration, index, total);\n  data.style['animation-duration'] = duration + 'ms';\n\n  return (\n    <svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>\n      <line transform=\"translate(32,32)\" y1={data.y1} y2={data.y2} />\n    </svg>\n  );\n};\n\n@Component({\n  tag: 'je-loading',\n  styleUrl: 'je-loading.scss',\n  shadow: true,\n})\nexport class JeLoading {\n  render() {\n    const spinner = spinners['lines'];\n    const duration = spinner.dur;\n    const svgs: SVGElement[] = [];\n\n    for (let i = 0; i < spinner.lines; i++) {\n      svgs.push(buildLine(spinner, duration, i, spinner.lines));\n    }\n\n    return (\n      <Host class={{ [`spinner-lines`]: true }}>\n        {svgs}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-modal/je-modal.css

@@ -0,0 +1,75 @@
+:host {
+  display: flex;
+}
+
+@media (width > 1200px) {
+  :host {
+    --je-width: 75%;
+    --je-height: 85%;
+  }
+}
+@media (992px < width < 1201px) {
+  :host {
+    --je-width: 80%;
+    --je-height: 90%;
+  }
+}
+@media (768px < width < 993px) {
+  :host {
+    --je-width: 85%;
+    --je-height: 95%;
+  }
+}
+@media (width < 769px) {
+  :host {
+    --je-width: 100%;
+    --je-height: 100%;
+  }
+}
+.modal {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 910;
+  width: var(--je-width);
+  height: var(--je-height);
+  background-color: var(--je-background-color, canvas);
+  color: var(--je-text-color, canvastext);
+  box-shadow: 0px 0px 15px 5px rgba(60, 60, 60, 0.1647058824);
+  border-radius: var(--je-border-radius, 2px);
+  overflow: hidden;
+}
+
+.modal-transition {
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+}
+
+.modal.open {
+  opacity: 1;
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--je-backdrop-color, rgba(0, 0, 0, 0.5));
+  z-index: 909;
+}
+
+.backdrop-transition {
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+}
+
+.backdrop.fade {
+  opacity: 1;
+}
+
+.clear {
+  background: rgba(0, 0, 0, 0);
+}