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

package/dist/components/navigatie sidenav/web-component/index.stencil.js

@@ -0,0 +1,35 @@
+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';
+import clsx from 'clsx';
+let Sidenav = class Sidenav {
+    render() {
+        const items = JSON.parse(this.json);
+        return (h("nav", { class: "utrecht-sidenav" },
+            h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') },
+                h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href },
+                    h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }),
+                    h("div", { class: clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index + 1 === array.length && 'utrecht-sidenav__connection--last') }),
+                    title),
+                children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" },
+                    h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href },
+                        h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }),
+                        title)))))) : (''),
+                h("div", { class: "utrecht-sidenav__item-separator" })))))));
+    }
+};
+__decorate([
+    Prop()
+], Sidenav.prototype, "json", void 0);
+Sidenav = __decorate([
+    Component({
+        tag: 'utrecht-sidenav',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Sidenav);
+export { Sidenav };

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

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export declare class Page {
+    render(): any;
+}

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

@@ -0,0 +1,26 @@
+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';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+let Page = class Page {
+    render() {
+        return (h("div", { class: "utrecht-page" },
+            h("div", { class: "utrecht-page__content" },
+                h("slot", null))));
+    }
+};
+Page = __decorate([
+    Component({
+        tag: 'utrecht-page',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Page);
+export { Page };

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

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export declare class Page {
+    render(): any;
+}

package/dist/components/page-content/web-component/index.stencil.js

@@ -0,0 +1,26 @@
+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';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+let Page = class Page {
+    render() {
+        return (h("div", { class: "utrecht-page-content" },
+            h("main", { class: "utrecht-page-content__main" },
+                h("slot", null))));
+    }
+};
+Page = __decorate([
+    Component({
+        tag: 'utrecht-page-content',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Page);
+export { Page };

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

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export declare class PageFooter {
+    render(): any;
+}

package/dist/components/page-footer/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;
+};
+import { Component, h } from '@stencil/core';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+let PageFooter = class PageFooter {
+    render() {
+        return (h("footer", { class: "utrecht-page-footer" },
+            h("slot", null)));
+    }
+};
+PageFooter = __decorate([
+    Component({
+        tag: 'utrecht-page-footer',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], PageFooter);
+export { PageFooter };

package/dist/components/page-header/web-component/stencil.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+export declare class PageHeader {
+    render(): any;
+}

package/dist/components/page-header/web-component/stencil.js

@@ -0,0 +1,26 @@
+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';
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+let PageHeader = class PageHeader {
+    render() {
+        return (h("header", { class: "utrecht-page-header" },
+            h("div", { class: "utrecht-page-header__content" },
+                h("slot", null))));
+    }
+};
+PageHeader = __decorate([
+    Component({
+        tag: 'utrecht-page-header',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], PageHeader);
+export { PageHeader };

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

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+export declare class Pagination {
+    links: string;
+    next: string;
+    prev: string;
+    currentIndex: number;
+    render(): any;
+}

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

@@ -0,0 +1,58 @@
+/**
+ * @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, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+let Pagination = class Pagination {
+    render() {
+        const { currentIndex } = this;
+        const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;
+        const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;
+        const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;
+        const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) => disabled ? (h("span", { class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), "aria-label": title || null }, textContent)) : (h("a", { href: href, class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), rel: rel, "aria-label": title || null }, textContent));
+        const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (h("a", { class: clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
+        return (h("nav", { class: "utrecht-pagination" },
+            h("span", { class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''),
+            h("span", { role: "group", class: "utrecht-pagination__pages" }, links
+                .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+                .map((link, arrayIndex) => {
+                const index = typeof link.index === 'number' ? link.index : arrayIndex;
+                return Object.assign({ index, current: typeof currentIndex === 'number' && index === currentIndex, rel: typeof currentIndex === 'number'
+                        ? index === currentIndex + 1
+                            ? 'next'
+                            : index === currentIndex - 1
+                                ? 'prev'
+                                : null
+                        : null, textContent: link.index || index }, link);
+            })
+                .map((link) => PageLink(link))),
+            h("span", { class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
+    }
+};
+__decorate([
+    Prop()
+], Pagination.prototype, "links", void 0);
+__decorate([
+    Prop()
+], Pagination.prototype, "next", void 0);
+__decorate([
+    Prop()
+], Pagination.prototype, "prev", void 0);
+__decorate([
+    Prop({ attribute: 'current-index' })
+], Pagination.prototype, "currentIndex", void 0);
+Pagination = __decorate([
+    Component({
+        tag: 'utrecht-pagination',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Pagination);
+export { Pagination };

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

@@ -0,0 +1,7 @@
+export declare class Paragraph {
+    /**
+     * Lead paragraph
+     */
+    lead: boolean;
+    render(): any;
+}

package/dist/{paragraph/stencil.js → components/paragraph/web-component/index.stencil.js}

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, Prop, h } from "@stencil/core";
-import clsx from "clsx";
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
 let Paragraph = class Paragraph {
     render() {
-        return (h("div", { class: clsx("utrecht-paragraph", this.lead && "utrecht-paragraph--lead") },
+        return (h("div", { class: clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') },
             h("slot", null)));
     }
 };
@@ -17,8 +17,8 @@ __decorate([
 ], Paragraph.prototype, "lead", void 0);
 Paragraph = __decorate([
     Component({
-        tag: "utrecht-paragraph",
-        styleUrl: "bem.css",
+        tag: 'utrecht-paragraph',
+        styleUrl: 'index.scss',
         shadow: true,
     })
 ], Paragraph);

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

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

package/dist/{separator/stencil.js → components/separator/web-component/index.stencil.js}

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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";
+import { Component, h } from '@stencil/core';
 let Separator = class Separator {
     render() {
         return h("hr", { class: "utrecht-separator" });
@@ -12,8 +12,8 @@ let Separator = class Separator {
 };
 Separator = __decorate([
     Component({
-        tag: "utrecht-separator",
-        styleUrl: "bem.css",
+        tag: 'utrecht-separator',
+        styleUrl: 'index.scss',
         shadow: true,
     })
 ], Separator);

package/dist/components/table/web-component/table-body.stencil.d.ts

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

package/dist/components/table/web-component/table-body.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, Host } from '@stencil/core';
+let TableBody = class TableBody {
+    render() {
+        return (h(Host, { role: "rowgroup" },
+            h("slot", null)));
+    }
+};
+TableBody = __decorate([
+    Component({
+        tag: 'utrecht-table-body',
+        styleUrl: 'table-body.scss',
+        shadow: true,
+    })
+], TableBody);
+export { TableBody };

package/dist/components/table/web-component/table-caption.stencil.d.ts

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

package/dist/components/table/web-component/table-caption.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 TableCaption = class TableCaption {
+    render() {
+        // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
+        return h("slot", null);
+    }
+};
+TableCaption = __decorate([
+    Component({
+        tag: 'utrecht-table-caption',
+        styleUrl: 'table-caption.scss',
+        shadow: true,
+    })
+], TableCaption);
+export { TableCaption };

package/dist/components/table/web-component/table-cell.stencil.d.ts

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

package/dist/components/table/web-component/table-cell.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, Host } from '@stencil/core';
+let TableCell = class TableCell {
+    render() {
+        return (h(Host, { role: "cell" },
+            h("slot", null)));
+    }
+};
+TableCell = __decorate([
+    Component({
+        tag: 'utrecht-table-cell',
+        styleUrl: 'table-cell.scss',
+        shadow: true,
+    })
+], TableCell);
+export { TableCell };

package/dist/components/table/web-component/table-footer.stencil.d.ts

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

package/dist/components/table/web-component/table-footer.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, Host } from '@stencil/core';
+let TableFooter = class TableFooter {
+    render() {
+        return (h(Host, { role: "rowgroup" },
+            h("slot", null)));
+    }
+};
+TableFooter = __decorate([
+    Component({
+        tag: 'utrecht-table-footer',
+        styleUrl: 'table-footer.scss',
+        shadow: true,
+    })
+], TableFooter);
+export { TableFooter };

package/dist/components/table/web-component/table-header-cell.stencil.d.ts

@@ -0,0 +1,4 @@
+export declare class TableHeaderCell {
+    scope: 'col' | 'row';
+    render(): any;
+}

package/dist/{button/stencil.js → components/table/web-component/table-header-cell.stencil.js}

@@ -4,22 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, Prop, h } from "@stencil/core";
-import clsx from "clsx";
-let Button = class Button {
+import { Component, h, Host, Prop } from '@stencil/core';
+let TableHeaderCell = class TableHeaderCell {
     render() {
-        return (h("button", { class: clsx("utrecht-button", this.disabled && "utrecht-button--disabled"), disabled: this.disabled },
+        return (h(Host, { role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' },
             h("slot", null)));
     }
 };
 __decorate([
     Prop()
-], Button.prototype, "disabled", void 0);
-Button = __decorate([
+], TableHeaderCell.prototype, "scope", void 0);
+TableHeaderCell = __decorate([
     Component({
-        tag: "utrecht-button",
-        styleUrl: "bem.scss",
+        tag: 'utrecht-table-header-cell',
+        styleUrl: 'table-header-cell.scss',
         shadow: true,
     })
-], Button);
-export { Button };
+], TableHeaderCell);
+export { TableHeaderCell };

package/dist/components/table/web-component/table-header.stencil.d.ts

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

package/dist/components/table/web-component/table-header.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, Host } from '@stencil/core';
+let TableHeader = class TableHeader {
+    render() {
+        return (h(Host, { role: "rowgroup" },
+            h("slot", null)));
+    }
+};
+TableHeader = __decorate([
+    Component({
+        tag: 'utrecht-table-header',
+        styleUrl: 'table-header.scss',
+        shadow: true,
+    })
+], TableHeader);
+export { TableHeader };

package/dist/components/table/web-component/table-row.stencil.d.ts

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

package/dist/components/table/web-component/table-row.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, Host } from '@stencil/core';
+let TableRow = class TableRow {
+    render() {
+        return (h(Host, { role: "row" },
+            h("slot", null)));
+    }
+};
+TableRow = __decorate([
+    Component({
+        tag: 'utrecht-table-row',
+        styleUrl: 'table-row.scss',
+        shadow: true,
+    })
+], TableRow);
+export { TableRow };

package/dist/components/table/web-component/table.stencil.d.ts

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

package/dist/components/table/web-component/table.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, Host } from '@stencil/core';
+let Table = class Table {
+    render() {
+        return (h(Host, { role: "table" },
+            h("slot", null)));
+    }
+};
+Table = __decorate([
+    Component({
+        tag: 'utrecht-table',
+        styleUrl: 'table.scss',
+        shadow: true,
+    })
+], Table);
+export { Table };

package/dist/components/templates/contact-card-template/web-component/index.stencil.d.ts

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

package/dist/components/templates/contact-card-template/web-component/index.stencil.js

@@ -0,0 +1,31 @@
+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 ContactCardTemplate = class ContactCardTemplate {
+    render() {
+        return (h("div", { class: "utrecht-contact-card" },
+            h("utrecht-heading-2", null, "Hulp en contact"),
+            h("div", { class: "utrecht-contact-card__content" },
+                h("div", { class: "utrecht-contact-card__section" },
+                    h("utrecht-heading-3", null, "Telefoon"),
+                    h("utrecht-paragraph", { class: "utrecht-contact-card__telephone" },
+                        h("a", { href: "tel:14-030", class: "utrecht-link utrecht-link--telephone", title: "Telefoonnummer van gemeente Utrecht" }, "14 030")),
+                    h("utrecht-paragraph", null, "Maandag t/m vrijdag 8.30 \u2013 17.30 uur")),
+                h("div", { class: "utrecht-contact-card__section" },
+                    h("utrecht-heading-3", null, "E-mail"),
+                    h("utrecht-paragraph", null,
+                        h("a", { class: "utrecht-link", href: "https://www.utrecht.nl/reactieformulier", title: "Algemeen reactieformulier van de gemeente Utrecht" }, "reactieformulier"))))));
+    }
+};
+ContactCardTemplate = __decorate([
+    Component({
+        tag: 'utrecht-contact-card-template',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], ContactCardTemplate);
+export { ContactCardTemplate };

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

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from '@stencil/core';
+export declare class Textbox {
+    autoComplete: string;
+    disabled: boolean;
+    invalid: boolean;
+    min: string;
+    max: string;
+    pattern: string;
+    placeholder: string;
+    readOnly: boolean;
+    required: boolean;
+    type: string;
+    value: string;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}