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

package/dist/collection/unordered-list/css/template.js

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  distanced: false,
+  items: [],
+  nested: false,
+};
+
+export const UnorderedList = ({ distanced = false, items = [], nested = false }) =>
+  `<ul class="${clsx(
+    'utrecht-unordered-list',
+    distanced && 'utrecht-unordered-list--distanced',
+    nested && 'utrecht-unordered-list--nested',
+  )}">
+${items
+  .map(
+    ({ items: subItems, textContent }) =>
+      `  <li class="utrecht-unordered-list__item">${textContent || ''}${
+        subItems ? UnorderedList({ nested: true, items: subItems }) : ''
+      }</li>`,
+  )
+  .join('\n')}
+</ul>`;

package/dist/collection/unordered-list/html/template.js

@@ -0,0 +1,22 @@
+export const UnorderedList = () =>
+  `<section class="utrecht-html">
+  <ul>
+    <li>Lorem</li>
+    <li>Ipsum</li>
+    <li>Dolor</li>
+  </ul>
+</section>`;
+
+export const NestedUnorderedList = () =>
+  `<section class="utrecht-html">
+  <ul>
+    <li>Lorem</li>
+    <li>Ipsum
+      <ul>
+        <li>Lorem</li>
+        <li>Ipsum</li>
+      </ul>
+    </li>
+    <li>Dolor</li>
+  </ul>
+</section>`;

package/dist/collection/url/css/template.js

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const defaultArgs = {
+  link: false,
+  url: '',
+};
+
+export const URLTemplate = ({ url = '', link = false }) =>
+  link
+    ? `<a class="utrecht-link utrecht-url" href="${url}" dir="ltr">${url}</a>`
+    : `<span class="utrecht-url" dir="ltr">${url}</span>`;

package/dist/components/article/web-component/index.stencil.d.ts

@@ -0,0 +1,3 @@
+export declare class Article {
+    render(): any;
+}

package/dist/components/article/web-component/index.stencil.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h } from '@stencil/core';
+let Article = class Article {
+    render() {
+        return (h("article", { class: "utrecht-article" },
+            h("slot", null)));
+    }
+};
+Article = __decorate([
+    Component({
+        tag: 'utrecht-article',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Article);
+export { Article };

package/dist/components/backdrop/web-component/index.stencil.d.ts

@@ -0,0 +1,4 @@
+export declare class Backdrop {
+    viewport: boolean;
+    render(): any;
+}

package/dist/components/backdrop/web-component/index.stencil.js

@@ -0,0 +1,30 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+let Backdrop = class Backdrop {
+    render() {
+        const { viewport } = this;
+        return (h("div", { class: clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport') },
+            h("slot", null)));
+    }
+};
+__decorate([
+    Prop()
+], Backdrop.prototype, "viewport", void 0);
+Backdrop = __decorate([
+    Component({
+        tag: 'utrecht-backdrop',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Backdrop);
+export { Backdrop };

package/dist/components/badge-counter/web-component/index.stencil.d.ts

@@ -0,0 +1,6 @@
+export declare class BadgeCounter {
+    value: number;
+    max: number;
+    locale: string;
+    render(): any;
+}

package/dist/components/badge-counter/web-component/index.stencil.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+let BadgeCounter = class BadgeCounter {
+    render() {
+        const { locale, max, value } = this;
+        const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);
+        const formatNumber = (n) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));
+        const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';
+        return h("div", { class: "utrecht-badge-counter" }, textContent ? textContent : h("slot", null));
+    }
+};
+__decorate([
+    Prop()
+], BadgeCounter.prototype, "value", void 0);
+__decorate([
+    Prop()
+], BadgeCounter.prototype, "max", void 0);
+__decorate([
+    Prop()
+], BadgeCounter.prototype, "locale", void 0);
+BadgeCounter = __decorate([
+    Component({
+        tag: 'utrecht-badge-counter',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], BadgeCounter);
+export { BadgeCounter };

package/dist/components/badge-data/web-component/index.stencil.d.ts

@@ -0,0 +1,3 @@
+export declare class BadgeData {
+    render(): any;
+}

package/dist/components/badge-data/web-component/index.stencil.js

@@ -0,0 +1,25 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h } from '@stencil/core';
+let BadgeData = class BadgeData {
+    render() {
+        return (h("div", { class: "utrecht-badge-data" },
+            h("slot", null)));
+    }
+};
+BadgeData = __decorate([
+    Component({
+        tag: 'utrecht-badge-data',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], BadgeData);
+export { BadgeData };

package/dist/components/badge-status/web-component/index.stencil.d.ts

@@ -0,0 +1,4 @@
+export declare class BadgeStatus {
+    status: string;
+    render(): any;
+}

package/dist/components/badge-status/web-component/index.stencil.js

@@ -0,0 +1,28 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+let BadgeStatus = class BadgeStatus {
+    render() {
+        return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status || 'neutral'}` },
+            h("slot", null)));
+    }
+};
+__decorate([
+    Prop()
+], BadgeStatus.prototype, "status", void 0);
+BadgeStatus = __decorate([
+    Component({
+        tag: 'utrecht-badge-status',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], BadgeStatus);
+export { BadgeStatus };

package/dist/components/breadcrumb/web-component/index.stencil.d.ts

@@ -0,0 +1,5 @@
+export declare class Breadcrumb {
+    json: string;
+    variant: string;
+    render(): any;
+}

package/dist/components/breadcrumb/web-component/index.stencil.js

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+let Breadcrumb = class Breadcrumb {
+    render() {
+        const { json, variant } = this;
+        console.log(json);
+        const items = json ? JSON.parse(json) : [];
+        return (h("nav", { class: clsx('utrecht-breadcrumb', variant === 'arrows' && 'utrecht-breadcrumb--arrows') },
+            h("ol", { class: "utrecht-breadcrumb__list", itemscope: true, itemtype: "https://schema.org/BreadcrumbList" }, items.map(({ href, title, current }, index) => (h("li", { key: href, class: "utrecht-breadcrumb__item", itemscope: true, itemtype: "https://schema.org/ListItem", itemprop: "itemListElement" },
+                h("a", { class: clsx('utrecht-breadcrumb__link', 'utrecht-link', current && 'utrecht-link--current'), href: href, "aria-current": current ? 'location' : null, itemprop: "item" },
+                    h("span", { class: "utrecht-breadcrumb__text", itemprop: "name" }, title),
+                    h("meta", { itemprop: "position", content: index + 1 }))))))));
+    }
+};
+__decorate([
+    Prop()
+], Breadcrumb.prototype, "json", void 0);
+__decorate([
+    Prop()
+], Breadcrumb.prototype, "variant", void 0);
+Breadcrumb = __decorate([
+    Component({
+        tag: 'utrecht-breadcrumb',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Breadcrumb);
+export { Breadcrumb };

package/dist/components/button/web-component/index.stencil.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '@stencil/core';
+export declare class Button {
+    appearance: string;
+    busy: boolean;
+    disabled: boolean;
+    utrechtRequestReset: EventEmitter;
+    utrechtRequestSubmit: EventEmitter;
+    host: HTMLElement;
+    type: string;
+    render(): any;
+}

package/dist/components/button/web-component/index.stencil.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+let Button = class Button {
+    render() {
+        const handleReset = () => {
+            var _a, _b;
+            const event = this.utrechtRequestReset.emit();
+            if (!event.defaultPrevented) {
+                (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.reset();
+            }
+        };
+        const handleSubmit = () => {
+            var _a, _b;
+            const event = this.utrechtRequestSubmit.emit();
+            if (!event.defaultPrevented) {
+                (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+            }
+        };
+        const handleClick = () => {
+            if (this.type === 'reset') {
+                handleReset();
+            }
+            else if (this.type === 'submit') {
+                handleSubmit();
+            }
+        };
+        return (h("button", { class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick },
+            h("slot", null)));
+    }
+};
+__decorate([
+    Prop()
+], Button.prototype, "appearance", void 0);
+__decorate([
+    Prop()
+], Button.prototype, "busy", void 0);
+__decorate([
+    Prop()
+], Button.prototype, "disabled", void 0);
+__decorate([
+    Event({ cancelable: true })
+], Button.prototype, "utrechtRequestReset", void 0);
+__decorate([
+    Event({ cancelable: true })
+], Button.prototype, "utrechtRequestSubmit", void 0);
+__decorate([
+    Element()
+], Button.prototype, "host", void 0);
+__decorate([
+    Prop()
+], Button.prototype, "type", void 0);
+Button = __decorate([
+    Component({
+        tag: 'utrecht-button',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Button);
+export { Button };

package/dist/components/checkbox/web-component/index.stencil.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from '@stencil/core';
+export declare class Checkbox {
+    disabled: boolean;
+    readOnly: boolean;
+    checked: boolean;
+    value: string;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}

package/dist/components/checkbox/web-component/index.stencil.js

@@ -0,0 +1,59 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+let Checkbox = class Checkbox {
+    constructor() {
+        this.disabled = false;
+        this.readOnly = false;
+        this.checked = false;
+        this.value = '';
+    }
+    render() {
+        const { checked, disabled, value } = this;
+        return (h("input", { class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+                this.checked = evt.target.checked;
+                this.utrechtInput.emit(evt);
+            } }));
+    }
+};
+__decorate([
+    Prop({ reflect: true })
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    Prop({ attribute: 'readonly', reflect: true })
+], Checkbox.prototype, "readOnly", void 0);
+__decorate([
+    Prop()
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    Prop()
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    Event()
+], Checkbox.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], Checkbox.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], Checkbox.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], Checkbox.prototype, "utrechtInput", void 0);
+Checkbox = __decorate([
+    Component({
+        tag: 'utrecht-checkbox',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Checkbox);
+export { Checkbox };

package/dist/components/custom-checkbox/web-component/index.stencil.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from '@stencil/core';
+export declare class CustomCheckbox {
+    disabled: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    invalid: boolean;
+    required: boolean;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}

package/dist/components/custom-checkbox/web-component/index.stencil.js

@@ -0,0 +1,85 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+let CustomCheckbox = class CustomCheckbox {
+    constructor() {
+        this.disabled = false;
+        this.checked = false;
+        this.indeterminate = false;
+        this.invalid = false;
+        this.required = false;
+    }
+    render() {
+        const { checked, disabled, indeterminate, invalid, required } = this;
+        const active = false;
+        const toggleInteraction = () => {
+            if (!this.disabled) {
+                this.checked = !this.checked;
+                this.utrechtInput.emit(this);
+                this.utrechtChange.emit(this);
+            }
+        };
+        const handleClick = () => {
+            toggleInteraction();
+        };
+        const handleKeyPress = (evt) => {
+            if (evt.code === 'Space' || evt.key === ' ') {
+                // Do not scroll the page using Space when the toggle is focussed
+                evt.preventDefault();
+            }
+        };
+        const handleKeyUp = (evt) => {
+            if (evt.code === 'Space' || evt.key === ' ') {
+                toggleInteraction();
+            }
+        };
+        return (h("div", { class: "utrecht-custom-checkbox", role: "checkbox", tabIndex: disabled ? null : 0, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-invalid": invalid ? 'true' : null, "aria-required": required ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp },
+            h("div", { class: clsx('utrecht-custom-checkbox__box', active && 'utrecht-custom-checkbox__box--active', checked && 'utrecht-custom-checkbox__box--checked', !checked && 'utrecht-custom-checkbox__box--not-checked', disabled && 'utrecht-custom-checkbox__box--disabled', invalid && 'utrecht-custom-checkbox__box--invalid', indeterminate && 'utrecht-custom-checkbox__box--indeterminate') },
+                checked && h("utrecht-icon-checkmark", { class: "utrecht-custom-checkbox__icon" }, "\u2714"),
+                indeterminate && (h("utrecht-icon-indeterminate", { class: "utrecht-custom-checkbox__icon" }, "\u25A0")))));
+    }
+};
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "disabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "checked", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "invalid", void 0);
+__decorate([
+    Prop({ reflect: true })
+], CustomCheckbox.prototype, "required", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], CustomCheckbox.prototype, "utrechtInput", void 0);
+CustomCheckbox = __decorate([
+    Component({
+        tag: 'utrecht-custom-checkbox',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], CustomCheckbox);
+export { CustomCheckbox };

package/dist/components/digid-button/web-component/index.stencil.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+export declare class DigidButton {
+    type: string;
+    render(): any;
+}

package/dist/components/digid-button/web-component/index.stencil.js

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h, Prop } from '@stencil/core';
+let DigidButton = class DigidButton {
+    render() {
+        return (h("div", { class: "utrecht-digid-button" },
+            h("utrecht-digid-logo", { class: "utrecht-digid-button__logo" }),
+            h("utrecht-button", { appearance: "primary-action-button", class: "utrecht-digid-button__button", type: this.type || null },
+                h("slot", null))));
+    }
+};
+__decorate([
+    Prop()
+], DigidButton.prototype, "type", void 0);
+DigidButton = __decorate([
+    Component({
+        tag: 'utrecht-digid-button',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], DigidButton);
+export { DigidButton };

package/dist/components/digid-logo/web-component/index.stencil.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+export declare class DigidLogo {
+    render(): any;
+}

package/dist/components/digid-logo/web-component/index.stencil.js

@@ -0,0 +1,29 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h } from '@stencil/core';
+let DigidLogo = class DigidLogo {
+    render() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 150 150" },
+            h("title", null, "DigiD"),
+            h("path", { d: "M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z" }),
+            h("path", { d: "M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z", fill: "#FFFFFF" }),
+            h("path", { d: "M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z", fill: "#E17000" })));
+    }
+};
+DigidLogo = __decorate([
+    Component({
+        tag: 'utrecht-digid-logo',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], DigidLogo);
+export { DigidLogo };

package/dist/components/document/web-component/index.stencil.d.ts

@@ -0,0 +1,3 @@
+export declare class Document {
+    render(): any;
+}