@felleslosninger/minid-elements 0.1.5 → 0.1.7

package/dist/components/checkbox.component.d.ts

@@ -9,10 +9,17 @@ declare const MinidCheckbox_base: import('../types/mixin-constructor.ts').Constr
  * @slot -- The default slot for the label text of the checkbox
  * @slot description - The slot for the description text of the checkbox
  *
+ * @csspart label - The checkbox's label.
+ * @csspart description - The checkbox's description.
+ * @csspart validation-message - The error message shown by `invalidmessage`.
+ *
  * @event mid-change - Emitted when the checked state changes
  */
 export declare class MinidCheckbox extends MinidCheckbox_base {
     private input;
+    private readonly hasSlotController;
+    private readonly descriptionId;
+    private readonly validationId;
     /**
      * The name of the checkbox, submitted as a name/value pair with form data.
      */
@@ -26,6 +33,7 @@ export declare class MinidCheckbox extends MinidCheckbox_base {
     disabled: boolean;
     readonly: boolean;
     invalid: boolean;
+    invalidmessage: string;
     required: boolean;
     static get formControlValidators(): import('../types/validator.type.ts').Validator[];
     shouldFormValueUpdate(): boolean;

package/dist/components/checkbox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,0BAA0B,CAAC;AAMlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAED;;;;;GAKG;AAEH,qBACa,aAAc,SAAQ,kBAAoC;IAErE,OAAO,CAAC,KAAK,CAAoB;IAEjC;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CAmChB"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,0BAA0B,CAAC;AAOlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;CACF;;AAUD;;;;;;;;;GASG;AAEH,qBACa,aAAc,SAAQ,kBAElC;IAEC,OAAO,CAAC,KAAK,CAAoB;IAEjC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAGhC;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAC/C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgB;IAE7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,cAAc,SAAM;IAGpB,QAAQ,UAAS;IAEjB,MAAM,KAAK,qBAAqB,qDAE/B;IAED,qBAAqB,IAAI,OAAO;IAIhC,IAAI,gBAAgB,qBAEnB;IAED,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B;;OAEG;IACH,IAAI;IAKJ,iBAAiB;IAKR,MAAM;CAoEhB"}

package/dist/components/checkbox.js

@@ -1,5 +1,6 @@
-import { LitElement, html } from "lit";
+import { css, LitElement, html } from "lit";
 import { query, property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { live } from "lit/directives/live.js";
 import { styled } from "../mixins/tailwind.mixin.js";
 import "./icon/icon.js";
@@ -7,6 +8,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { FormControlMixin } from "../mixins/form-control.mixin.js";
 import { watch } from "../internal/watch.js";
 import { requiredValidator } from "../mixins/validators.js";
+import { HasSlotController } from "../internal/slot.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,15 +19,31 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
+const styles = [
+  css`
+    .description {
+      color: var(--ds-color-neutral-text-subtle);
+    }
+  `
+];
+let MinidCheckbox = class extends FormControlMixin(
+  styled(LitElement, styles)
+) {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "description"
+    );
+    this.descriptionId = "description";
+    this.validationId = "validation";
     this.name = "";
     this.value = "on";
     this.checked = false;
     this.disabled = false;
     this.readonly = false;
     this.invalid = false;
+    this.invalidmessage = "";
     this.required = false;
   }
   static get formControlValidators() {
@@ -73,6 +91,12 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
     this.setValue(this.value);
   }
   render() {
+    const hasDescription = !!this.description || this.hasSlotController.test("description");
+    const isInvalid = this.invalid || !!this.invalidmessage;
+    const describedBy = [
+      hasDescription ? this.descriptionId : void 0,
+      this.invalidmessage ? this.validationId : void 0
+    ].filter(Boolean).join(" ") || void 0;
     return html`
       <ds-field class="ds-field">
       <input
@@ -85,6 +109,11 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
           ?checked=${this.checked}
           ?readonly=${this.readonly}
           ?required=${this.required}
+          aria-invalid=${isInvalid ? "true" : "false"}
+          aria-describedby=${ifDefined(describedBy)}
+          aria-errormessage=${ifDefined(
+      this.invalidmessage ? this.validationId : void 0
+    )}
           @click=${this.handleClick}
           @keydown=${this.handleKeydown}
           />
@@ -95,7 +124,11 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
         >
           <slot></slot>
         </label>
-        <div data-field="description">
+        <div
+          class="description"
+          id="${this.descriptionId}"
+          aria-hidden="true"
+        >
           <slot
             name="description"
             part="description"
@@ -103,6 +136,16 @@ let MinidCheckbox = class extends FormControlMixin(styled(LitElement)) {
             ${this.description}
           </slot>
         </div>
+        <p
+          class="${classMap({
+      "ds-validation-message": !!this.invalidmessage
+    })}"
+          part="validation-message"
+          id="${this.validationId}"
+          aria-live="polite"
+        >
+          ${this.invalidmessage}
+        </p>
       </ds-field>
     `;
   }
@@ -131,6 +174,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], MinidCheckbox.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], MinidCheckbox.prototype, "invalidmessage", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], MinidCheckbox.prototype, "required", 2);

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\n/**\n * @slot -- The default slot for the label text of the checkbox\n * @slot description - The slot for the description text of the checkbox\n *\n * @event mid-change - Emitted when the checked state changes\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(styled(LitElement)) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property()\n  description?: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n\n    return html`\n      <ds-field class=\"ds-field\">\n      <input\n      id=\"input\"\n      class=\"ds-input\"\n      type=\"checkbox\"\n      value=${ifDefined(this.value)}\n      .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n          />\n        <label\n          class=\"ds-label\"\n          part=\"label\"\n          for=\"input\"\n        >\n          <slot></slot>\n        </label>\n        <div data-field=\"description\">\n          <slot\n            name=\"description\"\n            part=\"description\"\n          >\n            ${this.description}\n          </slot>\n        </div>\n      </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '../mixins/form-control.mixin.ts';\nimport { watch } from '../internal/watch.ts';\nimport { requiredValidator } from '../mixins/validators.ts';\nimport { HasSlotController } from '../internal/slot.ts';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-checkbox': MinidCheckbox;\n  }\n}\n\nconst styles = [\n  css`\n    .description {\n      color: var(--ds-color-neutral-text-subtle);\n    }\n  `,\n];\n\n/**\n * @slot -- The default slot for the label text of the checkbox\n * @slot description - The slot for the description text of the checkbox\n *\n * @csspart label - The checkbox's label.\n * @csspart description - The checkbox's description.\n * @csspart validation-message - The error message shown by `invalidmessage`.\n *\n * @event mid-change - Emitted when the checked state changes\n */\n\n@customElement('mid-checkbox')\nexport class MinidCheckbox extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'description'\n  );\n\n  private readonly descriptionId = 'description';\n  private readonly validationId = 'validation';\n\n  /**\n   * The name of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  name = '';\n\n  /**\n   * The current value of the checkbox, submitted as a name/value pair with form data.\n   */\n  @property()\n  value = 'on';\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property()\n  description?: string;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  readonly = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property()\n  invalidmessage = '';\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  static get formControlValidators() {\n    return [requiredValidator];\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.checked;\n  }\n\n  get validationTarget() {\n    return this.input;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.form.requestSubmit();\n        }\n      });\n    }\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    // this.indeterminate = false;\n    this.dispatchEvent(new Event('mid-change'));\n  }\n\n  /**\n   * Simulates a click on the checkbox.\n   */\n  click() {\n    this.input.click();\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input.blur();\n  }\n\n  @watch(['checked', 'value'])\n  handleStateChange() {\n    // this.input.indeterminate = this.indeterminate; // force a sync update\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const hasDescription =\n      !!this.description || this.hasSlotController.test('description');\n    const isInvalid = this.invalid || !!this.invalidmessage;\n    const describedBy =\n      [\n        hasDescription ? this.descriptionId : undefined,\n        this.invalidmessage ? this.validationId : undefined,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    // The description wrapper is aria-hidden. It is already announced through\n    // the aria-describedby above, and without this the text is also reachable as\n    // its own node when navigating the page, so it is read out twice.\n\n    return html`\n      <ds-field class=\"ds-field\">\n      <input\n      id=\"input\"\n      class=\"ds-input\"\n      type=\"checkbox\"\n      value=${ifDefined(this.value)}\n      .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-invalid=${isInvalid ? 'true' : 'false'}\n          aria-describedby=${ifDefined(describedBy)}\n          aria-errormessage=${ifDefined(\n            this.invalidmessage ? this.validationId : undefined\n          )}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n          />\n        <label\n          class=\"ds-label\"\n          part=\"label\"\n          for=\"input\"\n        >\n          <slot></slot>\n        </label>\n        <div\n          class=\"description\"\n          id=\"${this.descriptionId}\"\n          aria-hidden=\"true\"\n        >\n          <slot\n            name=\"description\"\n            part=\"description\"\n          >\n            ${this.description}\n          </slot>\n        </div>\n        <p\n          class=\"${classMap({\n            'ds-validation-message': !!this.invalidmessage,\n          })}\"\n          part=\"validation-message\"\n          id=\"${this.validationId}\"\n          aria-live=\"polite\"\n        >\n          ${this.invalidmessage}\n        </p>\n      </ds-field>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/code-input.component.d.ts

@@ -14,10 +14,13 @@ declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Const
  * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown
  *
  * @slot label - The input's label if you need to use HTML. Alternatively, you can use the `label` attribute.
+ * @slot description - The input's description if you need to use HTML. Alternatively, you can use the `description` attribute.
  *
  * @csspart input-container - The wrapper around the input elements. This can be used to adjust font-size.
+ * @csspart description - The description shown between the label and the character boxes.
  * @csspart character-boxes - The container for the visual character boxes.
  * @csspart character-box - An individual character box.
+ * @csspart validation-message - The error message shown by `invalidmessage`.
  *
  * @method focus - Focuses the input element
  * @method clear - Clears the input
@@ -25,10 +28,12 @@ declare const MinidCodeInput_base: import('../types/mixin-constructor.ts').Const
 export declare class MinidCodeInput extends MinidCodeInput_base {
     private readonly hasSlotControler;
     private readonly labelId;
+    private readonly descriptionId;
     private readonly validationId;
     private inputElement;
     value: string;
     label: string;
+    description: string;
     type: 'number' | 'text';
     /**
      * For displaying appropriate virtual keyboard
@@ -38,6 +43,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
      * Adjusts the font-size of the code inputs
      */
     size: 'sm' | 'md' | 'lg';
+    labelsize?: 'sm' | 'md' | 'lg';
     /**
      * Number of input characters or digits
      */
@@ -59,6 +65,7 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
      * Visually hides `label` (still available for screen readers)
      */
     hidelabel: boolean;
+    hidedescription: boolean;
     /**
      * Makes the input required
      */
@@ -68,20 +75,38 @@ export declare class MinidCodeInput extends MinidCodeInput_base {
      */
     pattern?: string;
     private isFocused;
+    private caretPosition;
+    private lastFormValue;
     static get formControlValidators(): import('../types/validator.type.ts').Validator[];
     get validationTarget(): HTMLInputElement;
     protected firstUpdated(_changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private handleBoxClick;
+    /**
+     * Catches caret moves we did not make - arrow keys, Home/End, word jumps,
+     * shift-selection - without enumerating keys, and keeps up while a key is held.
+     *
+     * Must be listened for on the document: for a caret move the user made,
+     * Chromium fires it only there, not at the input and not into the shadow root,
+     * so an `@selectionchange` binding on either never runs.
+     */
+    private handleSelectionChange;
+    private syncCaretPosition;
     private handleFocus;
     private handleBlur;
+    private filterValue;
     private handleBeforeInput;
+    private handlePaste;
     private handleInput;
     private handleChange;
     private handleKeydown;
     clear(): void;
     resetFormControl(): void;
     focus(options?: FocusOptions): void;
+    private focusInput;
     handleLengthChange(): void;
+    handleValueChange(): void;
     render(): import('lit').TemplateResult<1>;
 }
 export {};

package/dist/components/code-input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS5D,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AAmOD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiD;IAG9E,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIhE,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAML,gBAAgB;IAIhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAUnC,kBAAkB;IAMT,MAAM;CAkGhB"}
+{"version":3,"file":"code-input.component.d.ts","sourceRoot":"","sources":["../../src/components/code-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AASrE,OAAO,0BAA0B,CAAC;AASlC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF;;AA2PD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,cAAe,SAAQ,mBAEnC;IACC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IACF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4C;IACpE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkD;IAChF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiD;IAG9E,OAAO,CAAC,YAAY,CAAoB;IAGxC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAU;IAEjC;;OAEG;IAEH,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAE1C;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAGhC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE/B;;OAEG;IAEH,MAAM,SAAK;IAGX,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,UAAS;IAGlB,eAAe,UAAS;IAExB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,aAAa,CAAuB;IAE5C,MAAM,KAAK,qBAAqB,qDAO/B;IAED,IAAI,gBAAgB,qBAEnB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIvD,iBAAiB;IAQjB,oBAAoB;IAQ7B,OAAO,CAAC,cAAc;IAYtB;;;;;;;OAOG;IACH,OAAO,CAAC,qBAAqB,CAK3B;IAEF,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;IAiBrB,KAAK;IAQL,gBAAgB;IAIhB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAYnC,OAAO,CAAC,UAAU;IAclB,kBAAkB;IAOlB,iBAAiB;IAeR,MAAM;CAsIhB"}