@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
54 lines (49 loc) • 9.3 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './heading-2.js';
import { d as defineCustomElement$3 } from './heading-3.js';
import { d as defineCustomElement$2 } from './paragraph.js';
const contactCardTemplateCss = ".utrecht-link{--utrecht-icon-size:var(--utrecht-link-icon-size, 1em);color:var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)))}.utrecht-link:any-link{--_utrecht-link-forced-colors-color:linktext;text-decoration-color:var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));text-decoration-line:var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip-ink:all;text-decoration-thickness:max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--visited{--_utrecht-link-forced-colors-color:visitedtext;--_utrecht-link-state-color:var(--utrecht-link-visited-color)}.utrecht-link--html-a:any-link:hover,.utrecht-link--hover{--_utrecht-link-forced-colors-color:linktext;--_utrecht-link-state-color:var(--utrecht-link-hover-color);--_utrecht-link-state-text-decoration:var(--utrecht-link-hover-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-hover-text-decoration-thickness);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link--focus{--_utrecht-link-state-color:var(--utrecht-link-focus-color);background-color:var(--utrecht-link-focus-background-color, transparent);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);z-index:1;--_utrecht-link-state-text-decoration:var(\n --utrecht-link-focus-visible-text-decoration,\n var(--utrecht-link-focus-text-decoration)\n );--_utrecht-link-state-text-decoration-thickness:var(\n --utrecht-link-focus-visible-text-decoration-thickness,\n var(--utrecht-link-focus-text-decoration-thickness)\n );z-index:var(--utrecht-stack-focus-z-index, 1)}.utrecht-link--html-span:focus-visible,.utrecht-link--html-a:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);z-index:1;--_utrecht-link-state-text-decoration:var(\n --utrecht-link-focus-visible-text-decoration,\n var(--utrecht-link-focus-text-decoration)\n );--_utrecht-link-state-text-decoration-thickness:var(\n --utrecht-link-focus-visible-text-decoration-thickness,\n var(--utrecht-link-focus-text-decoration-thickness)\n );z-index:var(--utrecht-stack-focus-z-index, 1)}.utrecht-link--html-span:focus,.utrecht-link--html-a:any-link:focus{--_utrecht-link-state-color:var(--utrecht-link-focus-color);background-color:var(--utrecht-link-focus-background-color, transparent);text-decoration-skip:none;text-decoration-skip-ink:none}.utrecht-link--html-span:active,.utrecht-link--html-a:any-link:active,.utrecht-link--active{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link--telephone{white-space:nowrap}.utrecht-link--current{cursor:var(--utrecht-action-inert-cursor, normal);font-weight:var(--utrecht-link-current-font-weight)}.utrecht-link--box-content:any-link{color:unset;display:inline-block;text-decoration-line:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.utrecht-link--placeholder{--_utrecht-link-forced-colors-color:GrayText;--_utrecht-link-state-color:var(--utrecht-link-placeholder-color);cursor:var(--utrecht-action-disabled-cursor, not-allowed);font-weight:var(--utrecht-link-placeholder-font-weight);text-decoration-line:none}.utrecht-link--forced-colors{--utrecht-focus-outline-color:Highlight;--utrecht-focus-inverse-outline-color:HighlightText;--utrecht-link-color:linktext;--utrecht-link-hover-color:linktext;--utrecht-link-focus-color:linktext;--utrecht-link-active-color:activetext;--utrecht-link-visited-color:visitedtext;--utrecht-link-placeholder-color:GrayText}.utrecht-contact-card{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;--utrecht-heading-2-text-transform:none;--utrecht-heading-2-font-size:var(--utrecht-typography-scale-md-font-size);--utrecht-contact-card-background-color:hsl(207 60% 91%);--utrecht-contact-card-background-color-2:hsl(207 60% 96%);background-color:hsl(207, 60%, 91%);background-image:linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));background-position-x:66%;background-size:200%;color:var(--utrecht-color-black);padding-block-end:var(--utrecht-space-block-xl);padding-block-start:var(--utrecht-space-block-xl);padding-inline-end:var(--utrecht-space-inline-xl);padding-inline-start:var(--utrecht-space-inline-xl)}.utrecht-contact-card__content{display:flex;flex-direction:row}.utrecht-contact-card__section{inline-size:100%;margin-block-start:var(--utrecht-space-row-lg)}.utrecht-contact-card__telephone{--utrecht-paragraph-font-size:var(--utrecht-typography-scale-2xl-font-size)}";
const UtrechtContactCardTemplateStyle0 = contactCardTemplateCss;
const ContactCardTemplate = /*@__PURE__*/ proxyCustomElement(class ContactCardTemplate extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
}
render() {
return (h("div", { key: 'ddba69b87f6e4b1c1f09d07d127d2a9be21d1093', class: "utrecht-contact-card" }, h("utrecht-heading-2", { key: '88174a2d59052ceb1de4a3f5e3fd35ffa1f8bcfd' }, "Hulp en contact"), h("div", { key: '003884e6c5ae69eb527eb4ea22c32d455528793f', class: "utrecht-contact-card__content" }, h("div", { key: 'f03e083317fd5868bc4ce2185ef4b5ac5c5e3dfa', class: "utrecht-contact-card__section" }, h("utrecht-heading-3", { key: 'c953b684d30b00ef4539ce2ceef4d03e1855c789' }, "Telefoon"), h("utrecht-paragraph", { key: '5d26aa2f124cf30d9fc3ea2b416eb80e8a94ceb3', class: "utrecht-contact-card__telephone" }, h("a", { key: '58b021c1064f5648a5a385e7af13bd1debdfacc1', href: "tel:14-030", class: "utrecht-link utrecht-link--html-a utrecht-link--telephone", title: "Telefoonnummer van gemeente Utrecht" }, "14 030")), h("utrecht-paragraph", { key: '02ab1e5f5ca2c2e16e3f2c4c4aa5f2527f9e1821' }, "Maandag t/m vrijdag 8.30 \u2013 17.30 uur")), h("div", { key: '3512df567a94b6a7e2f3fcf99d35faa79fb3adb7', class: "utrecht-contact-card__section" }, h("utrecht-heading-3", { key: 'f1e2a2cb6a6d492cbb4d0122c24b14253ab00b99' }, "E-mail"), h("utrecht-paragraph", { key: '89c825f5b80531a8d1405d54f9b680f6b3a393c3' }, h("a", { key: '880c9f5136506317ec575975eb1573c433497dc9', class: "utrecht-link utrecht-link--html-a utrecht-link--html-a", href: "https://www.utrecht.nl/reactieformulier", title: "Algemeen reactieformulier van de gemeente Utrecht" }, "reactieformulier"))))));
}
static get style() { return UtrechtContactCardTemplateStyle0; }
}, [1, "utrecht-contact-card-template"]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-contact-card-template", "utrecht-heading-2", "utrecht-heading-3", "utrecht-paragraph"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-contact-card-template":
if (!customElements.get(tagName)) {
customElements.define(tagName, ContactCardTemplate);
}
break;
case "utrecht-heading-2":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "utrecht-heading-3":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "utrecht-paragraph":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const UtrechtContactCardTemplate = ContactCardTemplate;
const defineCustomElement = defineCustomElement$1;
export { UtrechtContactCardTemplate, defineCustomElement };
//# sourceMappingURL=utrecht-contact-card-template.js.map