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

package/README.md

@@ -0,0 +1,28 @@
+# Web Components
+
+If you want to use the components library, you can use custom elements in your HTML page to render the components. The npm package `@utrecht/web-component-library-stencil` contains the implementation of every web component, but each component will be loaded separately and on-demand, so including the entire component library will not slow down your application.
+
+## Getting started
+
+Include the Design Token CSS variables:
+
+```html
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/@utrecht/design-tokens/dist/index.css" />
+```
+
+Combine it with the latest Web Components (for convenience you can use the unpkg CDN), for example:
+
+```html
+<script
+  src="https://unpkg.com/@utrecht/web-component-library-stencil/dist/utrecht/utrecht.esm.js"
+  type="module"
+></script>
+```
+
+Then you can go ahead and see the result:
+
+```html
+<utrecht-html-content>
+  <h1>Page styled with NL Design System</h1>
+</utrecht-html-content>
+```

package/dist/article/stencil.d.ts

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

package/dist/article/stencil.js

@@ -14,7 +14,7 @@ let Article = class Article {
 Article = __decorate([
     Component({
         tag: "utrecht-article",
-        styleUrl: "bem.css",
+        styleUrl: "stencil.scss",
         shadow: true,
     })
 ], Article);

package/dist/badge-counter/stencil.d.ts

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

package/dist/badge-counter/stencil.js

@@ -30,7 +30,7 @@ __decorate([
 BadgeCounter = __decorate([
     Component({
         tag: "utrecht-badge-counter",
-        styleUrl: "bem.scss",
+        styleUrl: "stencil.scss",
         shadow: true,
     })
 ], BadgeCounter);

package/dist/badge-data/stencil.d.ts

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

package/dist/badge-data/stencil.js

@@ -18,7 +18,7 @@ let BadgeData = class BadgeData {
 BadgeData = __decorate([
     Component({
         tag: "utrecht-badge-data",
-        styleUrl: "bem.scss",
+        styleUrl: "stencil.scss",
         shadow: true,
     })
 ], BadgeData);

package/dist/badge-status/stencil.d.ts

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

package/dist/badge-status/stencil.js

@@ -21,7 +21,7 @@ __decorate([
 BadgeStatus = __decorate([
     Component({
         tag: "utrecht-badge-status",
-        styleUrl: "bem.scss",
+        styleUrl: "stencil.scss",
         shadow: true,
     })
 ], BadgeStatus);

package/dist/breadcrumb/stencil.d.ts

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

package/dist/breadcrumb/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, Prop, h } 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: "stencil.scss",
+        shadow: true,
+    })
+], Breadcrumb);
+export { Breadcrumb };

package/dist/button/stencil.d.ts

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

package/dist/button/stencil.js

@@ -4,21 +4,58 @@ 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 { Component, Element, Event, Prop, h } from "@stencil/core";
 import clsx from "clsx";
 let Button = class Button {
     render() {
-        return (h("button", { class: clsx("utrecht-button", this.disabled && "utrecht-button--disabled"), disabled: this.disabled },
+        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"), "aria-busy": this.busy ? "true" : null, disabled: this.disabled, type: this.type || "button", onClick: handleClick },
             h("slot", null)));
     }
 };
+__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: "bem.scss",
+        styleUrl: "stencil.scss",
         shadow: true,
     })
 ], Button);

package/dist/checkbox/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/checkbox/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, Prop, h } 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: "stencil.scss",
+        shadow: true,
+    })
+], Checkbox);
+export { Checkbox };