@utrecht/web-component-library-stencil 1.1.1-alpha.9 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/utrecht-alert_46.cjs.entry.js +6 -6
- package/dist/cjs/utrecht-alert_46.cjs.entry.js.map +1 -1
- package/dist/cjs/utrecht-breadcrumb-nav.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-breadcrumb-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/utrecht-form-toggle.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-form-toggle.cjs.entry.js.map +1 -1
- package/dist/cjs/utrecht-html-content.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-html-content.cjs.entry.js.map +1 -1
- package/dist/cjs/utrecht-textarea.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/utrecht-textbox.cjs.entry.js +1 -1
- package/dist/cjs/utrecht-textbox.cjs.entry.js.map +1 -1
- package/dist/collection/components/badge-counter.css +2 -2
- package/dist/collection/components/breadcrumb-nav.css +11 -12
- package/dist/collection/components/code-block.css +3 -2
- package/dist/collection/components/code.css +2 -1
- package/dist/collection/components/form-field-checkbox.css +1 -1
- package/dist/collection/components/form-field-textarea.css +3 -2
- package/dist/collection/components/form-field-textbox.css +85 -14
- package/dist/collection/components/form-toggle.css +4 -0
- package/dist/collection/components/html-content.css +40 -11
- package/dist/collection/components/textarea.css +2 -1
- package/dist/collection/components/textbox.css +84 -13
- package/dist/components/utrecht-badge-counter.js +1 -1
- package/dist/components/utrecht-badge-counter.js.map +1 -1
- package/dist/components/utrecht-breadcrumb-nav.js +1 -1
- package/dist/components/utrecht-breadcrumb-nav.js.map +1 -1
- package/dist/components/utrecht-code-block.js +1 -1
- package/dist/components/utrecht-code-block.js.map +1 -1
- package/dist/components/utrecht-code.js +1 -1
- package/dist/components/utrecht-code.js.map +1 -1
- package/dist/components/utrecht-form-field-checkbox.js +1 -1
- package/dist/components/utrecht-form-field-checkbox.js.map +1 -1
- package/dist/components/utrecht-form-field-textarea.js +1 -1
- package/dist/components/utrecht-form-field-textarea.js.map +1 -1
- package/dist/components/utrecht-form-field-textbox.js +1 -1
- package/dist/components/utrecht-form-field-textbox.js.map +1 -1
- package/dist/components/utrecht-form-toggle.js +1 -1
- package/dist/components/utrecht-form-toggle.js.map +1 -1
- package/dist/components/utrecht-html-content.js +1 -1
- package/dist/components/utrecht-html-content.js.map +1 -1
- package/dist/components/utrecht-textarea.js +1 -1
- package/dist/components/utrecht-textarea.js.map +1 -1
- package/dist/components/utrecht-textbox.js +1 -1
- package/dist/components/utrecht-textbox.js.map +1 -1
- package/dist/esm/utrecht-alert_46.entry.js +6 -6
- package/dist/esm/utrecht-alert_46.entry.js.map +1 -1
- package/dist/esm/utrecht-breadcrumb-nav.entry.js +1 -1
- package/dist/esm/utrecht-breadcrumb-nav.entry.js.map +1 -1
- package/dist/esm/utrecht-form-toggle.entry.js +1 -1
- package/dist/esm/utrecht-form-toggle.entry.js.map +1 -1
- package/dist/esm/utrecht-html-content.entry.js +1 -1
- package/dist/esm/utrecht-html-content.entry.js.map +1 -1
- package/dist/esm/utrecht-textarea.entry.js +1 -1
- package/dist/esm/utrecht-textarea.entry.js.map +1 -1
- package/dist/esm/utrecht-textbox.entry.js +1 -1
- package/dist/esm/utrecht-textbox.entry.js.map +1 -1
- package/dist/utrecht/p-13ef5daa.entry.js +2 -0
- package/dist/utrecht/{p-5e5531b8.entry.js.map → p-13ef5daa.entry.js.map} +1 -1
- package/dist/utrecht/p-5eb23cc4.entry.js +2 -0
- package/dist/utrecht/{p-061a1ee7.entry.js.map → p-5eb23cc4.entry.js.map} +1 -1
- package/dist/utrecht/p-875e9fcb.entry.js +2 -0
- package/dist/utrecht/{p-2b4835a5.entry.js.map → p-875e9fcb.entry.js.map} +1 -1
- package/dist/utrecht/{p-98916c46.entry.js → p-cf934f95.entry.js} +2 -2
- package/dist/utrecht/{p-98916c46.entry.js.map → p-cf934f95.entry.js.map} +1 -1
- package/dist/utrecht/p-ee79524c.entry.js +2 -0
- package/dist/utrecht/{p-790f0e65.entry.js.map → p-ee79524c.entry.js.map} +1 -1
- package/dist/utrecht/p-efc5ce95.entry.js +2 -0
- package/dist/utrecht/{p-27870586.entry.js.map → p-efc5ce95.entry.js.map} +1 -1
- package/dist/utrecht/utrecht.esm.js +1 -1
- package/package.json +4 -4
- package/LICENSE.txt +0 -287
- package/dist/utrecht/p-061a1ee7.entry.js +0 -2
- package/dist/utrecht/p-27870586.entry.js +0 -2
- package/dist/utrecht/p-2b4835a5.entry.js +0 -2
- package/dist/utrecht/p-5e5531b8.entry.js +0 -2
- package/dist/utrecht/p-790f0e65.entry.js +0 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
|
|
4
|
-
const breadcrumbNavCss = ".utrecht-breadcrumb-nav{--utrecht-focus-background-color:var(--utrecht-breadcrumb-nav-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-nav-link-background-color);--utrecht-link-text-decoration:var(--utrecht-breadcrumb-nav-link-text-decoration);--utrecht-link-focus-color:var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));--utrecht-link-focus-text-decoration:var(\n --utrecht-breadcrumb-nav-link-focus-text-decoration,\n var(--utrecht-breadcrumb-nav-link-text-decoration)\n );--utrecht-link-hover-color:var(--utrecht-breadcrumb-nav-link-hover-color, var(--utrecht-breadcrumb-nav-link-color));--utrecht-link-hover-text-decoration:var(\n --utrecht-breadcrumb-nav-link-hover-text-decoration,\n var(--utrecht-breadcrumb-nav-link-text-decoration)\n );--utrecht-link-visited-color:var(--utrecht-breadcrumb-nav-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-color:var(--utrecht-breadcrumb-nav-link-color);--utrecht-link-placeholder-color:var(--utrecht-link-breadcrumb-link-disabled-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-breadcrumb-nav-font-size);text-transform:var(--utrecht-document-text-transform, inherit)}.utrecht-breadcrumb-nav__heading{display:none}.utrecht-breadcrumb-nav__list{display:flex;flex-wrap:wrap;min-block-size:var(--utrecht-breadcrumb-nav-min-block-size)}.utrecht-breadcrumb-nav__list--html-ol{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb-nav__list--html-p{margin-block-end:0;margin-block-start:0}.utrecht-breadcrumb-nav__item{block-size:100%}.utrecht-breadcrumb-nav__link{--utrecht-icon-size:var(--utrecht-breadcrumb-nav-link-icon-size);--utrecht-link-icon-size:var(--utrecht-breadcrumb-nav-link-icon-size);background-color:var(--utrecht-breadcrumb-nav-link-background-color);display:inline-block;padding-block-end:var(--utrecht-breadcrumb-nav-item-padding-block-end, 8px);padding-block-start:var(--utrecht-breadcrumb-nav-item-padding-block-start, 8px);padding-inline-end:var(--utrecht-breadcrumb-nav-item-padding-inline-end, 8px);padding-inline-start:var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px)}.utrecht-breadcrumb-nav__link--disabled{--utrecht-link-placeholder-color:var(\n --utrecht-breadcrumb-nav-link-disabled-color,\n var(--utrecht-breadcrumb-nav-link-color)\n );background-color:var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));color:var(--utrecht-link-placeholder-color);cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-breadcrumb-nav__link--current{--utrecht-link-current-font-weight:var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);cursor:var(--utrecht-action-inert-cursor, default);font-weight:var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit)}.utrecht-breadcrumb-nav__separator{--_utrecht-breadcrumb-nav-separator-display:inline-flex;--utrecht-icon-size:var(--utrecht-breadcrumb-nav-separator-icon-size);align-items:center;color:var(--utrecht-breadcrumb-nav-separator-color);cursor:var(--utrecht-action-inert-cursor, default);display:var(--_utrecht-breadcrumb-nav-separator-display);inline-size:fit-content;-webkit-user-select:none;user-select:none}.utrecht-breadcrumb-nav__separator--html-li{--_utrecht-breadcrumb-nav-separator-display:inline-flex;--utrecht-icon-size:var(--utrecht-breadcrumb-nav-separator-icon-size);align-items:center;color:var(--utrecht-breadcrumb-nav-separator-color);cursor:var(--utrecht-action-inert-cursor, default);display:var(--_utrecht-breadcrumb-nav-separator-display);inline-size:fit-content;-webkit-user-select:none;user-select:none}.utrecht-breadcrumb-nav--arrows{--utrecht-breadcrumb-nav-arrow-size:24px;min-block-size:var(--utrecht-breadcrumb-nav-min-block-size);overflow:hidden}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link{background-color:var(--utrecht-breadcrumb-nav-arrows-link-background-color);padding-inline-end:0;position:relative}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before{block-size:0;border-block-end-width:var(--utrecht-breadcrumb-nav-min-block-size);border-block-start-width:var(--utrecht-breadcrumb-nav-min-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;inline-size:0;inset-block-start:50%;inset-inline-start:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));position:absolute}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after{border-inline-start-color:var(--utrecht-breadcrumb-nav-arrows-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-nav-arrow-size);z-index:2}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-nav-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus{--utrecht-link-focus-background-color:var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);background-color:var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color)}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus::after,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color)}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link~.utrecht-breadcrumb-nav__link,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__item~.utrecht-breadcrumb-nav__item .utrecht-breadcrumb-nav__link{padding-inline-start:calc(var(--utrecht-breadcrumb-nav-item-padding-inline-start) + var(--utrecht-breadcrumb-nav-arrow-size))}.utrecht-breadcrumb-nav__item~.utrecht-breadcrumb-nav__item{margin-inline-start:var(--utrecht-breadcrumb-nav-item-divider-inline-size)}.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--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, LinkText);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration-line:none}.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);--_utrecht-link-state-text-decoration:var(--utrecht-link-focus-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-focus-text-decoration-thickness);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: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);--_utrecht-link-state-text-decoration:var(--utrecht-link-focus-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-focus-text-decoration-thickness);background-color:var(--utrecht-link-focus-background-color, transparent);text-decoration-skip:none;text-decoration-skip-ink:none;--_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:var(--utrecht-stack-focus-z-index, 1)}.utrecht-link--html-span:focus:not(:focus-visible),.utrecht-link--html-a:any-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.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}:host{display:block}:host([hidden]){display:none !important}";
|
|
4
|
+
const breadcrumbNavCss = ".utrecht-breadcrumb-nav{--utrecht-focus-background-color:var(--utrecht-breadcrumb-nav-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-nav-link-background-color);--utrecht-link-text-decoration:var(--utrecht-breadcrumb-nav-link-text-decoration);--utrecht-link-focus-color:var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));--utrecht-link-focus-text-decoration:var(\n --utrecht-breadcrumb-nav-link-focus-text-decoration,\n var(--utrecht-breadcrumb-nav-link-text-decoration)\n );--utrecht-link-hover-color:var(--utrecht-breadcrumb-nav-link-hover-color, var(--utrecht-breadcrumb-nav-link-color));--utrecht-link-hover-text-decoration:var(\n --utrecht-breadcrumb-nav-link-hover-text-decoration,\n var(--utrecht-breadcrumb-nav-link-text-decoration)\n );--utrecht-link-visited-color:var(--utrecht-breadcrumb-nav-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-color:var(--utrecht-breadcrumb-nav-link-color);--utrecht-link-placeholder-color:var(--utrecht-link-breadcrumb-link-disabled-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-breadcrumb-nav-font-size);text-transform:var(--utrecht-document-text-transform, inherit)}.utrecht-breadcrumb-nav__heading{display:none}.utrecht-breadcrumb-nav__list{display:flex;flex-wrap:wrap;min-block-size:var(--utrecht-breadcrumb-nav-min-block-size)}.utrecht-breadcrumb-nav__list--html-ol{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb-nav__list--html-p{margin-block-end:0;margin-block-start:0}.utrecht-breadcrumb-nav__item{block-size:100%}.utrecht-breadcrumb-nav__link{--utrecht-icon-size:var(--utrecht-breadcrumb-nav-link-icon-size);--utrecht-link-icon-size:var(--utrecht-breadcrumb-nav-link-icon-size);background-color:var(--utrecht-breadcrumb-nav-link-background-color);display:inline-block;padding-block-end:var(--utrecht-breadcrumb-nav-item-padding-block-end, 8px);padding-block-start:var(--utrecht-breadcrumb-nav-item-padding-block-start, 8px);padding-inline-end:var(--utrecht-breadcrumb-nav-item-padding-inline-end, 8px);padding-inline-start:var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px)}.utrecht-breadcrumb-nav__link--current{--utrecht-link-current-font-weight:var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);--_utrecht-breadcrumb-nav-link-current-cursor:var(--utrecht-action-inert-cursor, default);font-weight:var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit)}.utrecht-breadcrumb-nav__link--disabled{--utrecht-link-placeholder-color:var(\n --utrecht-breadcrumb-nav-link-disabled-color,\n var(--utrecht-breadcrumb-nav-link-color)\n );--_utrecht-breadcrumb-nav-link-disabled-cursor:var(--utrecht-action-disabled-cursor, not-allowed);background-color:var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));cursor:var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor))}.utrecht-breadcrumb-nav__separator{--_utrecht-breadcrumb-nav-separator-display:inline-flex;--utrecht-icon-size:var(--utrecht-breadcrumb-nav-separator-icon-size);align-items:center;color:var(--utrecht-breadcrumb-nav-separator-color);cursor:var(--utrecht-action-inert-cursor, default);display:var(--_utrecht-breadcrumb-nav-separator-display);inline-size:fit-content;-webkit-user-select:none;user-select:none}.utrecht-breadcrumb-nav__separator--html-li{--_utrecht-breadcrumb-nav-separator-display:inline-flex;--utrecht-icon-size:var(--utrecht-breadcrumb-nav-separator-icon-size);align-items:center;color:var(--utrecht-breadcrumb-nav-separator-color);cursor:var(--utrecht-action-inert-cursor, default);display:var(--_utrecht-breadcrumb-nav-separator-display);inline-size:fit-content;-webkit-user-select:none;user-select:none}.utrecht-breadcrumb-nav--arrows{--utrecht-breadcrumb-nav-arrow-size:24px;min-block-size:var(--utrecht-breadcrumb-nav-min-block-size);overflow:hidden}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link{background-color:var(--utrecht-breadcrumb-nav-arrows-link-background-color);padding-inline-end:0;position:relative}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before{block-size:0;border-block-end-width:var(--utrecht-breadcrumb-nav-min-block-size);border-block-start-width:var(--utrecht-breadcrumb-nav-min-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;inline-size:0;inset-block-start:50%;inset-inline-start:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));position:absolute}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after{border-inline-start-color:var(--utrecht-breadcrumb-nav-arrows-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-nav-arrow-size);z-index:2}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-nav-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus{--utrecht-link-focus-background-color:var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);background-color:var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color)}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus::after,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color)}.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link~.utrecht-breadcrumb-nav__link,.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__item~.utrecht-breadcrumb-nav__item .utrecht-breadcrumb-nav__link{padding-inline-start:calc(var(--utrecht-breadcrumb-nav-item-padding-inline-start) + var(--utrecht-breadcrumb-nav-arrow-size))}.utrecht-breadcrumb-nav__item~.utrecht-breadcrumb-nav__item{margin-inline-start:var(--utrecht-breadcrumb-nav-item-divider-inline-size)}.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--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, LinkText);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration-line:none}.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);--_utrecht-link-state-text-decoration:var(--utrecht-link-focus-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-focus-text-decoration-thickness);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: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);--_utrecht-link-state-text-decoration:var(--utrecht-link-focus-text-decoration);--_utrecht-link-state-text-decoration-thickness:var(--utrecht-link-focus-text-decoration-thickness);background-color:var(--utrecht-link-focus-background-color, transparent);text-decoration-skip:none;text-decoration-skip-ink:none;--_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:var(--utrecht-stack-focus-z-index, 1)}.utrecht-link--html-span:focus:not(:focus-visible),.utrecht-link--html-a:any-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.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}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
5
|
|
|
6
6
|
const BreadcrumbNav = /*@__PURE__*/ proxyCustomElement(class BreadcrumbNav extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"utrecht-breadcrumb-nav.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,
|
|
1
|
+
{"file":"utrecht-breadcrumb-nav.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,u1VAAu1V;;MCYn2V,aAAa;;;;;;;;IAIxB,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3C,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,OAAO,KAAK,QAAQ,IAAI,gCAAgC,CAAC,IAClG,UACE,KAAK,EAAC,oEAAoE,EAC1E,SAAS,QACT,QAAQ,EAAC,mCAAmC,IAE3C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,MACzC,UACE,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,8BAA8B,EACpC,SAAS,QACT,QAAQ,EAAC,6BAA6B,EACtC,QAAQ,EAAC,iBAAiB,IAE1B,SACE,KAAK,EAAE,IAAI,CACT,8BAA8B,EAC9B,cAAc,EACd,sBAAsB,EACtB,OAAO,IAAI,uBAAuB,CACnC,EACD,IAAI,EAAE,IAAI,kBACI,OAAO,GAAG,UAAU,GAAG,IAAI,EACzC,QAAQ,EAAC,MAAM,IAEf,YAAM,KAAK,EAAC,8BAA8B,EAAC,QAAQ,EAAC,MAAM,IACvD,KAAK,CACD,EACP,YAAM,QAAQ,EAAC,UAAU,EAAC,OAAO,EAAE,KAAK,GAAG,CAAC,GAAI,CAC9C,CACD,CACN,CAAC,CACC,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb-nav.scss?tag=utrecht-breadcrumb-nav&encapsulation=shadow","src/components/breadcrumb-nav.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/breadcrumb-nav/css\";\n@import \"~@utrecht/components/link/css\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-breadcrumb-nav',\n styleUrl: 'breadcrumb-nav.scss',\n shadow: true,\n})\nexport class BreadcrumbNav {\n @Prop() json: string;\n @Prop() variant: string;\n\n render() {\n const { json, variant } = this;\n\n const items = json ? JSON.parse(json) : [];\n\n return (\n <nav class={clsx('utrecht-breadcrumb-nav', variant === 'arrows' && 'utrecht-breadcrumb-nav--arrows')}>\n <ol\n class=\"utrecht-breadcrumb-nav__list utrecht-breadcrumb-nav__list--html-ol\"\n itemscope\n itemtype=\"https://schema.org/BreadcrumbList\"\n >\n {items.map(({ href, title, current }, index) => (\n <li\n key={href}\n class=\"utrecht-breadcrumb-nav__item\"\n itemscope\n itemtype=\"https://schema.org/ListItem\"\n itemprop=\"itemListElement\"\n >\n <a\n class={clsx(\n 'utrecht-breadcrumb-nav__link',\n 'utrecht-link',\n 'utrecht-link--html-a',\n current && 'utrecht-link--current',\n )}\n href={href}\n aria-current={current ? 'location' : null}\n itemprop=\"item\"\n >\n <span class=\"utrecht-breadcrumb-nav__text\" itemprop=\"name\">\n {title}\n </span>\n <meta itemprop=\"position\" content={index + 1} />\n </a>\n </li>\n ))}\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const codeBlockCss = ".utrecht-code-block{background-color:var(--utrecht-code-background-color);color:var(--utrecht-code-color);font-family:var(--utrecht-code-font-family, monospace), monospace;font-size:var(--utrecht-code-font-size);font-variant-ligatures:none;line-height:var(--utrecht-code-line-height);--utrecht-code-color:var(--utrecht-code-block-color, inherit);--utrecht-code-background-color:var(--utrecht-code-block-background-color, inherit);--utrecht-code-font-weight:var(--utrecht-code-block-font-weight, inherit);--utrecht-code-font-size:var(--utrecht-code-block-font-size, inherit);--utrecht-code-font-family:var(--utrecht-code-block-font-family, monospace);background-color:var(--utrecht-code-block-background-color);display:block;font-size:var(--utrecht-code-block-font-size, var(--utrecht-code-font-size));line-height:var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));margin-block-end:var(--utrecht-code-block-margin-block-end);margin-block-start:var(--utrecht-code-block-margin-block-start);margin-inline-end:var(--utrecht-code-block-margin-inline-end);margin-inline-start:var(--utrecht-code-block-margin-inline-start);padding-block-end:var(--utrecht-code-block-padding-block-end);padding-block-start:var(--utrecht-code-block-padding-block-start);padding-inline-end:var(--utrecht-code-block-padding-inline-end);padding-inline-start:var(--utrecht-code-block-padding-inline-start);white-space:pre}.utrecht-code-block__content{font-family:inherit;font-size:inherit}:host{display:block}:host([hidden]){display:none !important}";
|
|
3
|
+
const codeBlockCss = ".utrecht-code-block{background-color:var(--utrecht-code-background-color);color:var(--utrecht-code-color);font-family:var(--utrecht-code-font-family, monospace), monospace;font-size:var(--utrecht-code-font-size, inherit);font-variant-ligatures:none;line-height:var(--utrecht-code-line-height);--utrecht-code-color:var(--utrecht-code-block-color, inherit);--utrecht-code-background-color:var(--utrecht-code-block-background-color, inherit);--utrecht-code-font-weight:var(--utrecht-code-block-font-weight, inherit);--utrecht-code-font-size:var(--utrecht-code-block-font-size, inherit);--utrecht-code-font-family:var(--utrecht-code-block-font-family, monospace);background-color:var(--utrecht-code-block-background-color);display:block;font-size:var(--utrecht-code-block-font-size, var(--utrecht-code-font-size, inherit));line-height:var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));margin-block-end:var(--utrecht-code-block-margin-block-end);margin-block-start:var(--utrecht-code-block-margin-block-start);margin-inline-end:var(--utrecht-code-block-margin-inline-end);margin-inline-start:var(--utrecht-code-block-margin-inline-start);padding-block-end:var(--utrecht-code-block-padding-block-end);padding-block-start:var(--utrecht-code-block-padding-block-start);padding-inline-end:var(--utrecht-code-block-padding-inline-end);padding-inline-start:var(--utrecht-code-block-padding-inline-start);white-space:pre}.utrecht-code-block__content{font-family:inherit;font-size:inherit}:host{display:block}:host([hidden]){display:none !important}";
|
|
4
4
|
|
|
5
5
|
const CodeBlock = /*@__PURE__*/ proxyCustomElement(class CodeBlock extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"utrecht-code-block.js","mappings":";;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"utrecht-code-block.js","mappings":";;AAAA,MAAM,YAAY,GAAG,uhDAAuhD;;MCa/hD,SAAS;;;;;;IACpB,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,eAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/code-block.scss?tag=utrecht-code-block&encapsulation=shadow","src/components/code-block.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/code-block/css\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-code-block',\n styleUrl: 'code-block.scss',\n shadow: true,\n})\nexport class CodeBlock {\n render() {\n return (\n <pre class=\"utrecht-code-block\">\n <slot></slot>\n </pre>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const codeCss = ".utrecht-code{background-color:var(--utrecht-code-background-color);color:var(--utrecht-code-color);font-family:var(--utrecht-code-font-family, monospace), monospace;font-size:var(--utrecht-code-font-size);font-variant-ligatures:none;line-height:var(--utrecht-code-line-height)}:host{display:inline}:host([hidden]){display:none !important}";
|
|
3
|
+
const codeCss = ".utrecht-code{background-color:var(--utrecht-code-background-color);color:var(--utrecht-code-color);font-family:var(--utrecht-code-font-family, monospace), monospace;font-size:var(--utrecht-code-font-size, inherit);font-variant-ligatures:none;line-height:var(--utrecht-code-line-height)}:host{display:inline}:host([hidden]){display:none !important}";
|
|
4
4
|
|
|
5
5
|
const Code = /*@__PURE__*/ proxyCustomElement(class Code extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"utrecht-code.js","mappings":";;AAAA,MAAM,OAAO,GAAG,
|
|
1
|
+
{"file":"utrecht-code.js","mappings":";;AAAA,MAAM,OAAO,GAAG,8VAA8V;;MCajW,IAAI;;;;;;IACf,MAAM;QACJ,QACE,YAAM,KAAK,EAAC,cAAc,IACxB,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/code.scss?tag=utrecht-code&encapsulation=shadow","src/components/code.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/code/css\";\n\n:host {\n display: inline;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-code',\n styleUrl: 'code.scss',\n shadow: true,\n})\nexport class Code {\n render() {\n return (\n <code class=\"utrecht-code\">\n <slot></slot>\n </code>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
|
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './form-field-description.js';
|
|
4
4
|
|
|
5
|
-
const formFieldCheckboxCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{margin-block-end:0;margin-block-start:0;grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert);-webkit-user-select:none;user-select:none}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--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)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_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)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;block-size:var(--utrecht-checkbox-size, 1em);border-color:var(--utrecht-checkbox-border-color);border-radius:var(--utrecht-checkbox-border-radius, 0);border-style:solid;border-width:var(--utrecht-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);inline-size:var(--utrecht-checkbox-size, 1em);margin-block-start:var(--utrecht-checkbox-margin-block-start);min-block-size:24px;min-inline-size:24px;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--hover,.utrecht-custom-checkbox--hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-checkbox--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)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,.utrecht-custom-checkbox--html-input:hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-checkbox--html-input: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)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
|
+
const formFieldCheckboxCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{margin-block-end:0;margin-block-start:0;grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert);-webkit-user-select:none;user-select:none}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--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)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_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)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;block-size:var(--utrecht-checkbox-size, 1em);border-color:var(--utrecht-checkbox-border-color);border-radius:var(--utrecht-checkbox-border-radius, 0);border-style:solid;border-width:var(--utrecht-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);inline-size:var(--utrecht-checkbox-size, 1em);margin-block-start:var(--utrecht-checkbox-margin-block-start);min-block-size:24px;min-inline-size:24px;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--hover,.utrecht-custom-checkbox--hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-checkbox--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)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,.utrecht-custom-checkbox--html-input:hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-checkbox--html-input: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)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
|
|
6
6
|
|
|
7
7
|
const FormFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class FormFieldCheckbox extends HTMLElement {
|
|
8
8
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"utrecht-form-field-checkbox.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,
|
|
1
|
+
{"file":"utrecht-form-field-checkbox.js","mappings":"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","names":[],"sources":["src/components/form-field-checkbox.scss?tag=utrecht-form-field-checkbox&encapsulation=shadow","src/components/form-field-checkbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/checkbox/css\";\n@import \"~@utrecht/components/custom-checkbox/css\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-field-checkbox',\n styleUrl: 'form-field-checkbox.scss',\n shadow: true,\n})\nexport class FormFieldCheckbox {\n @Element() hostElement!: HTMLElement;\n\n @Prop() label: string = '';\n @Prop({ attribute: 'disabled', reflect: true }) disabled: boolean = false;\n @Prop({ attribute: 'checked', reflect: true }) checked: boolean = false;\n @Prop({ attribute: 'invalid', reflect: true }) invalid: boolean = false;\n @Prop({ attribute: 'required', reflect: true }) required: boolean = false;\n @Prop() name: string = '';\n @Prop() value: string = '';\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled, hostElement, label, name, invalid, required, value } = this;\n\n let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n if (input && !name) {\n input.parentNode.removeChild(input);\n }\n\n if (!input && name) {\n input = hostElement.ownerDocument.createElement('input');\n input.type = 'hidden';\n hostElement.appendChild(input);\n }\n\n if (input && name) {\n input.name = name;\n input.value = checked ? value || '' : '';\n }\n\n return (\n <div\n class={clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {\n 'utrecht-form-field--invalid': invalid,\n })}\n >\n <p class=\"utrecht-form-field__label utrecht-form-field__label--checkbox\">\n <label\n class={clsx('utrecht-form-label', {\n 'utrecht-form-label--disabled': disabled,\n })}\n htmlFor=\"input\"\n >\n <input\n id=\"input\"\n type=\"checkbox\"\n class={clsx(\n 'utrecht-form-field__input',\n 'utrecht-checkbox',\n 'utrecht-checkbox--custom',\n 'utrecht-checkbox--html-input',\n {\n 'utrecht-checkbox--disabled': disabled,\n 'utrecht-checkbox--invalid': invalid,\n 'utrecht-checkbox--required': required,\n },\n )}\n aria-invalid={invalid || undefined}\n disabled={disabled}\n required={required}\n checked={checked}\n value={value}\n onBlur={(evt) => this.utrechtBlur.emit(evt)}\n onChange={(evt) => this.utrechtChange.emit(evt)}\n onFocus={(evt) => this.utrechtFocus.emit(evt)}\n onInput={(evt) => {\n this.checked = (evt.target as HTMLInputElement).checked;\n this.utrechtInput.emit(evt);\n }}\n />{' '}\n {label}\n <slot name=\"label\"></slot>\n </label>\n {invalid && (\n <utrecht-form-field-description\n status=\"invalid\"\n class=\"utrecht-form-field__description utrecht-form-field__description--invalid\"\n id=\"error-message\"\n >\n <slot name=\"error-message\"></slot>\n </utrecht-form-field-description>\n )}\n </p>\n <utrecht-form-field-description class=\"utrecht-form-field__description\" id=\"description\">\n <slot name=\"description\"></slot>\n </utrecht-form-field-description>\n <div class=\"utrecht-form-field__status\" id=\"status\">\n <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n <slot name=\"status\"></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
|
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './form-field-description.js';
|
|
4
4
|
|
|
5
|
-
const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{margin-block-end:0;margin-block-start:0;grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n --utrecht-textarea-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--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)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_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)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n --utrecht-textarea-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
|
+
const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{margin-block-end:0;margin-block-start:0;grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));min-inline-size:var(--utrecht-pointer-target-min-size, 44px);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n --utrecht-textarea-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--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)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_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)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n --utrecht-textarea-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
|
|
6
6
|
|
|
7
7
|
const HTML_DEFAULT_COLS = 20;
|
|
8
8
|
const HTML_DEFAULT_ROWS = 2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"utrecht-form-field-textarea.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,
|
|
1
|
+
{"file":"utrecht-form-field-textarea.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,44bAA44b;;ACQz6b,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;MAOf,iBAAiB;;;;;;;;;oBAEL,iBAAiB;wBACK,KAAK;uBACN,KAAK;qBACzB,EAAE;oBACH,EAAE;wBAC2C,KAAK;2BAC3C,EAAE;wBACa,KAAK;oBAC3B,iBAAiB;qBAChB,EAAE;;IAM1B,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEjH,IAAI,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAA4B,CAAC;QAEzF,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAClB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACrC;QAED,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE;YAClB,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzD,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;YACtB,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAChC;QAED,IAAI,KAAK,IAAI,IAAI,EAAE;YACjB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,KAAK,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;SAC3B;QAED,QACE,WACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,6BAA6B,EAAE;gBAC/D,6BAA6B,EAAE,OAAO;aACvC,CAAC,IAEF,SAAG,KAAK,EAAC,2BAA2B,IAClC,aACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE;gBAChC,8BAA8B,EAAE,QAAQ;aACzC,CAAC,EACF,OAAO,EAAC,OAAO,IAEd,KAAK,EACN,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACN,EACJ,sCAAgC,EAAE,EAAC,aAAa,IAC9C,YAAM,IAAI,EAAC,aAAa,GAAQ,CACD,EAChC,OAAO,KACN,sCAAgC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,mCAAmC,EAAC,EAAE,EAAC,eAAe,IAC3G,YAAM,IAAI,EAAC,eAAe,GAAQ,CACH,CAClC,EACD,SAAG,KAAK,EAAC,2BAA2B,IAClC,gBACE,EAAE,EAAC,OAAO,EACV,KAAK,EAAE,IAAI,CACT,kBAAkB,EAClB,iCAAiC,EACjC,QAAQ,IAAI,4BAA4B,EACxC,OAAO,IAAI,2BAA2B,EACtC,QAAQ,IAAI,4BAA4B,CACzC,kBACa,OAAO,EACrB,IAAI,EAAE,IAAI,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,EAC9C,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,MAAM,EACV,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,EAC9C,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;gBACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA8B,CAAC,KAAK,CAAC;gBACvD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC7B,IAEA,KAAK,CACG,CACT,EACJ,WAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,QAAQ,IACjD,WAAK,KAAK,EAAC,uEAAuE,IAChF,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field-textarea.scss?tag=utrecht-form-field-textarea&encapsulation=shadow","src/components/form-field-textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/textarea/css\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nconst HTML_DEFAULT_COLS = 20;\nconst HTML_DEFAULT_ROWS = 2;\n\n@Component({\n tag: 'utrecht-form-field-textarea',\n styleUrl: 'form-field-textarea.scss',\n shadow: true,\n})\nexport class FormFieldTextarea {\n @Element() hostElement!: HTMLElement;\n @Prop() cols: number = HTML_DEFAULT_COLS;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) invalid: boolean = false;\n @Prop() label: string = '';\n @Prop() name: string = '';\n @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n @Prop() placeholder: string = '';\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() rows: number = HTML_DEFAULT_ROWS;\n @Prop() value: string = '';\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { cols, disabled, hostElement, invalid, label, name, placeholder, readOnly, required, rows, value } = this;\n\n let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n if (input && !name) {\n input.parentNode.removeChild(input);\n }\n\n if (!input && name) {\n input = hostElement.ownerDocument.createElement('input');\n input.type = 'hidden';\n hostElement.appendChild(input);\n }\n\n if (input && name) {\n input.name = name;\n input.value = value || '';\n }\n\n return (\n <div\n class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n 'utrecht-form-field--invalid': invalid,\n })}\n >\n <p class=\"utrecht-form-field__label\">\n <label\n class={clsx('utrecht-form-label', {\n 'utrecht-form-label--disabled': disabled,\n })}\n htmlFor=\"input\"\n >\n {label}\n <slot name=\"label\"></slot>\n </label>\n </p>\n <utrecht-form-field-description id=\"description\">\n <slot name=\"description\"></slot>\n </utrecht-form-field-description>\n {invalid && (\n <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n <slot name=\"error-message\"></slot>\n </utrecht-form-field-description>\n )}\n <p class=\"utrecht-form-field__input\">\n <textarea\n id=\"input\"\n class={clsx(\n 'utrecht-textarea',\n 'utrecht-textarea--html-textarea',\n disabled && 'utrecht-textarea--disabled',\n invalid && 'utrecht-textarea--invalid',\n readOnly && 'utrecht-textarea--readonly',\n )}\n aria-invalid={invalid}\n cols={cols !== HTML_DEFAULT_COLS ? cols : null}\n disabled={disabled}\n dir=\"auto\"\n placeholder={placeholder || null}\n readonly={readOnly}\n required={required}\n rows={rows !== HTML_DEFAULT_ROWS ? rows : null}\n onBlur={(evt) => this.utrechtBlur.emit(evt)}\n onChange={(evt) => this.utrechtChange.emit(evt)}\n onFocus={(evt) => this.utrechtFocus.emit(evt)}\n onInput={(evt) => {\n this.value = (evt.target as HTMLTextAreaElement).value;\n this.utrechtInput.emit(evt);\n }}\n >\n {value}\n </textarea>\n </p>\n <div class=\"utrecht-form-field__status\" id=\"status\">\n <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n <slot name=\"status\"></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
|
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './form-field-description.js';
|
|
4
4
|
|
|
5
|
-
const formFieldTextboxCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{margin-block-end:0;margin-block-start:0;grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textbox{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial))}.utrecht-textbox--invalid{--_utrecht-textbox-border-width:var(\n --utrecht-textbox-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textbox--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)}.utrecht-textbox--read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--placeholder-ltr::placeholder,.utrecht-textbox--placeholder-ltr:placeholder-shown{direction:ltr}.utrecht-textbox--placeholder-rtl::placeholder,.utrecht-textbox--placeholder-rtl:placeholder-shown{direction:rtl}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input{}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_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)}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{--_utrecht-textbox-border-width:var(\n --utrecht-textbox-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input:read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textbox--html-input[type=password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--html-input[type=url i],.utrecht-textbox--html-input[type=email i],.utrecht-textbox--html-input[inputMode=email i],.utrecht-textbox--html-input[inputMode=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input[pattern=\"\\\\d*\"],.utrecht-textbox--html-input[pattern=\"[0-9]*\"],.utrecht-textbox--html-input[type=number i],.utrecht-textbox--html-input[type=tel i],.utrecht-textbox--html-input[inputMode=numeric i],.utrecht-textbox--html-input[inputMode=decimal i],.utrecht-textbox--html-input[inputMode=tel i]{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}:host{display:block}:host([hidden]){display:none !important}";
|
|
5
|
+
const formFieldTextboxCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{margin-block-end:0;margin-block-start:0;grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textbox{--_utrecht-textbox-value-char:0.667em + 0.334ch;--_utrecht-textbox-max-inline-size:calc(\n calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +\n var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +\n var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +\n var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +\n var(--utrecht-textbox-autocomplete-ui-size, 44px)\n );background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));min-block-size:var(--utrecht-pointer-target-min-size, 44px);min-inline-size:var(--utrecht-pointer-target-min-size, 44px);max-inline-size:min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial))}.utrecht-textbox--invalid{--_utrecht-textbox-border-width:var(\n --utrecht-textbox-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--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)}.utrecht-textbox--read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--postal-code-nl-size{--utrecht-textbox-value-max-length:7}.utrecht-textbox--house-number-size{--utrecht-textbox-value-max-length:5}.utrecht-textbox--house-letter-size{--utrecht-textbox-value-max-length:1}.utrecht-textbox--house-addition-size{--utrecht-textbox-value-max-length:4}.utrecht-textbox--voorvoegsel-size{--utrecht-textbox-value-max-length:10}.utrecht-textbox--tel-size{--utrecht-textbox-value-max-length:19}.utrecht-textbox--tel-nl-size{--utrecht-textbox-value-max-length:13}.utrecht-textbox--iban-size{--utrecht-textbox-value-max-length:41}.utrecht-textbox--iban-nl-size{--utrecht-textbox-value-max-length:22}.utrecht-textbox--placeholder-ltr::placeholder,.utrecht-textbox--placeholder-ltr:placeholder-shown{direction:ltr}.utrecht-textbox--placeholder-rtl::placeholder,.utrecht-textbox--placeholder-rtl:placeholder-shown{direction:rtl}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input{}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));--_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)}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{--_utrecht-textbox-border-width:var(\n --utrecht-textbox-invalid-border-width,\n var(\n --utrecht-form-control-invalid-border-width,\n var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n )\n );background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input:read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textbox--html-input[type=password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--html-input[type=url i],.utrecht-textbox--html-input[type=email i],.utrecht-textbox--html-input[inputMode=email i],.utrecht-textbox--html-input[inputMode=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input[pattern=\"\\\\d*\"],.utrecht-textbox--html-input[pattern=\"[0-9]*\"],.utrecht-textbox--html-input[type=number i],.utrecht-textbox--html-input[type=tel i],.utrecht-textbox--html-input[inputMode=numeric i],.utrecht-textbox--html-input[inputMode=decimal i],.utrecht-textbox--html-input[inputMode=tel i]{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}:host{display:block}:host([hidden]){display:none !important}";
|
|
6
6
|
|
|
7
7
|
const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class FormFieldTextbox extends HTMLElement {
|
|
8
8
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"utrecht-form-field-textbox.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"utrecht-form-field-textbox.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,8pgBAA8pgB;;MCa7qgB,gBAAgB;;;;;;;;;4BAGgD,EAAE;wBAChC,KAAK;uBACN,KAAK;qBACzB,EAAE;mBACK,EAAE;mBACF,EAAE;oBACV,EAAE;uBACC,EAAE;2BACE,EAAE;wBACoC,KAAK;wBAC5B,KAAK;oBACV,EAAE;qBAClB,EAAE;;IAM1B,MAAM;QACJ,MAAM,EACJ,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,GACN,GAAG,IAAI,CAAC;QAET,IAAI,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAA4B,CAAC;QAEzF,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAClB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACrC;QAED,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE;YAClB,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzD,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;YACtB,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;YAC1B,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAChC;QAED,IAAI,KAAK,IAAI,IAAI,EAAE;YACjB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,KAAK,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;SAC3B;QAED,QACE,WACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,6BAA6B,EAAE;gBAC/D,6BAA6B,EAAE,OAAO;aACvC,CAAC,IAEF,SAAG,KAAK,EAAC,2BAA2B,IAClC,aACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE;gBAChC,8BAA8B,EAAE,QAAQ;aACzC,CAAC,EACF,OAAO,EAAC,OAAO,IAEd,KAAK,EACN,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACN,EACJ,sCAAgC,EAAE,EAAC,aAAa,IAC9C,YAAM,IAAI,EAAC,aAAa,GAAQ,CACD,EAChC,OAAO,KACN,sCAAgC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,mCAAmC,EAAC,EAAE,EAAC,eAAe,IAC3G,YAAM,IAAI,EAAC,eAAe,GAAQ,CACH,CAClC,EACD,SAAG,KAAK,EAAC,2BAA2B,IAClC,aACE,EAAE,EAAC,OAAO,EACV,KAAK,EAAE,IAAI,CACT,2BAA2B,EAC3B,iBAAiB,EACjB,6BAA6B,EAC7B,QAAQ,IAAI,2BAA2B,EACvC,OAAO,IAAI,0BAA0B,EACrC,QAAQ,IAAI,2BAA2B,CACxC,EACD,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,YAAY,EAAE,YAAY,GAAG,YAAY,GAAG,IAAI,sBAC9B,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,kBAC/D,OAAO,EACrB,GAAG,EAAC,MAAM,EACV,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,EACjC,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;gBACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC7B,GACD,CACA,EACJ,WAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,QAAQ,IACjD,WAAK,KAAK,EAAC,uEAAuE,IAChF,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field-textbox.scss?tag=utrecht-form-field-textbox&encapsulation=shadow","src/components/form-field-textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/textbox/css\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-field-textbox',\n styleUrl: 'form-field-textbox.scss',\n shadow: true,\n})\nexport class FormFieldTextbox {\n @Element() hostElement!: HTMLElement;\n\n @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) invalid: boolean = false;\n @Prop() label: string = '';\n @Prop() min: number | string = '';\n @Prop() max: number | string = '';\n @Prop() name: string = '';\n @Prop() pattern: string = '';\n @Prop() placeholder: string = '';\n @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop({ reflect: true }) type: string = '';\n @Prop() value: string = '';\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const {\n autoComplete,\n disabled,\n hostElement,\n invalid,\n label,\n min,\n max,\n name,\n pattern,\n placeholder,\n readOnly,\n required,\n type,\n value,\n } = this;\n\n let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n if (input && !name) {\n input.parentNode.removeChild(input);\n }\n\n if (!input && name) {\n input = hostElement.ownerDocument.createElement('input');\n input.type = 'hidden';\n input.ariaHidden = 'true';\n hostElement.appendChild(input);\n }\n\n if (input && name) {\n input.name = name;\n input.value = value || '';\n }\n\n return (\n <div\n class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n 'utrecht-form-field--invalid': invalid,\n })}\n >\n <p class=\"utrecht-form-field__label\">\n <label\n class={clsx('utrecht-form-label', {\n 'utrecht-form-label--disabled': disabled,\n })}\n htmlFor=\"input\"\n >\n {label}\n <slot name=\"label\"></slot>\n </label>\n </p>\n <utrecht-form-field-description id=\"description\">\n <slot name=\"description\"></slot>\n </utrecht-form-field-description>\n {invalid && (\n <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n <slot name=\"error-message\"></slot>\n </utrecht-form-field-description>\n )}\n <p class=\"utrecht-form-field__input\">\n <input\n id=\"input\"\n class={clsx(\n 'utrecht-form-field__input',\n 'utrecht-textbox',\n 'utrecht-textbox--html-input',\n disabled && 'utrecht-textbox--disabled',\n invalid && 'utrecht-textbox--invalid',\n readOnly && 'utrecht-textbox--readonly',\n )}\n type={type || 'text'}\n autoComplete={autoComplete ? autoComplete : null}\n aria-describedby={clsx('description', 'status', { 'error-message': invalid })}\n aria-invalid={invalid}\n dir=\"auto\"\n disabled={disabled}\n min={typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null}\n max={typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null}\n pattern={pattern ? pattern : null}\n placeholder={placeholder || null}\n readonly={readOnly}\n required={required}\n value={value}\n onBlur={(evt) => this.utrechtBlur.emit(evt)}\n onChange={(evt) => this.utrechtChange.emit(evt)}\n onFocus={(evt) => this.utrechtFocus.emit(evt)}\n onInput={(evt) => {\n this.value = (evt.target as HTMLInputElement).value;\n this.utrechtInput.emit(evt);\n }}\n />\n </p>\n <div class=\"utrecht-form-field__status\" id=\"status\">\n <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n <slot name=\"status\"></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as clsx } from './clsx.m.js';
|
|
3
3
|
|
|
4
|
-
const formToggleCss = ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor, revert);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div: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)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle__track--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)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_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)}:host{display:inline-block}:host([hidden]){display:none !important}";
|
|
4
|
+
const formToggleCss = ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor, revert);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div: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)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle__track--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)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_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)}:host{display:inline-block}:host([hidden]){display:none !important}";
|
|
5
5
|
|
|
6
6
|
const FormToggle = /*@__PURE__*/ proxyCustomElement(class FormToggle extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,8mMAA8mM;;MCavnM,UAAU;;;;;;;;;wBACwB,KAAK;uBACN,KAAK;;IAMjD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEnC,MAAM,iBAAiB,GAAG;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC/B;SACF,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,iBAAiB,EAAE,CAAC;SACrB,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,GAAG;YACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;gBAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;aACtB;SACF,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,GAAG;YACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC3C,iBAAiB,EAAE,CAAC;aACrB;SACF,CAAC;QAEF,QACE,WACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,WAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,WAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-toggle.scss?tag=utrecht-form-toggle&encapsulation=shadow","src/components/form-toggle.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-toggle/css\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'form-toggle.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' || evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|