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

package/dist/collection/button-link/css/template.js

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  external: false,
+  hover: false,
+  href: '',
+  focus: false,
+  focusVisible: false,
+  textContent: '',
+};
+
+export const ButtonLink = ({
+  external = false,
+  hover = false,
+  href = '',
+  focus = false,
+  focusVisible = false,
+  textContent = '',
+}) =>
+  `<a role="button" href="${href}" class="${clsx(
+    'utrecht-button-link',
+    hover && 'utrecht-button-link--hover',
+    focus && 'utrecht-button-link--focus',
+    focusVisible && 'utrecht-button-link--focus-visible',
+  )}"${external ? ' rel="external noopener noreferrer"' : ''}>${textContent}</a>`;

package/dist/collection/collection-manifest.json

@@ -2,14 +2,14 @@
   "entries": [
     "./article/web-component/index.stencil.js",
     "./backdrop/web-component/index.stencil.js",
-    "./badge-counter/stencil.js",
-    "./badge-data/stencil.js",
-    "./badge-status/stencil.js",
+    "./badge-counter/web-component/index.stencil.js",
+    "./badge-data/web-component/index.stencil.js",
+    "./badge-status/web-component/index.stencil.js",
     "./breadcrumb/web-component/index.stencil.js",
     "./button/stencil.js",
     "./checkbox/web-component/index.stencil.js",
-    "./custom-checkbox/stencil.js",
-    "./digid-button/stencil.js",
+    "./custom-checkbox/web-component/index.stencil.js",
+    "./digid-button/web-component/index.stencil.js",
     "./digid-logo/web-component/index.stencil.js",
     "./document/web-component/index.stencil.js",
     "./eherkenning-logo/web-component/index.stencil.js",
@@ -18,7 +18,7 @@
     "./form-field-description/stencil.js",
     "./form-field-textarea/stencil.js",
     "./form-field-textbox/stencil.js",
-    "./form-toggle/stencil.js",
+    "./form-toggle/web-component/index.stencil.js",
     "./heading/stencil.js",
     "./heading-1/stencil.js",
     "./heading-2/stencil.js",
@@ -27,41 +27,41 @@
     "./heading-5/stencil.js",
     "./heading-6/stencil.js",
     "./html-content/stencil.js",
-    "./icon/afval.stencil.js",
-    "./icon/arrow.stencil.js",
-    "./icon/checkmark.stencil.js",
-    "./icon/cross.stencil.js",
-    "./icon/error.stencil.js",
-    "./icon/facebook.stencil.js",
-    "./icon/filter.stencil.js",
-    "./icon/information.stencil.js",
-    "./icon/instagram.stencil.js",
-    "./icon/linkedin.stencil.js",
-    "./icon/list.stencil.js",
-    "./icon/loupe.stencil.js",
-    "./icon/melding.stencil.js",
-    "./icon/paspoort.stencil.js",
-    "./icon/rijbewijs.stencil.js",
-    "./icon/toeslag.stencil.js",
-    "./icon/trouwen.stencil.js",
-    "./icon/twitter.stencil.js",
-    "./icon/verhuizen.stencil.js",
-    "./icon/warning.stencil.js",
-    "./icon/whatsapp.stencil.js",
-    "./icon/zoomin.stencil.js",
-    "./icon/zoomout.stencil.js",
-    "./logo/stencil.js",
-    "./logo-button/stencil.js",
-    "./navigatie sidenav/stencil.js",
-    "./page/stencil.js",
-    "./page-content/stencil.js",
-    "./page-footer/stencil.js",
-    "./page-header/stencil.js",
-    "./pagination/stencil.js",
+    "./icon/web-component/afval.stencil.js",
+    "./icon/web-component/arrow.stencil.js",
+    "./icon/web-component/checkmark.stencil.js",
+    "./icon/web-component/cross.stencil.js",
+    "./icon/web-component/error.stencil.js",
+    "./icon/web-component/facebook.stencil.js",
+    "./icon/web-component/filter.stencil.js",
+    "./icon/web-component/information.stencil.js",
+    "./icon/web-component/instagram.stencil.js",
+    "./icon/web-component/linkedin.stencil.js",
+    "./icon/web-component/list.stencil.js",
+    "./icon/web-component/loupe.stencil.js",
+    "./icon/web-component/melding.stencil.js",
+    "./icon/web-component/paspoort.stencil.js",
+    "./icon/web-component/rijbewijs.stencil.js",
+    "./icon/web-component/toeslag.stencil.js",
+    "./icon/web-component/trouwen.stencil.js",
+    "./icon/web-component/twitter.stencil.js",
+    "./icon/web-component/verhuizen.stencil.js",
+    "./icon/web-component/warning.stencil.js",
+    "./icon/web-component/whatsapp.stencil.js",
+    "./icon/web-component/zoomin.stencil.js",
+    "./icon/web-component/zoomout.stencil.js",
+    "./logo/web-component/index.stencil.js",
+    "./logo-button/web-component/index.stencil.js",
+    "./navigatie sidenav/web-component/index.stencil.js",
+    "./page/web-component/index.stencil.js",
+    "./page-content/web-component/index.stencil.js",
+    "./page-footer/web-component/index.stencil.js",
+    "./page-header/web-component/stencil.js",
+    "./pagination/web-component/index.stencil.js",
     "./paragraph/web-component/index.stencil.js",
-    "./separator/stencil.js",
-    "./templates/contact-card-template/stencil.js",
-    "./textbox/stencil.js"
+    "./separator/web-component/index.stencil.js",
+    "./templates/contact-card-template/web-component/index.stencil.js",
+    "./textbox/web-component/index.stencil.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/custom-checkbox/{stencil.js → web-component/index.stencil.js}

@@ -44,10 +44,10 @@ export class CustomCheckbox {
   static get is() { return "utrecht-custom-checkbox"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "disabled": {

package/dist/collection/custom-checkbox/web-component/template.js

@@ -0,0 +1,22 @@
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  indeterminate: false,
+  invalid: false,
+  required: false,
+  value: '',
+};
+
+export const CustomCheckbox = ({
+  checked = false,
+  disabled = false,
+  indeterminate = false,
+  invalid = false,
+  required = false,
+  value = '',
+}) =>
+  `<utrecht-custom-checkbox${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''}${
+    indeterminate ? ' indeterminate="true"' : ''
+  }${invalid ? ' invalid="true"' : ''}${required ? ' required="true"' : ''}${
+    value ? ` value="${value}"` : ''
+  }></utrecht-custom-checkbox>`;

package/dist/collection/digid-button/{stencil.js → web-component/index.stencil.js}

@@ -14,10 +14,10 @@ export class DigidButton {
   static get is() { return "utrecht-digid-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "type": {

package/dist/collection/digid-button/web-component/template.js

@@ -0,0 +1 @@
+export const DigidButton = () => `<utrecht-digid-button>Inloggen</utrecht-digid-button>`;

package/dist/collection/favicon/html/template.js

@@ -0,0 +1 @@
+export const Favicon = ({ href = '' }) => `<link rel="icon" href="${href}">`;

package/dist/collection/form-fieldset/html/template.js

@@ -0,0 +1,12 @@
+export const defaultArgs = {
+  innerHTML: '',
+  legend: '',
+};
+
+export const FormFieldset = ({ innerHTML = '', legend = '' }) =>
+  `<div class="utrecht-html">
+  <fieldset>
+    ${legend ? `<legend>${legend}</legend>` : ''}
+    ${innerHTML}
+  </fieldset>
+</div>`;

package/dist/collection/form-toggle/{stencil.js → web-component/index.stencil.js}

@@ -41,10 +41,10 @@ export class FormToggle {
   static get is() { return "utrecht-form-toggle"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "disabled": {

package/dist/collection/form-toggle/web-component/template.js

@@ -0,0 +1,7 @@
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+};
+
+export const FormToggle = ({ checked = false, disabled = false }) =>
+  `<utrecht-form-toggle${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''}></utrecht-form-toggle>`;

package/dist/collection/icon/{afval.stencil.js → web-component/afval.stencil.js}

@@ -11,9 +11,9 @@ export class IconAfval {
   static get is() { return "utrecht-icon-afval"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{arrow.stencil.js → web-component/arrow.stencil.js}

@@ -9,9 +9,9 @@ export class IconArrow {
   static get is() { return "utrecht-icon-arrow"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{checkmark.stencil.js → web-component/checkmark.stencil.js}

@@ -8,9 +8,9 @@ export class Checkmark {
   static get is() { return "utrecht-icon-checkmark"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{cross.stencil.js → web-component/cross.stencil.js}

@@ -9,9 +9,9 @@ export class IconCross {
   static get is() { return "utrecht-icon-cross"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{error.stencil.js → web-component/error.stencil.js}

@@ -10,9 +10,9 @@ export class IconError {
   static get is() { return "utrecht-icon-error"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{facebook.stencil.js → web-component/facebook.stencil.js}

@@ -9,9 +9,9 @@ export class IconFacebook {
   static get is() { return "utrecht-icon-facebook"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{filter.stencil.js → web-component/filter.stencil.js}

@@ -10,9 +10,9 @@ export class IconFilter {
   static get is() { return "utrecht-icon-filter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{information.stencil.js → web-component/information.stencil.js}

@@ -11,9 +11,9 @@ export class IconInformation {
   static get is() { return "utrecht-icon-information"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{instagram.stencil.js → web-component/instagram.stencil.js}

@@ -11,9 +11,9 @@ export class IconInstagram {
   static get is() { return "utrecht-icon-instagram"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{linkedin.stencil.js → web-component/linkedin.stencil.js}

@@ -10,9 +10,9 @@ export class IconLinkedin {
   static get is() { return "utrecht-icon-linkedin"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{list.stencil.js → web-component/list.stencil.js}

@@ -13,9 +13,9 @@ export class IconList {
   static get is() { return "utrecht-icon-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{loupe.stencil.js → web-component/loupe.stencil.js}

@@ -9,9 +9,9 @@ export class IconLoupe {
   static get is() { return "utrecht-icon-loupe"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{melding.stencil.js → web-component/melding.stencil.js}

@@ -9,9 +9,9 @@ export class IconMelding {
   static get is() { return "utrecht-icon-melding"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{paspoort.stencil.js → web-component/paspoort.stencil.js}

@@ -9,9 +9,9 @@ export class IconPaspoort {
   static get is() { return "utrecht-icon-paspoort"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{rijbewijs.stencil.js → web-component/rijbewijs.stencil.js}

@@ -12,9 +12,9 @@ export class IconRijbewijs {
   static get is() { return "utrecht-icon-rijbewijs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/web-component/template.js

@@ -0,0 +1,7 @@
+export const IconExample = ({
+  color = 'blue',
+  icon = 'utrecht-icon-arrow',
+  size = 12,
+}) => `<div style="--utrecht-icon-color: ${color}; --utrecht-icon-size: ${size}px;">
+  <${icon}></${icon}>
+</div>`;

package/dist/collection/icon/{toeslag.stencil.js → web-component/toeslag.stencil.js}

@@ -9,9 +9,9 @@ export class IconToeslag {
   static get is() { return "utrecht-icon-toeslag"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{trouwen.stencil.js → web-component/trouwen.stencil.js}

@@ -8,9 +8,9 @@ export class IconTrouwen {
   static get is() { return "utrecht-icon-trouwen"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{twitter.stencil.js → web-component/twitter.stencil.js}

@@ -9,9 +9,9 @@ export class IconTwitter {
   static get is() { return "utrecht-icon-twitter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{verhuizen.stencil.js → web-component/verhuizen.stencil.js}

@@ -13,9 +13,9 @@ export class IconVerhuizen {
   static get is() { return "utrecht-icon-verhuizen"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{warning.stencil.js → web-component/warning.stencil.js}

@@ -11,9 +11,9 @@ export class IconWarning {
   static get is() { return "utrecht-icon-warning"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{whatsapp.stencil.js → web-component/whatsapp.stencil.js}

@@ -9,9 +9,9 @@ export class IconWhatsapp {
   static get is() { return "utrecht-icon-whatsapp"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{zoomin.stencil.js → web-component/zoomin.stencil.js}

@@ -10,9 +10,9 @@ export class IconZoomin {
   static get is() { return "utrecht-icon-zoomin"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{zoomout.stencil.js → web-component/zoomout.stencil.js}

@@ -9,9 +9,9 @@ export class IconZoomOut {
   static get is() { return "utrecht-icon-zoomout"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }