@utrecht/web-component-library-stencil 1.0.0-alpha.99 → 1.0.0

package/dist/collection/components/html-content.js

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { h } from "@stencil/core";
+export class HTMLContent {
+  render() {
+    return (h("div", { class: "utrecht-html" }, h("slot", null)));
+  }
+  static get is() { return "utrecht-html-content"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["html-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["html-content.css"]
+    };
+  }
+}
+//# sourceMappingURL=html-content.js.map

package/dist/collection/components/html-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-content.js","sourceRoot":"","sources":["../../../src/components/html-content.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,WAAW;EACtB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,cAAc;MACvB,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-html-content',\n  styleUrl: 'html-content.scss',\n  shadow: false,\n})\nexport class HTMLContent {\n  render() {\n    return (\n      <div class=\"utrecht-html\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/iban-data.css

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-iban-data {
+  /* lining-nums: avoid "oldstyle-nums" where some numbers have descenders */
+  /* slashed-zero: avoid confusion between LATIN LETTER O (U+004F) and DIGIT ZERO (U+0030) */
+  /* tabular-nums: vertically align IBAN values */
+  font-variant-numeric: lining-nums slashed-zero tabular-nums;
+  white-space: nowrap;
+}
+
+:host {
+  display: inline;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/components/iban-data.js

@@ -0,0 +1,58 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+import { h } from "@stencil/core";
+const normalizeIBAN = (iban) => iban
+  // Remove whitespace and word separator characters such as the dash
+  .replace(/[\s+\W]+/g, '')
+  .toUpperCase();
+const formatIBAN = (normalizedIBAN) => normalizedIBAN
+  // Add a space after every four characters, except at the end
+  .replace(/(.{4})(?!$)/g, '$1 ');
+export class IBANData {
+  constructor() {
+    this.value = undefined;
+  }
+  render() {
+    const { value } = this;
+    const normalized = normalizeIBAN(value);
+    const formatted = formatIBAN(normalized);
+    return (h("data", { class: "utrecht-iban-data", value: normalized, translate: "no" }, formatted));
+  }
+  static get is() { return "utrecht-iban-data"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["iban-data.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["iban-data.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=iban-data.js.map

package/dist/collection/components/iban-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iban-data.js","sourceRoot":"","sources":["../../../src/components/iban-data.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAC7C,IAAI;EACF,mEAAmE;GAClE,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;GACxB,WAAW,EAAE,CAAC;AAEnB,MAAM,UAAU,GAAG,CAAC,cAAsB,EAAU,EAAE,CACpD,cAAc;EACZ,6DAA6D;GAC5D,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;AAOpC,MAAM,OAAO,QAAQ;;;;EAEnB,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEzC,OAAO,CACL,YAAM,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAC,IAAI,IAC9D,SAAS,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\nconst normalizeIBAN = (iban: string): string =>\n  iban\n    // Remove whitespace and word separator characters such as the dash\n    .replace(/[\\s+\\W]+/g, '')\n    .toUpperCase();\n\nconst formatIBAN = (normalizedIBAN: string): string =>\n  normalizedIBAN\n    // Add a space after every four characters, except at the end\n    .replace(/(.{4})(?!$)/g, '$1 ');\n\n@Component({\n  tag: 'utrecht-iban-data',\n  styleUrl: 'iban-data.scss',\n  shadow: true,\n})\nexport class IBANData {\n  @Prop() value: string;\n  render() {\n    const { value } = this;\n    const normalized = normalizeIBAN(value);\n    const formatted = formatIBAN(normalized);\n\n    return (\n      <data class=\"utrecht-iban-data\" value={normalized} translate=\"no\">\n        {formatted}\n      </data>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon/generated.css

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+:host {
+  block-size: var(--utrecht-icon-size);
+  color: var(--utrecht-icon-color);
+  display: inline-block;
+  font-size: var(--utrecht-icon-size);
+  inline-size: var(--utrecht-icon-size);
+  inset-block-start: var(--utrecht-icon-inset-block-start, 0);
+  position: relative;
+}
+
+svg {
+  /*
+   * Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
+   * For example:
+   * 
+   *   <svg width="128px" height="128px">
+   */
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: 100%;
+  /* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
+  pointer-events: none;
+  /* stylelint-disable-next-line property-disallowed-list */
+  width: 100%;
+}

package/dist/collection/components/icon.css

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+:host {
+  block-size: var(--utrecht-icon-size);
+  color: var(--utrecht-icon-color);
+  display: inline-block;
+  font-size: var(--utrecht-icon-size);
+  inline-size: var(--utrecht-icon-size);
+  inset-block-start: var(--utrecht-icon-inset-block-start, 0);
+  position: relative;
+}
+
+::slotted(svg) {
+  /*
+   * Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
+   * For example:
+   * 
+   *   <svg width="128px" height="128px">
+   */
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: 100%;
+  /* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
+  pointer-events: none;
+  /* stylelint-disable-next-line property-disallowed-list */
+  width: 100%;
+}

package/dist/collection/components/icon.js

@@ -0,0 +1,19 @@
+import { h, Host } from "@stencil/core";
+export class Icon {
+  render() {
+    return (h(Host, { "aria-hidden": "true" }, h("slot", null)));
+  }
+  static get is() { return "utrecht-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon.css"]
+    };
+  }
+}
+//# sourceMappingURL=icon.js.map

package/dist/collection/components/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;EACf,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,mBAAa,MAAM;MACtB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon',\n  styleUrl: './icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  render() {\n    return (\n      <Host aria-hidden=\"true\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,216 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/*
+
+# CSS implementation
+
+## `text-decoration-skip`
+
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
+
+However, the combination of a greater thickness and skipping this thick underline
+leads to a very unappealing rendering of the underline. To avoid this,
+`text-decoration-skip` is disabled for interactive states.
+
+For design token configurations that have identical thickness for normal and interactive
+states, this will lead to the (undesirable) effect that the focus/hover effect is switching
+from an interrupted to an uninterrupted underline (for some texts).
+
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
+
+---
+
+Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
+that moving the pointer away from a link or having focus elsewhere first is simple enough to
+not make this too inconvenient.
+
+---
+
+Some folks implement the underline of links using `border-bottom` or even using a finely crafted
+`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
+would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
+
+## `text-decoration-thickness`
+
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
+
+---
+
+`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
+In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
+the underline offset also seems to increase along with the thickness, which effectively means
+the underline is closer to the next line than in Safari.
+
+---
+
+It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
+use the `max()` function to ensure the underline remains visible for every font size.
+
+## `transition`
+
+`text-decoration-thickness` could be a candidate for animating between interactive states,
+however browsers don't seem to have implemented great looking supixel tweening yet.
+
+`text-decoration-skip` also makes the transition more challenging to implement.
+
+*/
+/**
+ * Simulate forced-colors mode.
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
+ * 
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link-button {
+  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
+  color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
+  /* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
+   * Do not underline `<a name="">Anchor</a>`.
+   */
+  --_utrecht-link-forced-colors-color: linktext;
+  text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
+  text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip-ink: all;
+  text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+  text-underline-offset: var(--utrecht-link-text-underline-offset);
+  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
+  font-weight: var(--utrecht-button-font-weight);
+  gap: var(--utrecht-button-icon-gap);
+  inline-size: var(--utrecht-button-inline-size, auto);
+  justify-content: center;
+  line-height: inherit;
+  min-block-size: var(--utrecht-button-min-block-size, 44px);
+  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
+  padding-block-end: var(--utrecht-button-padding-block-end);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover {
+  --_utrecht-link-forced-colors-color: linktext;
+  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+}
+
+.utrecht-link-button--disabled {
+  --_utrecht-link-forced-colors-color: GrayText;
+  --_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
+  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+  font-weight: var(--utrecht-link-placeholder-font-weight);
+  text-decoration-line: none;
+}
+
+.utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+}
+
+.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
+  /*
+   * WCAG SC 2.4.12: Focus Not Obscured
+   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
+   */
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: var(--utrecht-stack-focus-z-index, 1);
+}
+
+.utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
+}
+
+.utrecht-link-button--inline {
+  --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
+  min-block-size: auto;
+  min-inline-size: auto;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-link-button--pressed {
+  /* Copy `active` styles for now.
+  Later we can decide to:
+  - merge `active` and `pressed` and name the state `pressed`, or:
+  - merge `active` and `pressed` and name the state `active`, or:
+  - style `pressed` like the link state `current`, or:
+  - add `pressed` design tokens
+  */
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
+}
+
+.utrecht-link-button--html-button {
+  background-color: transparent;
+  /* reset <button> styling */
+  border-width: 0;
+}
+:host {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

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

@@ -0,0 +1,103 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+import { h } from "@stencil/core";
+import clsx from "clsx";
+export class LinkButton {
+  constructor() {
+    this.disabled = undefined;
+    this.type = undefined;
+    this.inline = undefined;
+    this.pressed = undefined;
+  }
+  render() {
+    return (h("button", { class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button' }, h("slot", null)));
+  }
+  static get is() { return "utrecht-link-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["link-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["link-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
+      },
+      "pressed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pressed",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=link-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,UAAU;;;;;;;EAKrB,MAAM;IACJ,OAAO,CACL,cACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,kCAAkC,EAClC,IAAI,CAAC,QAAQ,IAAI,+BAA+B,EAChD,IAAI,CAAC,MAAM,IAAI,6BAA6B,EAC5C,IAAI,CAAC,OAAO,IAAI,8BAA8B,CAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC1E,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ;MAE3B,eAAa,CACN,CACV,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  @Prop() disabled: boolean;\n  @Prop() type: string;\n  @Prop() inline: boolean;\n  @Prop() pressed: boolean;\n  render() {\n    return (\n      <button\n        class={clsx(\n          'utrecht-link-button',\n          'utrecht-link-button--html-button',\n          this.disabled && 'utrecht-link-button--disabled',\n          this.inline && 'utrecht-link-button--inline',\n          this.pressed && 'utrecht-link-button--pressed',\n        )}\n        disabled={this.disabled}\n        aria-pressed={typeof this.pressed === 'boolean' ? this.pressed : undefined}\n        type={this.type || 'button'}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}