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

package/package.json

@@ -1,21 +1,24 @@
 {
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.400",
   "author": "Community for NL Design System",
   "description": "Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@utrecht/web-component-library-stencil",
+  "keywords": [
+    "nl-design-system"
+  ],
   "private": false,
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.cjs.js",
-  "module": "dist/custom-elements/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/custom-elements/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/yyyy/yyyy.esm.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "es2015": "./dist/cjs/utrecht.cjs.js",
+  "es2017": "./dist/cjs/utrecht.cjs.js",
+  "types": "./dist/types/components.d.ts",
+  "collection": "./dist/collection/collection-manifest.json",
+  "collection:main": "./dist/collection/collection-manifest.json",
+  "unpkg": "./dist/utrecht/utrecht.esm.js",
   "files": [
     "dist/",
     "loader/"
@@ -25,26 +28,37 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@stencil/react-output-target": "0.0.9",
-    "@stencil/sass": "1.4.1",
-    "chokidar-cli": "2.1.0",
+    "@stencil/react-output-target": "0.3.1",
+    "@stencil/sass": "1.5.2",
+    "@stencil/vue-output-target": "0.6.2",
+    "@types/jest": "29.0.0",
+    "@utrecht/components": "1.0.0-alpha.362",
+    "@utrecht/icon": "1.0.0-alpha.289",
+    "chokidar-cli": "3.0.0",
+    "clsx": "1.2.1",
     "node-sass-package-importer": "5.3.2",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2"
   },
   "dependencies": {
-    "@stencil/core": "2.6.0"
+    "@stencil/angular-output-target": "0.4.0",
+    "@stencil/core": "2.17.2"
   },
   "scripts": {
     "prebuild": "npm run clean",
     "build": "npm-run-all build:**",
     "build:stencil": "stencil build",
-    "build:typescript": "tsc",
-    "clean": "rimraf dist/",
+    "clean": "npm-run-all clean:**",
+    "clean:stencil": "rimraf dist/ loader/",
+    "clean:angular-output-target": "rimraf ../web-component-library-angular/src/directives/",
+    "clean:react-output-target": "rimraf ../web-component-library-react/src/components.ts ../web-component-library-react/src/react-component-lib/",
+    "clean:vue-output-target": "rimraf ../web-component-library-vue/src/components.ts ../web-component-library-vue/src/vue-component-lib/",
+    "lint": "npm-run-all lint:**",
+    "lint:ts": "tsc --noEmit --project tsconfig.json",
+    "lint:jest": "tsc --noEmit --project tsconfig.jest.json",
     "start": "stencil build --dev --watch --serve",
-    "watch": "npm-run-all --parallel watch:**",
-    "watch:stencil": "chokidar --follow-symlinks --initial --command 'npm run build:stencil' '../../components/**/*.(js|jsx|ts|tsx)'",
+    "watch:build": "stencil build --watch",
     "generate": "stencil generate"
   },
-  "gitHead": "901f80abf1aeef674e600d7af781ff03e500cf5b"
+  "gitHead": "0d224dcc5d0990db9f43c625acd62bc46216bfd1"
 }

package/dist/badge-counter/stencil.js

@@ -1,37 +0,0 @@
-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";
-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: "bem.scss",
-        shadow: true,
-    })
-], BadgeCounter);
-export { BadgeCounter };

package/dist/badge-data/stencil.js

@@ -1,25 +0,0 @@
-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: "bem.scss",
-        shadow: true,
-    })
-], BadgeData);
-export { BadgeData };

package/dist/badge-status/stencil.js

@@ -1,28 +0,0 @@
-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";
-let BadgeStatus = class BadgeStatus {
-    render() {
-        return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status}` },
-            h("slot", null)));
-    }
-};
-__decorate([
-    Prop()
-], BadgeStatus.prototype, "status", void 0);
-BadgeStatus = __decorate([
-    Component({
-        tag: "utrecht-badge-status",
-        styleUrl: "bem.scss",
-        shadow: true,
-    })
-], BadgeStatus);
-export { BadgeStatus };

package/dist/button/stencil.js

@@ -1,25 +0,0 @@
-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, 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 },
-            h("slot", null)));
-    }
-};
-__decorate([
-    Prop()
-], Button.prototype, "disabled", void 0);
-Button = __decorate([
-    Component({
-        tag: "utrecht-button",
-        styleUrl: "bem.scss",
-        shadow: true,
-    })
-], Button);
-export { Button };

package/dist/cjs/clsx.m-b00fa5e1.js

@@ -1,44 +0,0 @@
-'use strict';
-
-function toVal(mix) {
-	var k, y, str='';
-
-	if (typeof mix === 'string' || typeof mix === 'number') {
-		str += mix;
-	} else if (typeof mix === 'object') {
-		if (Array.isArray(mix)) {
-			for (k=0; k < mix.length; k++) {
-				if (mix[k]) {
-					if (y = toVal(mix[k])) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else {
-			for (k in mix) {
-				if (mix[k]) {
-					str && (str += ' ');
-					str += k;
-				}
-			}
-		}
-	}
-
-	return str;
-}
-
-function clsx () {
-	var i=0, tmp, x, str='';
-	while (i < arguments.length) {
-		if (tmp = arguments[i++]) {
-			if (x = toVal(tmp)) {
-				str && (str += ' ');
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-
-exports.clsx = clsx;

package/dist/cjs/utrecht-paragraph.cjs.entry.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-04d7da5a.js');
-const clsx_m = require('./clsx.m-b00fa5e1.js');
-
-const bemCss = ".utrecht-paragraph{color:var(--utrecht-document-color, inherit);font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit))}.utrecht-paragraph--lead{font-size:var(--utrecht-paragraph-lead-font-size, inherit);font-weight:var(--utrecht-paragraph-lead-font-weight, inherit);line-height:var(--utrecht-paragraph-lead-line-height, inherit)}.utrecht-paragraph--distanced{margin-block-start:var(--utrecht-paragraph-margin-block-start);margin-block-end:var(--utrecht-paragraph-margin-block-end)}";
-
-const Paragraph = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("div", { class: clsx_m.clsx("utrecht-paragraph", this.lead && "utrecht-paragraph--lead") }, index.h("slot", null)));
-  }
-};
-Paragraph.style = bemCss;
-
-exports.utrecht_paragraph = Paragraph;

package/dist/collection/button/bem.css

@@ -1,48 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-button {
-  color: var(--utrecht-button-primary-action-color);
-  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
-  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
-  background-color: var(--utrecht-button-primary-action-background-color);
-  border-radius: var(--utrecht-button-border-radius);
-  border-width: var(--utrecht-button-border-width);
-  padding-inline-start: var(--utrecht-button-padding-inline-start);
-  padding-inline-end: var(--utrecht-button-padding-inline-end);
-  padding-block-start: var(--utrecht-button-padding-block-start);
-  padding-block-end: var(--utrecht-button-padding-block-end);
-}
-
-.utrecht-button--distanced {
-  margin-inline-start: var(--utrecht-button-margin-inline-start);
-  margin-inline-end: var(--utrecht-button-margin-inline-end);
-  margin-block-start: var(--utrecht-button-margin-block-start);
-  margin-block-end: var(--utrecht-button-margin-block-end);
-}
-
-.utrecht-button:disabled,
-.utrecht-button--disabled {
-  color: var(--utrecht-button-disabled-color);
-  background-color: var(--utrecht-button-disabled-background-color);
-}
-
-.utrecht-button--focus,
-.utrecht-button:not(.utrecht-button--disabled):focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
-}
-
-.utrecht-button--hover:not(:disabled),
-.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
-  color: var(--utrecht-button-primary-action-color);
-  background-color: var(--utrecht-button-primary-action-hover-background-color);
-  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
-}

package/dist/collection/document/bem.css

@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-.utrecht-document {
-  background-color: var(--utrecht-document-background-color, inherit);
-  color: var(--utrecht-document-color, inherit);
-  font-family: var(--utrecht-document-font-family, inherit);
-  font-size: var(--utrecht-document-font-size, inherit);
-  line-height: var(--utrecht-document-line-height, inherit);
-}

package/dist/collection/heading/bem.css

@@ -1,114 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-
-.utrecht-heading-1 {
-  font-family: var(
-    --utrecht-heading-1-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
-  font-size: var(--utrecht-heading-1-font-size);
-  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
-  letter-spacing: var(--utrecht-heading-1-letter-spacing);
-  line-height: var(--utrecht-heading-1-line-height);
-  text-transform: var(--utrecht-heading-1-text-transform, inherit);
-  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-1--distanced {
-  margin-block-start: var(--utrecht-heading-1-margin-block-start);
-  margin-block-end: var(--utrecht-heading-1-margin-block-end);
-}
-
-.utrecht-heading-2 {
-  font-family: var(
-    --utrecht-heading-2-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
-  font-size: var(--utrecht-heading-2-font-size);
-  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
-  letter-spacing: var(--utrecht-heading-2-letter-spacing);
-  line-height: var(--utrecht-heading-2-line-height);
-  text-transform: var(--utrecht-heading-2-text-transform, inherit);
-  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-2--distanced {
-  margin-block-start: var(--utrecht-heading-2-margin-block-start);
-  margin-block-end: var(--utrecht-heading-2-margin-block-end);
-}
-
-.utrecht-heading-3 {
-  font-family: var(
-    --utrecht-heading-3-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
-  font-size: var(--utrecht-heading-3-font-size);
-  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
-  letter-spacing: var(--utrecht-heading-3-letter-spacing);
-  line-height: var(--utrecht-heading-3-line-height);
-  text-transform: var(--utrecht-heading-3-text-transform, inherit);
-  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-3--distanced {
-  margin-block-start: var(--utrecht-heading-3-margin-block-start);
-  margin-block-end: var(--utrecht-heading-3-margin-block-end);
-}
-
-.utrecht-heading-4 {
-  font-family: var(
-    --utrecht-heading-4-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
-  font-size: var(--utrecht-heading-4-font-size);
-  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
-  letter-spacing: var(--utrecht-heading-4-letter-spacing);
-  line-height: var(--utrecht-heading-4-line-height);
-  text-transform: var(--utrecht-heading-4-text-transform, inherit);
-  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-4--distanced {
-  margin-block-start: var(--utrecht-heading-4-margin-block-start);
-  margin-block-end: var(--utrecht-heading-4-margin-block-end);
-}
-
-.utrecht-heading-5 {
-  font-family: var(
-    --utrecht-heading-5-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
-  font-size: var(--utrecht-heading-5-font-size);
-  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
-  letter-spacing: var(--utrecht-heading-5-letter-spacing);
-  line-height: var(--utrecht-heading-5-line-height);
-  text-transform: var(--utrecht-heading-5-text-transform, inherit);
-  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-5--distanced {
-  margin-block-start: var(--utrecht-heading-5-margin-block-start);
-  margin-block-end: var(--utrecht-heading-5-margin-block-end);
-}
-
-.utrecht-heading-6 {
-  font-family: var(
-    --utrecht-heading-6-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
-  font-size: var(--utrecht-heading-6-font-size);
-  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
-  letter-spacing: var(--utrecht-heading-6-letter-spacing);
-  line-height: var(--utrecht-heading-6-line-height);
-  text-transform: var(--utrecht-heading-6-text-transform, inherit);
-  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-6--distanced {
-  margin-block-start: var(--utrecht-heading-6-margin-block-start);
-  margin-block-end: var(--utrecht-heading-6-margin-block-end);
-}