@oslokommune/punkt-elements - npm Package Compare versions

Comparing version 12.9.0 to 12.10.0

dist/index.d.ts

@@ -280,2 +280,12 @@ import { LitElement } from 'lit';
 
+export declare class PktHelptext extends PktElement {
+    constructor();
+    forId: string;
+    helptext: string;
+    helptextDropdown: string;
+    helptextDropdownButton: string;
+    isHelpTextOpen: boolean;
+    render(): TemplateResult<1>;
+}
+
 export declare class PktIcon extends PktElement {
@@ -353,3 +363,2 @@ path: string | undefined;
     useWrapper: boolean;
-    private isHelpTextOpen;
     wrapperType: StaticValue;
@@ -356,0 +365,0 @@ render(): TemplateResult<1>;

dist/pkt-index.js

@@ -1,22 +0,24 @@
-import { PktAlert as t } from "./pkt-alert.js";
+import { PktAlert as o } from "./pkt-alert.js";
 import { P as p } from "./index-BkXggpNp.js";
-import { PktCard as P } from "./pkt-card.js";
-import { PktComponent as x } from "./pkt-component-template.js";
+import { PktCard as k } from "./pkt-card.js";
+import { PktComponent as m } from "./pkt-component-template.js";
 import { PktDatepicker as a } from "./pkt-datepicker.js";
-import { P as s } from "./index-B-KXmo65.js";
-import { PktInputWrapper as c } from "./pkt-input-wrapper.js";
-import { PktLink as g } from "./pkt-link.js";
-import { PktMessagebox as l } from "./pkt-messagebox.js";
-import { PktTag as b } from "./pkt-tag.js";
+import { P as s } from "./helptext-BHjN4gSm.js";
+import { P as C } from "./index-B-KXmo65.js";
+import { PktInputWrapper as d } from "./pkt-input-wrapper.js";
+import { PktLink as i } from "./pkt-link.js";
+import { PktMessagebox as b } from "./pkt-messagebox.js";
+import { PktTag as A } from "./pkt-tag.js";
 export {
-  t as PktAlert,
+  o as PktAlert,
   p as PktCalendar,
-  P as PktCard,
-  x as PktComponent,
+  k as PktCard,
+  m as PktComponent,
   a as PktDatepicker,
-  s as PktIcon,
-  c as PktInputWrapper,
-  g as PktLink,
-  l as PktMessagebox,
-  b as PktTag
+  s as PktHelptext,
+  C as PktIcon,
+  d as PktInputWrapper,
+  i as PktLink,
+  b as PktMessagebox,
+  A as PktTag
 };

dist/pkt-input-wrapper.js

@@ -1,6 +0,7 @@
-import { P as w, v as T, E as o, x as i, n as r } from "./index-CF6_-ZoF.js";
-import { e as _, P as D, n as I } from "./ref-CY86ZeRJ.js";
-import { o as f } from "./index-B-KXmo65.js";
+import { P as w, v as m, E as h, x as p, n as r } from "./index-CF6_-ZoF.js";
+import { e as v, P as k, n as _ } from "./ref-CY86ZeRJ.js";
+import { o as T } from "./index-B-KXmo65.js";
 import { e as c } from "./class-map-luGhSuLj.js";
-import { t as E } from "./directive-Cxhakbpr.js";
+import { t as D } from "./directive-Cxhakbpr.js";
+import { s as o } from "./helptext-BHjN4gSm.js";
 /**
@@ -11,137 +12,18 @@ * @license
  */
-const S = Symbol.for(""), y = (h, ...d) => ({ _$litStatic$: d.reduce((l, u, p) => l + ((n) => {
-  if (n._$litStatic$ !== void 0) return n._$litStatic$;
-  throw Error(`Value passed to 'literal' function must be a 'literal' result: ${n}. Use 'unsafeStatic' to pass non-literal values, but
+const S = Symbol.for(""), y = (u, ...a) => ({ _$litStatic$: a.reduce((n, l, s) => n + ((i) => {
+  if (i._$litStatic$ !== void 0) return i._$litStatic$;
+  throw Error(`Value passed to 'literal' function must be a 'literal' result: ${i}. Use 'unsafeStatic' to pass non-literal values, but
             take care to ensure page security.`);
-})(u) + h[p + 1], h[0]), r: S }), B = "pkt-inputwrapper", H = {
-  toggleHelpText: {
-    description: "Event for å vise eller skjule hjelpetekst i dropdown"
-  }
-}, M = {
-  forId: {
-    name: "For ID",
-    description: "Id-en til inputfeltet som dette wrapper rundt",
-    type: "string",
-    required: !0
-  },
-  label: {
-    name: "Merkelapp",
-    description: "Merkelapp for inputfeltet",
-    type: "boolean",
-    required: !0,
-    default: "input"
-  },
-  helptext: {
-    name: "Hjelpetekst",
-    description: "Hjelpetekst for inputfeltet",
-    type: "string"
-  },
-  helptextDropdown: {
-    name: "Hjelpetekst i dropdown",
-    description: "Hjelpetekst som vises i ekspanderende felt",
-    type: "string"
-  },
-  helptextDropdownButton: {
-    name: "Tekst i hjelpetekst-knapp",
-    description: "Tekst som vises i knappen for å vise hjelpetekst i dropdown",
-    default: "Les mer <span class='pkt-sr-only'>om inputfeltet</span>",
-    type: "string"
-  },
-  counter: {
-    name: "Teller",
-    description: "Teller for antall tegn i inputfeltet",
-    type: "boolean",
-    default: !1
-  },
-  counterCurrent: {
-    name: "Tellerverdi",
-    description: "Tellerens nåværende verdi",
-    type: "number"
-  },
-  counterMaxLength: {
-    name: "Maks tegn",
-    description: "Maks antall tegn som kan skrives i inputfeltet",
-    type: "number"
-  },
-  optionalTag: {
-    name: "Vise valgfritt-merking",
-    description: "Viser en merking som indikerer at feltet er valgfritt",
-    type: "boolean",
-    default: !1
-  },
-  optionalText: {
-    name: "Valgfritt-tekst",
-    description: "Tekst som vises i valgfritt-merkingen",
-    type: "string",
-    default: "Valgfritt"
-  },
-  requiredTag: {
-    name: "Vise påkrevd-merking",
-    description: "Viser en merking som indikerer at feltet er påkrevd",
-    type: "boolean",
-    default: !1
-  },
-  requiredText: {
-    name: "Påkrevd-tekst",
-    description: "Tekst som vises i påkrevd-merkingen",
-    type: "string",
-    default: "Må fylles ut"
-  },
-  hasError: {
-    name: "Feil",
-    description: "Indikerer at inputfeltet har en feil",
-    type: "boolean",
-    default: !1
-  },
-  errorMessage: {
-    name: "Feilmelding",
-    description: "Feilmelding som vises i tilknytning til inputfeltet",
-    type: "string"
-  },
-  disabled: {
-    name: "Deaktivert",
-    description: "Indikerer at inputfeltet er deaktivert",
-    type: "boolean",
-    default: !1
-  },
-  inline: {
-    name: "Inline",
-    description: "Indikerer at inputfeltet skal flyte sammen med sidens innhold",
-    type: "boolean",
-    default: !1
-  },
-  ariaDescribedby: {
-    name: "aria-describedby",
-    description: "Id-en til elementet som beskriver inputfeltet",
-    type: "string"
-  },
-  hasFieldset: {
-    name: "Har fieldset",
-    description: "Indikerer at inputfeltet er en del av et fieldset",
-    type: "boolean",
-    default: !1
-  },
-  useWrapper: {
-    name: "Bruk wrapper",
-    description: "Indikerer om inputfeltet skal bruke en wrapper",
-    type: "boolean",
-    default: !0
-  }
-}, s = {
-  name: B,
-  "css-class": "pkt-inputwrapper",
-  events: H,
-  props: M
+})(l) + u[s + 1], u[0]), r: S });
+var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (u, a, n, l) => {
+  for (var s = l > 1 ? void 0 : l ? E(a, n) : a, i = u.length - 1, d; i >= 0; i--)
+    (d = u[i]) && (s = (l ? d(a, n, s) : d(s)) || s);
+  return l && s && B(a, n, s), s;
 };
-var q = Object.defineProperty, F = Object.getOwnPropertyDescriptor, t = (h, d, l, u) => {
-  for (var p = u > 1 ? void 0 : u ? F(d, l) : d, n = h.length - 1, a; n >= 0; n--)
-    (a = h[n]) && (p = (u ? a(d, l, p) : a(p)) || p);
-  return u && p && q(d, l, p), p;
-};
-let e = class extends w {
+let t = class extends w {
   constructor() {
-    super(), this.defaultSlot = _(), this.forId = T(), this.label = s.props.label.default, this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = s.props.helptextDropdownButton.default, this.counter = s.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.optionalTag = s.props.optionalTag.default, this.optionalText = s.props.optionalText.default, this.requiredTag = s.props.requiredTag.default, this.requiredText = s.props.requiredText.default, this.hasError = s.props.hasError.default, this.errorMessage = "", this.disabled = s.props.disabled.default, this.inline = s.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = s.props.hasFieldset.default, this.useWrapper = s.props.useWrapper.default, this.isHelpTextOpen = !1, this.wrapperType = this.useWrapper ? y`fieldset` : this.hasDropdown ? y`div` : y`label`, this.slotController = new D(this, this.defaultSlot);
+    super(), this.defaultSlot = v(), this.forId = m(), this.label = o.props.label.default, this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = o.props.helptextDropdownButton.default, this.counter = o.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.optionalTag = o.props.optionalTag.default, this.optionalText = o.props.optionalText.default, this.requiredTag = o.props.requiredTag.default, this.requiredText = o.props.requiredText.default, this.hasError = o.props.hasError.default, this.errorMessage = "", this.disabled = o.props.disabled.default, this.inline = o.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = o.props.hasFieldset.default, this.useWrapper = o.props.useWrapper.default, this.wrapperType = this.useWrapper ? y`fieldset` : this.hasDropdown ? y`div` : y`label`, this.slotController = new k(this, this.defaultSlot);
   }
   render() {
-    const h = {
+    const u = {
       "pkt-inputwrapper": !0,
@@ -151,3 +33,3 @@ "pkt-inputwrapper--error": this.hasError,
       "pkt-inputwrapper--inline": this.inline
-    }, d = {
+    }, a = {
       "pkt-tag": !0,
@@ -158,51 +40,23 @@ "pkt-tag--small": !0,
       "pkt-tag--beige": !this.optionalTag && this.requiredTag
-    }, l = this.helptextDropdown !== "", u = () => {
-      this.dispatchEvent(
-        new CustomEvent("toggleHelpText", {
-          bubbles: !0,
-          detail: { isOpen: !this.isHelpTextOpen }
-        })
-      ), this.isHelpTextOpen = !this.isHelpTextOpen;
-    }, p = {
-      "pkt-inputwrapper__helptext": !0,
-      "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
-      "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
-    }, n = {
+    }, n = this.helptextDropdown !== "", l = {
       "pkt-inputwrapper__label": !0,
       "pkt-inputwrapper__fieldset": this.hasFieldset,
       "pkt-inputwrapper__legend": this.hasFieldset
-    }, a = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : o, k = () => this.optionalTag || this.requiredTag ? i`<span class=${c(d)}
-          >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : o}</span
-        >` : o, g = () => this.useWrapper ? this.hasFieldset ? i`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
-            ${this.label} ${k()}
-          </legend>` : l ? i`<h2>${this.label} ${k()}</h2>` : i`<span>${this.label} ${k()}</span>` : i`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${a}"
+    }, s = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : h, i = () => this.optionalTag || this.requiredTag ? p`<span class=${c(a)}
+          >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : h}</span
+        >` : h, d = () => this.useWrapper ? this.hasFieldset ? p`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
+            ${this.label} ${i()}
+          </legend>` : n ? p`<h2>${this.label} ${i()}</h2>` : p`<span>${this.label} ${i()}</span>` : p`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${s}"
           >${this.label}</label
-        >`, m = () => this.useWrapper && this.helptext ? i`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-            ${f(this.helptext)}
-          </div>
-          ${l ? i`<div class="pkt-inputwrapper__helptext-expandable">
-                  <button
-                    class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
-                    type="button"
-                    @click=${u}
-                  >
-                    <pkt-icon
-                      class="pkt-btn__icon"
-                      name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
-                    ></pkt-icon>
-                    <span class="pkt-btn__text">${f(this.helptextDropdownButton)}</span>
-                  </button>
-                  <div class="${c(p)}">
-                    ${f(this.helptextDropdown)}
-                  </div>
-                  ${this.hasFieldset ? o : i`<label
-                        class="pkt-sr-only"
-                        for="${this.forId}"
-                        aria-describedby="${a}"
-                        >${this.label}</label
-                      >`}
-                </div>` : o}</div>` : o, v = () => this.counter ? i`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
+        >`, $ = () => this.useWrapper && (this.helptext || this.helptextDropdown) ? p`
+          <pkt-helptext
+            .forId=${this.forId}
+            .helptext=${this.helptext}
+            .helptextDropdown=${this.helptextDropdown}
+            .helptextDropdownButton=${this.helptextDropdownButton}
+          ></pkt-helptext>
+        ` : h, b = () => this.counter ? p`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
           ${this.counterCurrent || 0}
-          ${this.counterMaxLength ? `/${this.counterMaxLength}` : o}
-        </div>` : o, x = () => this.hasError && this.errorMessage ? i`<div
+          ${this.counterMaxLength ? `/${this.counterMaxLength}` : h}
+        </div>` : h, g = () => this.hasError && this.errorMessage ? p`<div
           class="pkt-alert pkt-alert--error pkt-alert--compact"
@@ -212,86 +66,83 @@ aria-live="assertive"
           <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
-          <div class="pkt-alert__text">${f(this.errorMessage)}</div>
-        </div>` : o, b = () => i`
-        ${g()} ${m()}
-        <div class="pkt-contents" ${I(this.defaultSlot)}></div>
-        ${v()} ${x()}
-      `, $ = () => this.hasFieldset ? i`<fieldset class=${c(n)} aria-describedby="${a}">
-            ${b()}
-          </fieldset>` : l ? i`<div class=${c(n)} aria-describedby="${a}">
-              ${b()}
-            </div>` : i`<label
-              class=${c(n)}
+          <div class="pkt-alert__text">${T(this.errorMessage)}</div>
+        </div>` : h, f = () => p`
+        ${d()} ${$()}
+        <div class="pkt-contents" ${_(this.defaultSlot)}></div>
+        ${b()} ${g()}
+      `, x = () => this.hasFieldset ? p`<fieldset class=${c(l)} aria-describedby="${s}">
+            ${f()}
+          </fieldset>` : n ? p`<div class=${c(l)} aria-describedby="${s}">
+              ${f()}
+            </div>` : p`<label
+              class=${c(l)}
               for="${this.forId}"
-              aria-describedby="${a}"
+              aria-describedby="${s}"
             >
-              ${b()}
+              ${f()}
             </label>`;
-    return i`<div class=${c(h)}>${$()}</div> `;
+    return p`<div class=${c(u)}>${x()}</div> `;
   }
 };
-t([
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "forId", 2);
-t([
+], t.prototype, "forId", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "label", 2);
-t([
+], t.prototype, "label", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "helptext", 2);
-t([
+], t.prototype, "helptext", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "helptextDropdown", 2);
-t([
+], t.prototype, "helptextDropdown", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "helptextDropdownButton", 2);
-t([
+], t.prototype, "helptextDropdownButton", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "counter", 2);
-t([
+], t.prototype, "counter", 2);
+e([
   r({ type: Number, reflect: !0 })
-], e.prototype, "counterCurrent", 2);
-t([
+], t.prototype, "counterCurrent", 2);
+e([
   r({ type: Number, reflect: !0 })
-], e.prototype, "counterMaxLength", 2);
-t([
+], t.prototype, "counterMaxLength", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "optionalTag", 2);
-t([
+], t.prototype, "optionalTag", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "optionalText", 2);
-t([
+], t.prototype, "optionalText", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "requiredTag", 2);
-t([
+], t.prototype, "requiredTag", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "requiredText", 2);
-t([
+], t.prototype, "requiredText", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "hasError", 2);
-t([
+], t.prototype, "hasError", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "errorMessage", 2);
-t([
+], t.prototype, "errorMessage", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-t([
+], t.prototype, "disabled", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "inline", 2);
-t([
+], t.prototype, "inline", 2);
+e([
   r({ type: String, reflect: !0 })
-], e.prototype, "ariaDescribedby", 2);
-t([
+], t.prototype, "ariaDescribedby", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "hasFieldset", 2);
-t([
+], t.prototype, "hasFieldset", 2);
+e([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "useWrapper", 2);
-t([
-  r({ reflect: !1, type: Boolean })
-], e.prototype, "isHelpTextOpen", 2);
-e = t([
-  E("pkt-input-wrapper")
-], e);
+], t.prototype, "useWrapper", 2);
+t = e([
+  D("pkt-input-wrapper")
+], t);
 export {
-  e as PktInputWrapper
+  t as PktInputWrapper
 };

package.json

 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.9.0",
+  "version": "12.10.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
@@ -58,3 +58,3 @@ "homepage": "https://punkt.oslo.kommune.no",
   "license": "MIT",
-  "gitHead": "285ab0b5f51f8dd6d8b4cda6d5902e0bdc52f855"
+  "gitHead": "391d61a23bb938ee290ddf09a12fdf4c8e8ac52f"
 }

src/components/index.ts

@@ -6,2 +6,3 @@ export { PktAlert } from './alert'
 export { PktDatepicker } from './datepicker'
+export { PktHelptext } from './helptext'
 export { PktIcon } from './icon'
@@ -8,0 +9,0 @@ export { PktInputWrapper } from './input-wrapper'

src/components/input-wrapper/index.ts

@@ -12,2 +12,3 @@ import { PktElement } from '../element'
 import '../icon'
+import '../helptext'
 
@@ -83,5 +84,2 @@ @customElement('pkt-input-wrapper')
 
-  @property({ reflect: false, type: Boolean })
-  private isHelpTextOpen: boolean = false
-
   wrapperType = this.useWrapper
@@ -111,18 +109,2 @@ ? literal`fieldset`
 
-    const toggleDropdown = () => {
-      this.dispatchEvent(
-        new CustomEvent('toggleHelpText', {
-          bubbles: true,
-          detail: { isOpen: !this.isHelpTextOpen },
-        }),
-      )
-      this.isHelpTextOpen = !this.isHelpTextOpen
-    }
-
-    const helptextDropdownClasses = {
-      'pkt-inputwrapper__helptext': true,
-      'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,
-      'pkt-inputwrapper__helptext-expandable-closed': !this.isHelpTextOpen,
-    }
-
     const wrapperClasses = {
@@ -173,34 +155,11 @@ 'pkt-inputwrapper__label': true,
     const helptextElement = () => {
-      if (this.useWrapper && this.helptext) {
-        return html`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-            ${unsafeHTML(this.helptext)}
-          </div>
-          ${
-            hasDropdown
-              ? html`<div class="pkt-inputwrapper__helptext-expandable">
-                  <button
-                    class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
-                    type="button"
-                    @click=${toggleDropdown}
-                  >
-                    <pkt-icon
-                      class="pkt-btn__icon"
-                      name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
-                    ></pkt-icon>
-                    <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
-                  </button>
-                  <div class="${classMap(helptextDropdownClasses)}">
-                    ${unsafeHTML(this.helptextDropdown)}
-                  </div>
-                  ${!this.hasFieldset
-                    ? html`<label
-                        class="pkt-sr-only"
-                        for="${this.forId}"
-                        aria-describedby="${describedBy}"
-                        >${this.label}</label
-                      >`
-                    : nothing}
-                </div>`
-              : nothing
-          }</div>`
+      if (this.useWrapper && (this.helptext || this.helptextDropdown)) {
+        return html`
+          <pkt-helptext
+            .forId=${this.forId}
+            .helptext=${this.helptext}
+            .helptextDropdown=${this.helptextDropdown}
+            .helptextDropdownButton=${this.helptextDropdownButton}
+          ></pkt-helptext>
+        `
       } else {
@@ -207,0 +166,0 @@ return nothing

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

369271

increased by1.21%

Number of package files

72

increased by10.77%

Lines of code

8430

increased by1.26%

Worsened metrics

Number of low quality alerts

15

increased by7.14%

No dependency changes