{"version":3,"sources":["../src/elements/count.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport KemetField from '../elements/field';\nimport KemetInput from '../elements/input';\nimport KemetTextarea from '../elements/textarea';\nimport { EnumStatuses, TypeStatus } from '../utilities/constants';\n\nexport interface InterfaceKemetStatusChangeEvent {\n  status: TypeStatus;\n  validity: ValidityState;\n  element: KemetField;\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-count\n * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.\n *\n * @prop {string} message - The text label shown to users\n * @prop {number} remaining - The number of characters remaining\n * @prop {number} limit - The maximum number of characters allowed\n * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached\n *\n * @cssproperty --kemet-count-font-size - The font size. Default: 90%.\n *\n * @event kemet-status-change - Fires when there's a change in status.\n *\n */\n\n@customElement('kemet-count')\nexport default class KemetCount extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        font-size: var(--kemet-count-font-size, 90%);\n        margin-top: 0.8rem;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Number })\n  limit: number;\n\n  @property({ type: Boolean, attribute: 'validate-immediately' })\n  validateImmediately: boolean;\n\n  @state()\n  remaining: number;\n\n  @state()\n  field: KemetField;\n\n  @state()\n  inputSlot: KemetInput | KemetTextarea;\n\n  @state()\n  input: HTMLInputElement;\n\n  @state()\n  textarea: HTMLTextAreaElement;\n\n  firstUpdated() {\n    this.field = this.closest('kemet-field');\n    this.inputSlot = this.field.querySelector('[slot=\"input\"]');\n    this.remaining = this.limit - this.field.length;\n\n    this.field.addEventListener('kemet-input', (event: CustomEvent) => {\n      this.remaining = this.limit - event.detail.value.length;\n\n      const nativeElement = this.input || this.textarea;\n\n      if (nativeElement) {\n        if (this.remaining < 0) {\n          if (this.validateImmediately) {\n            this.inputSlot.status = EnumStatuses.Error;\n            this.inputSlot.invalid = true;\n\n            emitEvent(this, 'kemet-status-change', {\n              status: EnumStatuses.Error,\n              validity: nativeElement.validity,\n              element: this.inputSlot,\n            });\n          }\n        } else {\n          this.inputSlot.status = EnumStatuses.Standard;\n          nativeElement.checkValidity();\n\n          emitEvent(this, 'kemet-status-change', {\n            status: EnumStatuses.Standard,\n            validity: nativeElement.validity,\n            element: this.inputSlot,\n          });\n        }\n      }\n    });\n\n    this.input = this.inputSlot.shadowRoot.querySelector('input');\n    this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');\n  }\n\n  render() {\n    return html`${this.remaining} ${this.message}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-count': KemetCount\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,UAAU,aAAa;AAgC/C,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAmCjD,eAAe;AACb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,YAAY,KAAK,MAAM,cAAc,gBAAgB;AAC1D,SAAK,YAAY,KAAK,QAAQ,KAAK,MAAM;AAEzC,SAAK,MAAM,iBAAiB,eAAe,CAAC,UAAuB;AACjE,WAAK,YAAY,KAAK,QAAQ,MAAM,OAAO,MAAM;AAEjD,YAAM,gBAAgB,KAAK,SAAS,KAAK;AAEzC,UAAI,eAAe;AACjB,YAAI,KAAK,YAAY,GAAG;AACtB,cAAI,KAAK,qBAAqB;AAC5B,iBAAK,UAAU;AACf,iBAAK,UAAU,UAAU;AAEzB,sBAAU,MAAM,uBAAuB;AAAA,cACrC;AAAA,cACA,UAAU,cAAc;AAAA,cACxB,SAAS,KAAK;AAAA,YAChB,CAAC;AAAA,UACH;AAAA,QACF,OAAO;AACL,eAAK,UAAU;AACf,wBAAc,cAAc;AAE5B,oBAAU,MAAM,uBAAuB;AAAA,YACrC;AAAA,YACA,UAAU,cAAc;AAAA,YACxB,SAAS,KAAK;AAAA,UAChB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,QAAQ,KAAK,UAAU,WAAW,cAAc,OAAO;AAC5D,SAAK,WAAW,KAAK,UAAU,WAAW,cAAc,UAAU;AAAA,EACpE;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,SAAS,IAAI,KAAK,OAAO;AAAA,EAC9C;AACF;AA7EqB,WACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAXP,WAYnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAdP,WAenB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,uBAAuB,CAAC;AAAA,GAjB3C,WAkBnB;AAGA;AAAA,EADC,MAAM;AAAA,GApBY,WAqBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAvBY,WAwBnB;AAGA;AAAA,EADC,MAAM;AAAA,GA1BY,WA2BnB;AAGA;AAAA,EADC,MAAM;AAAA,GA7BY,WA8BnB;AAGA;AAAA,EADC,MAAM;AAAA,GAhCY,WAiCnB;AAjCmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}