@felleslosninger/minid-elements 0.0.88

package/dist/components/textfield.js

@@ -0,0 +1,435 @@
+import { css, LitElement, nothing, html } from "lit";
+import { query, property, state, customElement } from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
+import { stringConverter } from "../internal/string-converter.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { HasSlotController } from "../internal/slot.js";
+import { FormControlMixin } from "../mixins/form-control.mixin.js";
+import { requiredValidator, maxLengthValidator, minLengthValidator, patternValidator } from "../mixins/validators.js";
+import { watch } from "../internal/watch.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _initialValue;
+const styles = [
+  css`
+    :host {
+      display: block;
+    }
+
+    .form-control {
+      display: block;
+    }
+
+    .form-control:has(input:disabled) {
+      opacity: 0.3;
+    }
+
+    .fds-label {
+      margin-bottom: 0.5rem;
+    }
+
+    .input {
+      width: 100%;
+      outline: none;
+      box-shadow: none;
+      background-color: transparent;
+      padding: 0 1rem;
+    }
+
+    .field:has(.input:disabled) {
+      opacity: var(--fds-opacity-disabled);
+    }
+
+    .suffix,
+    .prefix {
+      display: flex;
+      place-items: center;
+    }
+
+    .suffix ::slotted(*) {
+      margin-inline-end: 1rem !important; // global style for button is margin: 0
+      border-radius: 4px;
+    }
+
+    .prefix ::slotted(*) {
+      margin-inline-start: 1rem !important; // global style for button is margin: 0
+      border-radius: 4px;
+    }
+
+    .fds-textfield__readonly__icon svg {
+      font-size: 1.2em;
+    }
+
+    .clear-button:not(:disabled, [aria-disabled]):hover mid-icon {
+      border-radius: 4px;
+      background: var(--fds-semantic-surface-action-subtle-hover);
+    }
+  `
+];
+let nextUniqueId = 0;
+let MinidTextfield = class extends FormControlMixin(
+  styled(LitElement, styles)
+) {
+  constructor() {
+    super();
+    this.hasSlotControler = new HasSlotController(this, "label");
+    __privateAdd(this, _initialValue, "");
+    this.label = "";
+    this.description = "";
+    this.value = "";
+    this.size = "md";
+    this.autofocus = false;
+    this.invalidmessage = "";
+    this.type = "text";
+    this.clearable = false;
+    this.passwordtoggle = false;
+    this.passwordvisible = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.hidelabel = false;
+    this.hasFocus = false;
+    nextUniqueId++;
+    this.inputId = `mid-textfield-input-${nextUniqueId}`;
+    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;
+  }
+  /**
+   * @ignore
+   */
+  static get formControlValidators() {
+    return [
+      requiredValidator,
+      maxLengthValidator,
+      minLengthValidator,
+      patternValidator
+    ];
+  }
+  /**
+   * @ignore
+   */
+  get validationTarget() {
+    return this.input;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateSet(this, _initialValue, this.value);
+  }
+  handleKeydown(event) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.form.requestSubmit();
+        }
+      });
+    }
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new Event("mid-blur", { bubbles: true, composed: true })
+    );
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.dispatchEvent(
+      new Event("mid-change", { bubbles: true, composed: true })
+    );
+  }
+  handleInput() {
+    this.value = this.input.value;
+    this.setValue(this.value);
+    this.dispatchEvent(
+      new Event("mid-input", { bubbles: true, composed: true })
+    );
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.dispatchEvent(
+      new Event("mid-focus", { composed: true, bubbles: true })
+    );
+  }
+  handlePasswordToggle() {
+    this.passwordvisible = !this.passwordvisible;
+  }
+  handleClearClick(event) {
+    event.preventDefault();
+    if (this.value !== "") {
+      this.value = "";
+      this.dispatchEvent(
+        new Event("mid-clear", { composed: true, bubbles: true })
+      );
+      this.dispatchEvent(
+        new Event("mid-input", { composed: true, bubbles: true })
+      );
+      this.dispatchEvent(
+        new Event("mid-change", { composed: true, bubbles: true })
+      );
+    }
+    this.input.focus();
+  }
+  focus() {
+    this.hasFocus = true;
+    this.input.focus();
+  }
+  resetFormControl() {
+    this.invalidmessage = "";
+    this.value = __privateGet(this, _initialValue);
+  }
+  forceError(message) {
+    super.forceError(message);
+  }
+  handleValueUpdate() {
+    this.setValue(this.value);
+  }
+  render() {
+    const lg = this.size === "lg";
+    const md = this.size === "md";
+    const sm = this.size === "sm";
+    const hasLabelSlot = this.hasSlotControler.test("label");
+    const hasLabel = !!this.label || !!hasLabelSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
+    const isClearIconVisible = hasClearIcon && (typeof this.value === "number" || this.value.length > 0);
+    return html`
+      <div
+        part="form-control"
+        class="${classMap({
+      "form-control": true,
+      "fds-paragraph": true,
+      "fds-textfield": true,
+      "fds-textfield--readonly": this.readonly,
+      "fds-paragraph--sm": sm,
+      "fds-paragraph--md": md,
+      "fds-paragraph--lg": lg,
+      "fds-textfield--sm": sm,
+      "fds-textfield--md": md,
+      "fds-textfield--lg": lg
+    })}"
+      >
+        <label
+          for="${this.inputId}"
+          class="${classMap({
+      "sr-only": this.hidelabel || !hasLabel,
+      "fds-label": true,
+      "fds-label--medium-weight": true,
+      "fds-textfield__label": true,
+      "fds-label--sm": sm,
+      "fds-label--md": md,
+      "fds-label--lg": lg
+    })}"
+        >
+          ${!this.readonly ? nothing : html`<mid-icon
+                class="fds-textfield__readonly__icon"
+                library="system"
+                name="padlock-locked-fill"
+              ></mid-icon>`}
+          <slot name="label"> ${this.label} </slot>
+        </label>
+        ${!this.description ? nothing : html`
+              <div
+                id="${this.descriptionId}"
+                part="description"
+                class="${classMap({
+      description: true,
+      "fds-paragraph": true,
+      "sr-only": this.hidelabel,
+      "fds-paragraph--sm": sm,
+      "fds-paragraph--md": md,
+      "fds-paragraph--lg": lg,
+      "fds-textfield__description": true
+    })}"
+              >
+                ${this.description}
+              </div>
+            `}
+        <div
+          part="base"
+          class="${classMap({
+      "fds-textfield__field": true,
+      "border-neutral": !this.invalidmessage,
+      "border-danger": this.invalidmessage,
+      border: !this.invalidmessage,
+      "border-2": this.invalidmessage
+    })} field focus-within:shadow-focus-inner focus-within:outline-focus-outer outline-2 outline-transparent focus-within:outline-3 focus-within:outline-offset-3"
+        >
+          <span class="prefix">
+            <slot name="prefix"></slot>
+          </span>
+          <input
+            id="${this.inputId}"
+            class="input"
+            part="input"
+            .value=${live(this.value)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?autofocus=${this.autofocus}
+            autocomplete=${ifDefined(this.autocomplete)}
+            type=${this.type === "password" && this.passwordvisible ? "text" : this.type}
+            aria-describedby="${this.descriptionId}"
+            aria-errormessage="error-message"
+            placeholder=${ifDefined(this.placeholder)}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            min=${ifDefined(this.min)}
+            max=${ifDefined(this.max)}
+            pattern=${ifDefined(this.pattern)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+          />
+          ${isClearIconVisible ? html`
+                <button
+                  part="clear-button"
+                  type="button"
+                  class="${classMap({
+      "text-6": sm,
+      "text-7": md,
+      "text-8": lg
+    })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded"
+                  aria-label="Tøm"
+                  @click=${this.handleClearClick}
+                >
+                  <mid-icon name="xmark" library="system"></mid-icon>
+                </button>
+              ` : ""}
+          ${this.passwordtoggle && !this.disabled ? html`
+                <button
+                  part="password-toggle-button"
+                  type="button"
+                  class="${classMap({
+      "text-6": sm,
+      "text-7": md,
+      "text-8": lg
+    })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded"
+                  aria-label=${this.passwordvisible ? "skjul passord" : "vis passord"}
+                  @click=${this.handlePasswordToggle}
+                  tabindex="-1"
+                >
+                  ${this.passwordvisible ? html` <mid-icon
+                        name="eye-slash"
+                        library="system"
+                      ></mid-icon>` : html`
+                        <mid-icon name="eye" library="system"> </mid-icon>
+                      `}
+                </button>
+              ` : ""}
+          <span part="suffix" class="suffix">
+            <slot name="suffix"></slot>
+          </span>
+        </div>
+      </div>
+      <div
+        class="${classMap({
+      hidden: !this.invalidmessage
+    })} error-message text-danger-subtle flex gap-1 pt-2"
+        id="error-message"
+        aria-live="polite"
+      >
+        <mid-icon name="xmark-octagon-fill" class="mt-1 text-xl"></mid-icon>
+        ${this.invalidmessage}
+      </div>
+    `;
+  }
+};
+_initialValue = /* @__PURE__ */ new WeakMap();
+__decorateClass([
+  query(".error-message")
+], MinidTextfield.prototype, "errorMessageDiv", 2);
+__decorateClass([
+  query(".input")
+], MinidTextfield.prototype, "input", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "label", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "description", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "value", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "size", 2);
+__decorateClass([
+  property({ converter: stringConverter })
+], MinidTextfield.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidTextfield.prototype, "autofocus", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidTextfield.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], MinidTextfield.prototype, "maxlength", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "min", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "max", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "invalidmessage", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidTextfield.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidTextfield.prototype, "passwordtoggle", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidTextfield.prototype, "passwordvisible", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MinidTextfield.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MinidTextfield.prototype, "readonly", 2);
+__decorateClass([
+  property()
+], MinidTextfield.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidTextfield.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidTextfield.prototype, "hidelabel", 2);
+__decorateClass([
+  state()
+], MinidTextfield.prototype, "hasFocus", 2);
+__decorateClass([
+  watch("value")
+], MinidTextfield.prototype, "handleValueUpdate", 1);
+MinidTextfield = __decorateClass([
+  customElement("mid-textfield")
+], MinidTextfield);
+export {
+  MinidTextfield
+};
+//# sourceMappingURL=textfield.js.map

package/dist/components/textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textfield.js","sources":["../../src/components/textfield.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stringConverter } from '../internal/string-converter';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HasSlotController } from '../internal/slot';\nimport { FormControlMixin } from '../mixins/form-control.mixin';\nimport {\n  maxLengthValidator,\n  minLengthValidator,\n  patternValidator,\n  requiredValidator,\n} from '../mixins/validators';\nimport { watch } from '../internal/watch';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-textfield': MinidTextfield;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: block;\n    }\n\n    .form-control {\n      display: block;\n    }\n\n    .form-control:has(input:disabled) {\n      opacity: 0.3;\n    }\n\n    .fds-label {\n      margin-bottom: 0.5rem;\n    }\n\n    .input {\n      width: 100%;\n      outline: none;\n      box-shadow: none;\n      background-color: transparent;\n      padding: 0 1rem;\n    }\n\n    .field:has(.input:disabled) {\n      opacity: var(--fds-opacity-disabled);\n    }\n\n    .suffix,\n    .prefix {\n      display: flex;\n      place-items: center;\n    }\n\n    .suffix ::slotted(*) {\n      margin-inline-end: 1rem !important; // global style for button is margin: 0\n      border-radius: 4px;\n    }\n\n    .prefix ::slotted(*) {\n      margin-inline-start: 1rem !important; // global style for button is margin: 0\n      border-radius: 4px;\n    }\n\n    .fds-textfield__readonly__icon svg {\n      font-size: 1.2em;\n    }\n\n    .clear-button:not(:disabled, [aria-disabled]):hover mid-icon {\n      border-radius: 4px;\n      background: var(--fds-semantic-surface-action-subtle-hover);\n    }\n  `,\n];\n\nlet nextUniqueId = 0;\n\n/**\n *\n * @event mid-change - Emitted when a change to the input value is comitted by the user\n * @event mid-input - Emitted when the input element recieves input\n * @event mid-clear - Emitted when the input value is cleared\n * @event mid-focus - Emitted when input element is focused\n * @event mid-blur - Emitted when focus moves away from input element\n * @event {detail: { validity: ValidityState }} mid-invalid-hide - Emitted when the error message should be hidden\n * @event {detail: { validity: ValidityState }} mid-invalid-show - Emitted when the error message should be shown\n *\n * @slot prefix - Used for decoration to the left of the input\n * @slot suffix - Used for decoration to the right of the input\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The fields's base wrapper.\n * @csspart input - The internal `<input>` element.\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart clear-button - The clear button\n * @csspart password-toggle-button - The button for toggling password visibility\n */\n@customElement('mid-textfield')\nexport class MinidTextfield extends FormControlMixin(\n  styled(LitElement, styles)\n) {\n  /**\n   * @ignore\n   */\n  inputId!: string;\n\n  /**\n   * @ignore\n   */\n  descriptionId!: string;\n\n  /**\n   * @ignore\n   */\n  hasSlotControler = new HasSlotController(this, 'label');\n\n  /**\n   * @ignore\n   */\n  #initialValue = '';\n\n  /**\n   * @ignore\n   */\n  @query('.error-message')\n  errorMessageDiv!: HTMLDivElement;\n\n  /**\n   * @ignore\n   */\n  @query('.input')\n  input!: HTMLInputElement;\n\n  @property()\n  label = '';\n\n  @property()\n  description = '';\n\n  @property()\n  value = '';\n\n  @property()\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property({ converter: stringConverter })\n  placeholder?: string;\n\n  /**\n   * Autofocus the input field on page load\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * User agent autocomplete hint\n   */\n  @property()\n  autocomplete?: AutoFill;\n\n  /**\n   *  The minimum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  minlength?: number;\n\n  /**\n   *  The maximum length of input that will be considered valid.\n   */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * The input's minimum value. Only applies to date and number input types.\n   */\n  @property()\n  min?: number | string;\n\n  /**\n   * The input's maximum value. Only applies to date and number input types.\n   */\n  @property()\n  max?: number | string;\n\n  /**\n   * Error message to display when the input is invalid, also activates invalid styling\n   */\n  @property()\n  invalidmessage = '';\n\n  @property()\n  type:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week' = 'text';\n\n  /**\n   * Adds a clear button when the input is not empty.\n   * */\n  @property({ type: Boolean })\n  clearable = false;\n\n  /**\n   * Adds a button to toggle the password's visibility.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordtoggle = false;\n\n  /**\n   * Determines wether the password is currently visible.\n   * Only applies if type is password\n   */\n  @property({ type: Boolean })\n  passwordvisible = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * A regular expression pattern to validate input against.\n   */\n  @property()\n  pattern?: string;\n\n  /**\n   * Makes the input required\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Visually hides `label` and `description` (still available for screen readers)\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  @state()\n  hasFocus = false;\n\n  /**\n   * @ignore\n   */\n  static get formControlValidators() {\n    return [\n      requiredValidator,\n      maxLengthValidator,\n      minLengthValidator,\n      patternValidator,\n    ];\n  }\n\n  /**\n   * @ignore\n   */\n  get validationTarget() {\n    return this.input;\n  }\n\n  constructor() {\n    super();\n    nextUniqueId++;\n    this.inputId = `mid-textfield-input-${nextUniqueId}`;\n    this.descriptionId = `mid-textfield-description-${nextUniqueId}`;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#initialValue = this.value;\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 handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.dispatchEvent(\n      new Event('mid-change', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.setValue(this.value);\n    this.dispatchEvent(\n      new Event('mid-input', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private handlePasswordToggle() {\n    this.passwordvisible = !this.passwordvisible;\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.dispatchEvent(\n        new Event('mid-clear', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-input', { composed: true, bubbles: true })\n      );\n      this.dispatchEvent(\n        new Event('mid-change', { composed: true, bubbles: true })\n      );\n    }\n\n    this.input.focus();\n  }\n\n  focus() {\n    this.hasFocus = true;\n    this.input.focus();\n  }\n\n  resetFormControl() {\n    this.invalidmessage = '';\n    this.value = this.#initialValue;\n  }\n\n  forceError(message?: string): void {\n    super.forceError(message);\n  }\n\n  @watch('value')\n  handleValueUpdate() {\n    this.setValue(this.value);\n  }\n\n  override render() {\n    const lg = this.size === 'lg';\n    const md = this.size === 'md';\n    const sm = this.size === 'sm';\n\n    const hasLabelSlot = this.hasSlotControler.test('label');\n    const hasLabel = !!this.label || !!hasLabelSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible =\n      hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=\"${classMap({\n          'form-control': true,\n          'fds-paragraph': true,\n          'fds-textfield': true,\n          'fds-textfield--readonly': this.readonly,\n          'fds-paragraph--sm': sm,\n          'fds-paragraph--md': md,\n          'fds-paragraph--lg': lg,\n          'fds-textfield--sm': sm,\n          'fds-textfield--md': md,\n          'fds-textfield--lg': lg,\n        })}\"\n      >\n        <label\n          for=\"${this.inputId}\"\n          class=\"${classMap({\n            'sr-only': this.hidelabel || !hasLabel,\n            'fds-label': true,\n            'fds-label--medium-weight': true,\n            'fds-textfield__label': true,\n            'fds-label--sm': sm,\n            'fds-label--md': md,\n            'fds-label--lg': lg,\n          })}\"\n        >\n          ${!this.readonly\n            ? nothing\n            : html`<mid-icon\n                class=\"fds-textfield__readonly__icon\"\n                library=\"system\"\n                name=\"padlock-locked-fill\"\n              ></mid-icon>`}\n          <slot name=\"label\"> ${this.label} </slot>\n        </label>\n        ${!this.description\n          ? nothing\n          : html`\n              <div\n                id=\"${this.descriptionId}\"\n                part=\"description\"\n                class=\"${classMap({\n                  description: true,\n                  'fds-paragraph': true,\n                  'sr-only': this.hidelabel,\n                  'fds-paragraph--sm': sm,\n                  'fds-paragraph--md': md,\n                  'fds-paragraph--lg': lg,\n                  'fds-textfield__description': true,\n                })}\"\n              >\n                ${this.description}\n              </div>\n            `}\n        <div\n          part=\"base\"\n          class=\"${classMap({\n            'fds-textfield__field': true,\n            'border-neutral': !this.invalidmessage,\n            'border-danger': this.invalidmessage,\n            border: !this.invalidmessage,\n            'border-2': this.invalidmessage,\n          })} field focus-within:shadow-focus-inner focus-within:outline-focus-outer outline-2 outline-transparent focus-within:outline-3 focus-within:outline-offset-3\"\n        >\n          <span class=\"prefix\">\n            <slot name=\"prefix\"></slot>\n          </span>\n          <input\n            id=\"${this.inputId}\"\n            class=\"input\"\n            part=\"input\"\n            .value=${live(this.value)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?autofocus=${this.autofocus}\n            autocomplete=${ifDefined(this.autocomplete as any)}\n            type=${this.type === 'password' && this.passwordvisible\n              ? 'text'\n              : this.type}\n            aria-describedby=\"${this.descriptionId}\"\n            aria-errormessage=\"error-message\"\n            placeholder=${ifDefined(this.placeholder)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n          />\n          ${isClearIconVisible\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"${classMap({\n                    'text-6': sm,\n                    'text-7': md,\n                    'text-8': lg,\n                  })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded\"\n                  aria-label=\"Tøm\"\n                  @click=${this.handleClearClick}\n                >\n                  <mid-icon name=\"xmark\" library=\"system\"></mid-icon>\n                </button>\n              `\n            : ''}\n          ${this.passwordtoggle && !this.disabled\n            ? html`\n                <button\n                  part=\"password-toggle-button\"\n                  type=\"button\"\n                  class=\"${classMap({\n                    'text-6': sm,\n                    'text-7': md,\n                    'text-8': lg,\n                  })} flex w-[calc(1em+1rem*2)] items-center justify-center rounded\"\n                  aria-label=${this.passwordvisible\n                    ? 'skjul passord'\n                    : 'vis passord'}\n                  @click=${this.handlePasswordToggle}\n                  tabindex=\"-1\"\n                >\n                  ${this.passwordvisible\n                    ? html` <mid-icon\n                        name=\"eye-slash\"\n                        library=\"system\"\n                      ></mid-icon>`\n                    : html`\n                        <mid-icon name=\"eye\" library=\"system\"> </mid-icon>\n                      `}\n                </button>\n              `\n            : ''}\n          <span part=\"suffix\" class=\"suffix\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n      </div>\n      <div\n        class=\"${classMap({\n          hidden: !this.invalidmessage,\n        })} error-message text-danger-subtle flex gap-1 pt-2\"\n        id=\"error-message\"\n        aria-live=\"polite\"\n      >\n        <mid-icon name=\"xmark-octagon-fill\" class=\"mt-1 text-xl\"></mid-icon>\n        ${this.invalidmessage}\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,127 @@
+import { LitElement } from 'lit';
+import { MinidPopup } from './popup.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-tooltip': MinidTooltip;
+    }
+}
+declare const MinidTooltip_base: typeof LitElement;
+/**
+ * @event mid-show - Emitted when open is set to `true`
+ * @event mid-hide - Emitted when open is set to `false`
+ * @event mid-after-show - Emitted after the tooltip has shown an all animations are complete
+ * @event mid-after-hide - Emitted after the tooltip has hidden an all animations are complete
+ *
+ * @slot -- The default slot is for the trigger element
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @csspart base - The component base wrapper. `<mid-popup> element
+ * @csspart body - The tooltip body, where the content is rendered
+ *
+ * @cssproperty [--max-width=20rem] - Max width of the tooltip content
+ * @cssproperty [--hide-delay=0ms] - Delay for hiding the tooltip
+ * @cssproperty [--show-delay=150ms] - Delay for showing the tooltip
+ */
+export declare class MinidTooltip extends MinidTooltip_base {
+    /**
+     * @ignore
+     */
+    private hoverTimeout?;
+    /**
+     * @ignore
+     */
+    private closeWatcher;
+    /**
+     * @ignore
+     */
+    defaultSlot: HTMLSlotElement;
+    /**
+     * @ignore
+     */
+    body: HTMLElement;
+    /**
+     * @ignore
+     */
+    popup: MinidPopup;
+    /**
+     * The text to render in the tooltip. If you need HTML you can use the content slot
+     */
+    content: string;
+    /**
+     * Controls how the tooltip is activated. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    trigger: 'focus hover' | 'hover' | 'focus' | 'manual' | 'click';
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * Disables the tooltip so it won't show when triggered.
+     */
+    disabled: boolean;
+    /**
+     * The distance in pixels from which to offset the tooltip away from its target.
+     */
+    distance: number;
+    /**
+     * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
+     */
+    open: boolean;
+    /**
+     * The distance in pixels from which to offset the tooltip along its target.
+     */
+    skidding: number;
+    /**
+     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+     * scenarios.
+     */
+    hoist: boolean;
+    /**
+     * Inverts the color of the tooltip. Use this on dark backgrounds.
+     */
+    inverted: boolean;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /**
+     * @ignore
+     */
+    private handleBlur;
+    /**
+     * @ignore
+     */
+    private handleClick;
+    /**
+     * @ignore
+     */
+    private handleFocus;
+    /**
+     * @ignore
+     */
+    private handleDocumentKeyDown;
+    /**
+     * @ignore
+     */
+    private handleMouseOver;
+    /**
+     * @ignore
+     */
+    private handleMouseOut;
+    /**
+     * @ignore
+     */
+    private hasTrigger;
+    handleOpenChange(): Promise<void>;
+    handleOptionsChange(): Promise<void>;
+    handleDisabledChange(): void;
+    /**
+     * Shows the tooltip.
+     */
+    show(): Promise<void>;
+    /**
+     * Hides the tooltip
+     */
+    hide(): Promise<void>;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=tooltip.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAa/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,YAAY,CAAC;KAC7B;CACF;;AAyBD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,YAAa,SAAQ,iBAA0B;IAC1D;;OAEG;IACH,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B;;OAEG;IACH,OAAO,CAAC,YAAY,CAA6B;IAEjD;;OAEG;IAEH,WAAW,EAAG,eAAe,CAAC;IAE9B;;OAEG;IAEH,IAAI,EAAG,WAAW,CAAC;IAEnB;;OAEG;IAEH,KAAK,EAAG,UAAU,CAAC;IAEnB;;OAEG;IAEH,OAAO,SAAM;IAEb;;;OAGG;IAEH,OAAO,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAC/C;IAEJ,SAAS,EACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,QAAQ,UAAS;;IAWjB,oBAAoB;IAMpB,YAAY;IAUZ;;OAEG;IACH,OAAO,CAAC,UAAU,CAIhB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAQjB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAIjB;IAEF;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAM3B;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe,CAQrB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc,CAQpB;IAEF;;OAEG;IACH,OAAO,CAAC,UAAU;IAMZ,gBAAgB;IAmDhB,mBAAmB;IAQzB,oBAAoB;IAMpB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CAyChB"}