@public-ui/components 2.0.0-rc.5 → 2.0.0-rc.7

package/dist/kolibri/kol-icon.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as o,H as n}from"./index-9c30809b.js";import{v as c}from"./label-3e545772.js";import{d as t}from"./prop.validators-6cc65427.js";import"./a11y.tipps-ba8ae150.js";import"./dev.utils-a31cf0e4.js";import"./reuse-b3566e4c.js";const b='/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\n@font-face {\n\tfont-family: "codicon";\n\tfont-display: block;\n\tsrc: url("./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa") format("truetype");\n}\n\n.codicon[class*=\'codicon-\'] {\n\tfont: normal normal normal 16px/1 codicon;\n\tdisplay: inline-block;\n\ttext-decoration: none;\n\ttext-rendering: auto;\n\ttext-align: center;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n}\n\n/*---------------------\n *  Modifiers\n *-------------------*/\n\n@keyframes codicon-spin {\n\t100% {\n\t\ttransform:rotate(360deg);\n\t}\n}\n\n.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin {\n\t/* Use steps to throttle FPS to reduce CPU usage */\n\tanimation: codicon-spin 1.5s steps(30) infinite;\n}\n\n.codicon-modifier-disabled {\n\topacity: 0.5;\n}\n\n.codicon-modifier-hidden {\n\topacity: 0;\n}\n\n/* custom speed & easing for loading icon */\n.codicon-loading {\n\tanimation-duration: 1s !important;\n\tanimation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n/*---------------------\n *  Icons\n *-------------------*/\n\n.codicon-add:before { content: "\\ea60" }\n.codicon-plus:before { content: "\\ea60" }\n.codicon-gist-new:before { content: "\\ea60" }\n.codicon-repo-create:before { content: "\\ea60" }\n.codicon-lightbulb:before { content: "\\ea61" }\n.codicon-light-bulb:before { content: "\\ea61" }\n.codicon-repo:before { content: "\\ea62" }\n.codicon-repo-delete:before { content: "\\ea62" }\n.codicon-gist-fork:before { content: "\\ea63" }\n.codicon-repo-forked:before { content: "\\ea63" }\n.codicon-git-pull-request:before { content: "\\ea64" }\n.codicon-git-pull-request-abandoned:before { content: "\\ea64" }\n.codicon-record-keys:before { content: "\\ea65" }\n.codicon-keyboard:before { content: "\\ea65" }\n.codicon-tag:before { content: "\\ea66" }\n.codicon-tag-add:before { content: "\\ea66" }\n.codicon-tag-remove:before { content: "\\ea66" }\n.codicon-person:before { content: "\\ea67" }\n.codicon-person-follow:before { content: "\\ea67" }\n.codicon-person-outline:before { content: "\\ea67" }\n.codicon-person-filled:before { content: "\\ea67" }\n.codicon-git-branch:before { content: "\\ea68" }\n.codicon-git-branch-create:before { content: "\\ea68" }\n.codicon-git-branch-delete:before { content: "\\ea68" }\n.codicon-source-control:before { content: "\\ea68" }\n.codicon-mirror:before { content: "\\ea69" }\n.codicon-mirror-public:before { content: "\\ea69" }\n.codicon-star:before { content: "\\ea6a" }\n.codicon-star-add:before { content: "\\ea6a" }\n.codicon-star-delete:before { content: "\\ea6a" }\n.codicon-star-empty:before { content: "\\ea6a" }\n.codicon-comment:before { content: "\\ea6b" }\n.codicon-comment-add:before { content: "\\ea6b" }\n.codicon-alert:before { content: "\\ea6c" }\n.codicon-warning:before { content: "\\ea6c" }\n.codicon-search:before { content: "\\ea6d" }\n.codicon-search-save:before { content: "\\ea6d" }\n.codicon-log-out:before { content: "\\ea6e" }\n.codicon-sign-out:before { content: "\\ea6e" }\n.codicon-log-in:before { content: "\\ea6f" }\n.codicon-sign-in:before { content: "\\ea6f" }\n.codicon-eye:before { content: "\\ea70" }\n.codicon-eye-unwatch:before { content: "\\ea70" }\n.codicon-eye-watch:before { content: "\\ea70" }\n.codicon-circle-filled:before { content: "\\ea71" }\n.codicon-primitive-dot:before { content: "\\ea71" }\n.codicon-close-dirty:before { content: "\\ea71" }\n.codicon-debug-breakpoint:before { content: "\\ea71" }\n.codicon-debug-breakpoint-disabled:before { content: "\\ea71" }\n.codicon-debug-hint:before { content: "\\ea71" }\n.codicon-primitive-square:before { content: "\\ea72" }\n.codicon-edit:before { content: "\\ea73" }\n.codicon-pencil:before { content: "\\ea73" }\n.codicon-info:before { content: "\\ea74" }\n.codicon-issue-opened:before { content: "\\ea74" }\n.codicon-gist-private:before { content: "\\ea75" }\n.codicon-git-fork-private:before { content: "\\ea75" }\n.codicon-lock:before { content: "\\ea75" }\n.codicon-mirror-private:before { content: "\\ea75" }\n.codicon-close:before { content: "\\ea76" }\n.codicon-remove-close:before { content: "\\ea76" }\n.codicon-x:before { content: "\\ea76" }\n.codicon-repo-sync:before { content: "\\ea77" }\n.codicon-sync:before { content: "\\ea77" }\n.codicon-clone:before { content: "\\ea78" }\n.codicon-desktop-download:before { content: "\\ea78" }\n.codicon-beaker:before { content: "\\ea79" }\n.codicon-microscope:before { content: "\\ea79" }\n.codicon-vm:before { content: "\\ea7a" }\n.codicon-device-desktop:before { content: "\\ea7a" }\n.codicon-file:before { content: "\\ea7b" }\n.codicon-file-text:before { content: "\\ea7b" }\n.codicon-more:before { content: "\\ea7c" }\n.codicon-ellipsis:before { content: "\\ea7c" }\n.codicon-kebab-horizontal:before { content: "\\ea7c" }\n.codicon-mail-reply:before { content: "\\ea7d" }\n.codicon-reply:before { content: "\\ea7d" }\n.codicon-organization:before { content: "\\ea7e" }\n.codicon-organization-filled:before { content: "\\ea7e" }\n.codicon-organization-outline:before { content: "\\ea7e" }\n.codicon-new-file:before { content: "\\ea7f" }\n.codicon-file-add:before { content: "\\ea7f" }\n.codicon-new-folder:before { content: "\\ea80" }\n.codicon-file-directory-create:before { content: "\\ea80" }\n.codicon-trash:before { content: "\\ea81" }\n.codicon-trashcan:before { content: "\\ea81" }\n.codicon-history:before { content: "\\ea82" }\n.codicon-clock:before { content: "\\ea82" }\n.codicon-folder:before { content: "\\ea83" }\n.codicon-file-directory:before { content: "\\ea83" }\n.codicon-symbol-folder:before { content: "\\ea83" }\n.codicon-logo-github:before { content: "\\ea84" }\n.codicon-mark-github:before { content: "\\ea84" }\n.codicon-github:before { content: "\\ea84" }\n.codicon-terminal:before { content: "\\ea85" }\n.codicon-console:before { content: "\\ea85" }\n.codicon-repl:before { content: "\\ea85" }\n.codicon-zap:before { content: "\\ea86" }\n.codicon-symbol-event:before { content: "\\ea86" }\n.codicon-error:before { content: "\\ea87" }\n.codicon-stop:before { content: "\\ea87" }\n.codicon-variable:before { content: "\\ea88" }\n.codicon-symbol-variable:before { content: "\\ea88" }\n.codicon-array:before { content: "\\ea8a" }\n.codicon-symbol-array:before { content: "\\ea8a" }\n.codicon-symbol-module:before { content: "\\ea8b" }\n.codicon-symbol-package:before { content: "\\ea8b" }\n.codicon-symbol-namespace:before { content: "\\ea8b" }\n.codicon-symbol-object:before { content: "\\ea8b" }\n.codicon-symbol-method:before { content: "\\ea8c" }\n.codicon-symbol-function:before { content: "\\ea8c" }\n.codicon-symbol-constructor:before { content: "\\ea8c" }\n.codicon-symbol-boolean:before { content: "\\ea8f" }\n.codicon-symbol-null:before { content: "\\ea8f" }\n.codicon-symbol-numeric:before { content: "\\ea90" }\n.codicon-symbol-number:before { content: "\\ea90" }\n.codicon-symbol-structure:before { content: "\\ea91" }\n.codicon-symbol-struct:before { content: "\\ea91" }\n.codicon-symbol-parameter:before { content: "\\ea92" }\n.codicon-symbol-type-parameter:before { content: "\\ea92" }\n.codicon-symbol-key:before { content: "\\ea93" }\n.codicon-symbol-text:before { content: "\\ea93" }\n.codicon-symbol-reference:before { content: "\\ea94" }\n.codicon-go-to-file:before { content: "\\ea94" }\n.codicon-symbol-enum:before { content: "\\ea95" }\n.codicon-symbol-value:before { content: "\\ea95" }\n.codicon-symbol-ruler:before { content: "\\ea96" }\n.codicon-symbol-unit:before { content: "\\ea96" }\n.codicon-activate-breakpoints:before { content: "\\ea97" }\n.codicon-archive:before { content: "\\ea98" }\n.codicon-arrow-both:before { content: "\\ea99" }\n.codicon-arrow-down:before { content: "\\ea9a" }\n.codicon-arrow-left:before { content: "\\ea9b" }\n.codicon-arrow-right:before { content: "\\ea9c" }\n.codicon-arrow-small-down:before { content: "\\ea9d" }\n.codicon-arrow-small-left:before { content: "\\ea9e" }\n.codicon-arrow-small-right:before { content: "\\ea9f" }\n.codicon-arrow-small-up:before { content: "\\eaa0" }\n.codicon-arrow-up:before { content: "\\eaa1" }\n.codicon-bell:before { content: "\\eaa2" }\n.codicon-bold:before { content: "\\eaa3" }\n.codicon-book:before { content: "\\eaa4" }\n.codicon-bookmark:before { content: "\\eaa5" }\n.codicon-debug-breakpoint-conditional-unverified:before { content: "\\eaa6" }\n.codicon-debug-breakpoint-conditional:before { content: "\\eaa7" }\n.codicon-debug-breakpoint-conditional-disabled:before { content: "\\eaa7" }\n.codicon-debug-breakpoint-data-unverified:before { content: "\\eaa8" }\n.codicon-debug-breakpoint-data:before { content: "\\eaa9" }\n.codicon-debug-breakpoint-data-disabled:before { content: "\\eaa9" }\n.codicon-debug-breakpoint-log-unverified:before { content: "\\eaaa" }\n.codicon-debug-breakpoint-log:before { content: "\\eaab" }\n.codicon-debug-breakpoint-log-disabled:before { content: "\\eaab" }\n.codicon-briefcase:before { content: "\\eaac" }\n.codicon-broadcast:before { content: "\\eaad" }\n.codicon-browser:before { content: "\\eaae" }\n.codicon-bug:before { content: "\\eaaf" }\n.codicon-calendar:before { content: "\\eab0" }\n.codicon-case-sensitive:before { content: "\\eab1" }\n.codicon-check:before { content: "\\eab2" }\n.codicon-checklist:before { content: "\\eab3" }\n.codicon-chevron-down:before { content: "\\eab4" }\n.codicon-chevron-left:before { content: "\\eab5" }\n.codicon-chevron-right:before { content: "\\eab6" }\n.codicon-chevron-up:before { content: "\\eab7" }\n.codicon-chrome-close:before { content: "\\eab8" }\n.codicon-chrome-maximize:before { content: "\\eab9" }\n.codicon-chrome-minimize:before { content: "\\eaba" }\n.codicon-chrome-restore:before { content: "\\eabb" }\n.codicon-circle-outline:before { content: "\\eabc" }\n.codicon-debug-breakpoint-unverified:before { content: "\\eabc" }\n.codicon-circle-slash:before { content: "\\eabd" }\n.codicon-circuit-board:before { content: "\\eabe" }\n.codicon-clear-all:before { content: "\\eabf" }\n.codicon-clippy:before { content: "\\eac0" }\n.codicon-close-all:before { content: "\\eac1" }\n.codicon-cloud-download:before { content: "\\eac2" }\n.codicon-cloud-upload:before { content: "\\eac3" }\n.codicon-code:before { content: "\\eac4" }\n.codicon-collapse-all:before { content: "\\eac5" }\n.codicon-color-mode:before { content: "\\eac6" }\n.codicon-comment-discussion:before { content: "\\eac7" }\n.codicon-credit-card:before { content: "\\eac9" }\n.codicon-dash:before { content: "\\eacc" }\n.codicon-dashboard:before { content: "\\eacd" }\n.codicon-database:before { content: "\\eace" }\n.codicon-debug-continue:before { content: "\\eacf" }\n.codicon-debug-disconnect:before { content: "\\ead0" }\n.codicon-debug-pause:before { content: "\\ead1" }\n.codicon-debug-restart:before { content: "\\ead2" }\n.codicon-debug-start:before { content: "\\ead3" }\n.codicon-debug-step-into:before { content: "\\ead4" }\n.codicon-debug-step-out:before { content: "\\ead5" }\n.codicon-debug-step-over:before { content: "\\ead6" }\n.codicon-debug-stop:before { content: "\\ead7" }\n.codicon-debug:before { content: "\\ead8" }\n.codicon-device-camera-video:before { content: "\\ead9" }\n.codicon-device-camera:before { content: "\\eada" }\n.codicon-device-mobile:before { content: "\\eadb" }\n.codicon-diff-added:before { content: "\\eadc" }\n.codicon-diff-ignored:before { content: "\\eadd" }\n.codicon-diff-modified:before { content: "\\eade" }\n.codicon-diff-removed:before { content: "\\eadf" }\n.codicon-diff-renamed:before { content: "\\eae0" }\n.codicon-diff:before { content: "\\eae1" }\n.codicon-discard:before { content: "\\eae2" }\n.codicon-editor-layout:before { content: "\\eae3" }\n.codicon-empty-window:before { content: "\\eae4" }\n.codicon-exclude:before { content: "\\eae5" }\n.codicon-extensions:before { content: "\\eae6" }\n.codicon-eye-closed:before { content: "\\eae7" }\n.codicon-file-binary:before { content: "\\eae8" }\n.codicon-file-code:before { content: "\\eae9" }\n.codicon-file-media:before { content: "\\eaea" }\n.codicon-file-pdf:before { content: "\\eaeb" }\n.codicon-file-submodule:before { content: "\\eaec" }\n.codicon-file-symlink-directory:before { content: "\\eaed" }\n.codicon-file-symlink-file:before { content: "\\eaee" }\n.codicon-file-zip:before { content: "\\eaef" }\n.codicon-files:before { content: "\\eaf0" }\n.codicon-filter:before { content: "\\eaf1" }\n.codicon-flame:before { content: "\\eaf2" }\n.codicon-fold-down:before { content: "\\eaf3" }\n.codicon-fold-up:before { content: "\\eaf4" }\n.codicon-fold:before { content: "\\eaf5" }\n.codicon-folder-active:before { content: "\\eaf6" }\n.codicon-folder-opened:before { content: "\\eaf7" }\n.codicon-gear:before { content: "\\eaf8" }\n.codicon-gift:before { content: "\\eaf9" }\n.codicon-gist-secret:before { content: "\\eafa" }\n.codicon-gist:before { content: "\\eafb" }\n.codicon-git-commit:before { content: "\\eafc" }\n.codicon-git-compare:before { content: "\\eafd" }\n.codicon-compare-changes:before { content: "\\eafd" }\n.codicon-git-merge:before { content: "\\eafe" }\n.codicon-github-action:before { content: "\\eaff" }\n.codicon-github-alt:before { content: "\\eb00" }\n.codicon-globe:before { content: "\\eb01" }\n.codicon-grabber:before { content: "\\eb02" }\n.codicon-graph:before { content: "\\eb03" }\n.codicon-gripper:before { content: "\\eb04" }\n.codicon-heart:before { content: "\\eb05" }\n.codicon-home:before { content: "\\eb06" }\n.codicon-horizontal-rule:before { content: "\\eb07" }\n.codicon-hubot:before { content: "\\eb08" }\n.codicon-inbox:before { content: "\\eb09" }\n.codicon-issue-reopened:before { content: "\\eb0b" }\n.codicon-issues:before { content: "\\eb0c" }\n.codicon-italic:before { content: "\\eb0d" }\n.codicon-jersey:before { content: "\\eb0e" }\n.codicon-json:before { content: "\\eb0f" }\n.codicon-kebab-vertical:before { content: "\\eb10" }\n.codicon-key:before { content: "\\eb11" }\n.codicon-law:before { content: "\\eb12" }\n.codicon-lightbulb-autofix:before { content: "\\eb13" }\n.codicon-link-external:before { content: "\\eb14" }\n.codicon-link:before { content: "\\eb15" }\n.codicon-list-ordered:before { content: "\\eb16" }\n.codicon-list-unordered:before { content: "\\eb17" }\n.codicon-live-share:before { content: "\\eb18" }\n.codicon-loading:before { content: "\\eb19" }\n.codicon-location:before { content: "\\eb1a" }\n.codicon-mail-read:before { content: "\\eb1b" }\n.codicon-mail:before { content: "\\eb1c" }\n.codicon-markdown:before { content: "\\eb1d" }\n.codicon-megaphone:before { content: "\\eb1e" }\n.codicon-mention:before { content: "\\eb1f" }\n.codicon-milestone:before { content: "\\eb20" }\n.codicon-mortar-board:before { content: "\\eb21" }\n.codicon-move:before { content: "\\eb22" }\n.codicon-multiple-windows:before { content: "\\eb23" }\n.codicon-mute:before { content: "\\eb24" }\n.codicon-no-newline:before { content: "\\eb25" }\n.codicon-note:before { content: "\\eb26" }\n.codicon-octoface:before { content: "\\eb27" }\n.codicon-open-preview:before { content: "\\eb28" }\n.codicon-package:before { content: "\\eb29" }\n.codicon-paintcan:before { content: "\\eb2a" }\n.codicon-pin:before { content: "\\eb2b" }\n.codicon-play:before { content: "\\eb2c" }\n.codicon-run:before { content: "\\eb2c" }\n.codicon-plug:before { content: "\\eb2d" }\n.codicon-preserve-case:before { content: "\\eb2e" }\n.codicon-preview:before { content: "\\eb2f" }\n.codicon-project:before { content: "\\eb30" }\n.codicon-pulse:before { content: "\\eb31" }\n.codicon-question:before { content: "\\eb32" }\n.codicon-quote:before { content: "\\eb33" }\n.codicon-radio-tower:before { content: "\\eb34" }\n.codicon-reactions:before { content: "\\eb35" }\n.codicon-references:before { content: "\\eb36" }\n.codicon-refresh:before { content: "\\eb37" }\n.codicon-regex:before { content: "\\eb38" }\n.codicon-remote-explorer:before { content: "\\eb39" }\n.codicon-remote:before { content: "\\eb3a" }\n.codicon-remove:before { content: "\\eb3b" }\n.codicon-replace-all:before { content: "\\eb3c" }\n.codicon-replace:before { content: "\\eb3d" }\n.codicon-repo-clone:before { content: "\\eb3e" }\n.codicon-repo-force-push:before { content: "\\eb3f" }\n.codicon-repo-pull:before { content: "\\eb40" }\n.codicon-repo-push:before { content: "\\eb41" }\n.codicon-report:before { content: "\\eb42" }\n.codicon-request-changes:before { content: "\\eb43" }\n.codicon-rocket:before { content: "\\eb44" }\n.codicon-root-folder-opened:before { content: "\\eb45" }\n.codicon-root-folder:before { content: "\\eb46" }\n.codicon-rss:before { content: "\\eb47" }\n.codicon-ruby:before { content: "\\eb48" }\n.codicon-save-all:before { content: "\\eb49" }\n.codicon-save-as:before { content: "\\eb4a" }\n.codicon-save:before { content: "\\eb4b" }\n.codicon-screen-full:before { content: "\\eb4c" }\n.codicon-screen-normal:before { content: "\\eb4d" }\n.codicon-search-stop:before { content: "\\eb4e" }\n.codicon-server:before { content: "\\eb50" }\n.codicon-settings-gear:before { content: "\\eb51" }\n.codicon-settings:before { content: "\\eb52" }\n.codicon-shield:before { content: "\\eb53" }\n.codicon-smiley:before { content: "\\eb54" }\n.codicon-sort-precedence:before { content: "\\eb55" }\n.codicon-split-horizontal:before { content: "\\eb56" }\n.codicon-split-vertical:before { content: "\\eb57" }\n.codicon-squirrel:before { content: "\\eb58" }\n.codicon-star-full:before { content: "\\eb59" }\n.codicon-star-half:before { content: "\\eb5a" }\n.codicon-symbol-class:before { content: "\\eb5b" }\n.codicon-symbol-color:before { content: "\\eb5c" }\n.codicon-symbol-constant:before { content: "\\eb5d" }\n.codicon-symbol-enum-member:before { content: "\\eb5e" }\n.codicon-symbol-field:before { content: "\\eb5f" }\n.codicon-symbol-file:before { content: "\\eb60" }\n.codicon-symbol-interface:before { content: "\\eb61" }\n.codicon-symbol-keyword:before { content: "\\eb62" }\n.codicon-symbol-misc:before { content: "\\eb63" }\n.codicon-symbol-operator:before { content: "\\eb64" }\n.codicon-symbol-property:before { content: "\\eb65" }\n.codicon-wrench:before { content: "\\eb65" }\n.codicon-wrench-subaction:before { content: "\\eb65" }\n.codicon-symbol-snippet:before { content: "\\eb66" }\n.codicon-tasklist:before { content: "\\eb67" }\n.codicon-telescope:before { content: "\\eb68" }\n.codicon-text-size:before { content: "\\eb69" }\n.codicon-three-bars:before { content: "\\eb6a" }\n.codicon-thumbsdown:before { content: "\\eb6b" }\n.codicon-thumbsup:before { content: "\\eb6c" }\n.codicon-tools:before { content: "\\eb6d" }\n.codicon-triangle-down:before { content: "\\eb6e" }\n.codicon-triangle-left:before { content: "\\eb6f" }\n.codicon-triangle-right:before { content: "\\eb70" }\n.codicon-triangle-up:before { content: "\\eb71" }\n.codicon-twitter:before { content: "\\eb72" }\n.codicon-unfold:before { content: "\\eb73" }\n.codicon-unlock:before { content: "\\eb74" }\n.codicon-unmute:before { content: "\\eb75" }\n.codicon-unverified:before { content: "\\eb76" }\n.codicon-verified:before { content: "\\eb77" }\n.codicon-versions:before { content: "\\eb78" }\n.codicon-vm-active:before { content: "\\eb79" }\n.codicon-vm-outline:before { content: "\\eb7a" }\n.codicon-vm-running:before { content: "\\eb7b" }\n.codicon-watch:before { content: "\\eb7c" }\n.codicon-whitespace:before { content: "\\eb7d" }\n.codicon-whole-word:before { content: "\\eb7e" }\n.codicon-window:before { content: "\\eb7f" }\n.codicon-word-wrap:before { content: "\\eb80" }\n.codicon-zoom-in:before { content: "\\eb81" }\n.codicon-zoom-out:before { content: "\\eb82" }\n.codicon-list-filter:before { content: "\\eb83" }\n.codicon-list-flat:before { content: "\\eb84" }\n.codicon-list-selection:before { content: "\\eb85" }\n.codicon-selection:before { content: "\\eb85" }\n.codicon-list-tree:before { content: "\\eb86" }\n.codicon-debug-breakpoint-function-unverified:before { content: "\\eb87" }\n.codicon-debug-breakpoint-function:before { content: "\\eb88" }\n.codicon-debug-breakpoint-function-disabled:before { content: "\\eb88" }\n.codicon-debug-stackframe-active:before { content: "\\eb89" }\n.codicon-circle-small-filled:before { content: "\\eb8a" }\n.codicon-debug-stackframe-dot:before { content: "\\eb8a" }\n.codicon-debug-stackframe:before { content: "\\eb8b" }\n.codicon-debug-stackframe-focused:before { content: "\\eb8b" }\n.codicon-debug-breakpoint-unsupported:before { content: "\\eb8c" }\n.codicon-symbol-string:before { content: "\\eb8d" }\n.codicon-debug-reverse-continue:before { content: "\\eb8e" }\n.codicon-debug-step-back:before { content: "\\eb8f" }\n.codicon-debug-restart-frame:before { content: "\\eb90" }\n.codicon-debug-alt:before { content: "\\eb91" }\n.codicon-call-incoming:before { content: "\\eb92" }\n.codicon-call-outgoing:before { content: "\\eb93" }\n.codicon-menu:before { content: "\\eb94" }\n.codicon-expand-all:before { content: "\\eb95" }\n.codicon-feedback:before { content: "\\eb96" }\n.codicon-group-by-ref-type:before { content: "\\eb97" }\n.codicon-ungroup-by-ref-type:before { content: "\\eb98" }\n.codicon-account:before { content: "\\eb99" }\n.codicon-bell-dot:before { content: "\\eb9a" }\n.codicon-debug-console:before { content: "\\eb9b" }\n.codicon-library:before { content: "\\eb9c" }\n.codicon-output:before { content: "\\eb9d" }\n.codicon-run-all:before { content: "\\eb9e" }\n.codicon-sync-ignored:before { content: "\\eb9f" }\n.codicon-pinned:before { content: "\\eba0" }\n.codicon-github-inverted:before { content: "\\eba1" }\n.codicon-server-process:before { content: "\\eba2" }\n.codicon-server-environment:before { content: "\\eba3" }\n.codicon-pass:before { content: "\\eba4" }\n.codicon-issue-closed:before { content: "\\eba4" }\n.codicon-stop-circle:before { content: "\\eba5" }\n.codicon-play-circle:before { content: "\\eba6" }\n.codicon-record:before { content: "\\eba7" }\n.codicon-debug-alt-small:before { content: "\\eba8" }\n.codicon-vm-connect:before { content: "\\eba9" }\n.codicon-cloud:before { content: "\\ebaa" }\n.codicon-merge:before { content: "\\ebab" }\n.codicon-export:before { content: "\\ebac" }\n.codicon-graph-left:before { content: "\\ebad" }\n.codicon-magnet:before { content: "\\ebae" }\n.codicon-notebook:before { content: "\\ebaf" }\n.codicon-redo:before { content: "\\ebb0" }\n.codicon-check-all:before { content: "\\ebb1" }\n.codicon-pinned-dirty:before { content: "\\ebb2" }\n.codicon-pass-filled:before { content: "\\ebb3" }\n.codicon-circle-large-filled:before { content: "\\ebb4" }\n.codicon-circle-large-outline:before { content: "\\ebb5" }\n.codicon-combine:before { content: "\\ebb6" }\n.codicon-gather:before { content: "\\ebb6" }\n.codicon-table:before { content: "\\ebb7" }\n.codicon-variable-group:before { content: "\\ebb8" }\n.codicon-type-hierarchy:before { content: "\\ebb9" }\n.codicon-type-hierarchy-sub:before { content: "\\ebba" }\n.codicon-type-hierarchy-super:before { content: "\\ebbb" }\n.codicon-git-pull-request-create:before { content: "\\ebbc" }\n.codicon-run-above:before { content: "\\ebbd" }\n.codicon-run-below:before { content: "\\ebbe" }\n.codicon-notebook-template:before { content: "\\ebbf" }\n.codicon-debug-rerun:before { content: "\\ebc0" }\n.codicon-workspace-trusted:before { content: "\\ebc1" }\n.codicon-workspace-untrusted:before { content: "\\ebc2" }\n.codicon-workspace-unknown:before { content: "\\ebc3" }\n.codicon-terminal-cmd:before { content: "\\ebc4" }\n.codicon-terminal-debian:before { content: "\\ebc5" }\n.codicon-terminal-linux:before { content: "\\ebc6" }\n.codicon-terminal-powershell:before { content: "\\ebc7" }\n.codicon-terminal-tmux:before { content: "\\ebc8" }\n.codicon-terminal-ubuntu:before { content: "\\ebc9" }\n.codicon-terminal-bash:before { content: "\\ebca" }\n.codicon-arrow-swap:before { content: "\\ebcb" }\n.codicon-copy:before { content: "\\ebcc" }\n.codicon-person-add:before { content: "\\ebcd" }\n.codicon-filter-filled:before { content: "\\ebce" }\n.codicon-wand:before { content: "\\ebcf" }\n.codicon-debug-line-by-line:before { content: "\\ebd0" }\n.codicon-inspect:before { content: "\\ebd1" }\n.codicon-layers:before { content: "\\ebd2" }\n.codicon-layers-dot:before { content: "\\ebd3" }\n.codicon-layers-active:before { content: "\\ebd4" }\n.codicon-compass:before { content: "\\ebd5" }\n.codicon-compass-dot:before { content: "\\ebd6" }\n.codicon-compass-active:before { content: "\\ebd7" }\n.codicon-azure:before { content: "\\ebd8" }\n.codicon-issue-draft:before { content: "\\ebd9" }\n.codicon-git-pull-request-closed:before { content: "\\ebda" }\n.codicon-git-pull-request-draft:before { content: "\\ebdb" }\n.codicon-debug-all:before { content: "\\ebdc" }\n.codicon-debug-coverage:before { content: "\\ebdd" }\n.codicon-run-errors:before { content: "\\ebde" }\n.codicon-folder-library:before { content: "\\ebdf" }\n.codicon-debug-continue-small:before { content: "\\ebe0" }\n.codicon-beaker-stop:before { content: "\\ebe1" }\n.codicon-graph-line:before { content: "\\ebe2" }\n.codicon-graph-scatter:before { content: "\\ebe3" }\n.codicon-pie-chart:before { content: "\\ebe4" }\n.codicon-bracket:before { content: "\\eb0f" }\n.codicon-bracket-dot:before { content: "\\ebe5" }\n.codicon-bracket-error:before { content: "\\ebe6" }\n.codicon-lock-small:before { content: "\\ebe7" }\n.codicon-azure-devops:before { content: "\\ebe8" }\n.codicon-verified-filled:before { content: "\\ebe9" }\n.codicon-newline:before { content: "\\ebea" }\n.codicon-layout:before { content: "\\ebeb" }\n.codicon-layout-activitybar-left:before { content: "\\ebec" }\n.codicon-layout-activitybar-right:before { content: "\\ebed" }\n.codicon-layout-panel-left:before { content: "\\ebee" }\n.codicon-layout-panel-center:before { content: "\\ebef" }\n.codicon-layout-panel-justify:before { content: "\\ebf0" }\n.codicon-layout-panel-right:before { content: "\\ebf1" }\n.codicon-layout-panel:before { content: "\\ebf2" }\n.codicon-layout-sidebar-left:before { content: "\\ebf3" }\n.codicon-layout-sidebar-right:before { content: "\\ebf4" }\n.codicon-layout-statusbar:before { content: "\\ebf5" }\n.codicon-layout-menubar:before { content: "\\ebf6" }\n.codicon-layout-centered:before { content: "\\ebf7" }\n.codicon-target:before { content: "\\ebf8" }\n.codicon-indent:before { content: "\\ebf9" }\n.codicon-record-small:before { content: "\\ebfa" }\n.codicon-error-small:before { content: "\\ebfb" }\n.codicon-arrow-circle-down:before { content: "\\ebfc" }\n.codicon-arrow-circle-left:before { content: "\\ebfd" }\n.codicon-arrow-circle-right:before { content: "\\ebfe" }\n.codicon-arrow-circle-up:before { content: "\\ebff" }\n.codicon-layout-sidebar-right-off:before { content: "\\ec00" }\n.codicon-layout-panel-off:before { content: "\\ec01" }\n.codicon-layout-sidebar-left-off:before { content: "\\ec02" }\n.codicon-blank:before { content: "\\ec03" }\n.codicon-heart-filled:before { content: "\\ec04" }\n.codicon-map:before { content: "\\ec05" }\n.codicon-map-filled:before { content: "\\ec06" }\n.codicon-circle-small:before { content: "\\ec07" }\n.codicon-bell-slash:before { content: "\\ec08" }\n.codicon-bell-slash-dot:before { content: "\\ec09" }\n.codicon-comment-unresolved:before { content: "\\ec0a" }\n.codicon-git-pull-request-go-to-changes:before { content: "\\ec0b" }\n.codicon-git-pull-request-new-changes:before { content: "\\ec0c" }\n\n@layer kol-component {\n\t:host {\n\t\tcolor: inherit;\n\t\tdisplay: contents;\n\t\theight: 1em;\n\t\tline-height: inherit;\n\t\twidth: 1em;\n\t}\n\n\t:host > i {\n\t\theight: 1em;\n\t\twidth: 1em;\n\t}\n\n\t/*\n   * The <code>:important</code> is important, because we should always override the font icon style.\n   */\n\t:host > i,\n\t:host > i:before {\n\t\tfont-size: inherit !important;\n\t}\n}\n',r=class{constructor(o){e(this,o),this._icons=void 0,this._label=void 0,this.state={_icons:"codicon codicon-home",_label:""}}render(){const e=this.state._label.length>0;return o(n,{exportparts:"icon"},o("i",{"aria-hidden":e?void 0:"true","aria-label":e?this.state._label:void 0,class:this.state._icons,part:"icon",role:"img"}))}validateIcons(e){t(this,"_icons",e)}validateLabel(e){c(this,e)}componentWillLoad(){this.validateIcons(this._icons),this.validateLabel(this._label)}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}};r.style={default:b};export{r as kol_icon};
+import{r as e,h as o,H as n}from"./index-9c30809b.js";import{v as c}from"./label-d63f8231.js";import{d as t}from"./prop.validators-9bbd95a9.js";import"./a11y.tipps-29a5e350.js";import"./dev.utils-365879e7.js";import"./reuse-b3566e4c.js";const b='/*---------------------------------------------------------------------------------------------\n *  Copyright (c) Microsoft Corporation. All rights reserved.\n *  Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n\n@font-face {\n\tfont-family: "codicon";\n\tfont-display: block;\n\tsrc: url("./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa") format("truetype");\n}\n\n.codicon[class*=\'codicon-\'] {\n\tfont: normal normal normal 16px/1 codicon;\n\tdisplay: inline-block;\n\ttext-decoration: none;\n\ttext-rendering: auto;\n\ttext-align: center;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\tuser-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n}\n\n/*---------------------\n *  Modifiers\n *-------------------*/\n\n@keyframes codicon-spin {\n\t100% {\n\t\ttransform:rotate(360deg);\n\t}\n}\n\n.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin {\n\t/* Use steps to throttle FPS to reduce CPU usage */\n\tanimation: codicon-spin 1.5s steps(30) infinite;\n}\n\n.codicon-modifier-disabled {\n\topacity: 0.5;\n}\n\n.codicon-modifier-hidden {\n\topacity: 0;\n}\n\n/* custom speed & easing for loading icon */\n.codicon-loading {\n\tanimation-duration: 1s !important;\n\tanimation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n/*---------------------\n *  Icons\n *-------------------*/\n\n.codicon-add:before { content: "\\ea60" }\n.codicon-plus:before { content: "\\ea60" }\n.codicon-gist-new:before { content: "\\ea60" }\n.codicon-repo-create:before { content: "\\ea60" }\n.codicon-lightbulb:before { content: "\\ea61" }\n.codicon-light-bulb:before { content: "\\ea61" }\n.codicon-repo:before { content: "\\ea62" }\n.codicon-repo-delete:before { content: "\\ea62" }\n.codicon-gist-fork:before { content: "\\ea63" }\n.codicon-repo-forked:before { content: "\\ea63" }\n.codicon-git-pull-request:before { content: "\\ea64" }\n.codicon-git-pull-request-abandoned:before { content: "\\ea64" }\n.codicon-record-keys:before { content: "\\ea65" }\n.codicon-keyboard:before { content: "\\ea65" }\n.codicon-tag:before { content: "\\ea66" }\n.codicon-tag-add:before { content: "\\ea66" }\n.codicon-tag-remove:before { content: "\\ea66" }\n.codicon-person:before { content: "\\ea67" }\n.codicon-person-follow:before { content: "\\ea67" }\n.codicon-person-outline:before { content: "\\ea67" }\n.codicon-person-filled:before { content: "\\ea67" }\n.codicon-git-branch:before { content: "\\ea68" }\n.codicon-git-branch-create:before { content: "\\ea68" }\n.codicon-git-branch-delete:before { content: "\\ea68" }\n.codicon-source-control:before { content: "\\ea68" }\n.codicon-mirror:before { content: "\\ea69" }\n.codicon-mirror-public:before { content: "\\ea69" }\n.codicon-star:before { content: "\\ea6a" }\n.codicon-star-add:before { content: "\\ea6a" }\n.codicon-star-delete:before { content: "\\ea6a" }\n.codicon-star-empty:before { content: "\\ea6a" }\n.codicon-comment:before { content: "\\ea6b" }\n.codicon-comment-add:before { content: "\\ea6b" }\n.codicon-alert:before { content: "\\ea6c" }\n.codicon-warning:before { content: "\\ea6c" }\n.codicon-search:before { content: "\\ea6d" }\n.codicon-search-save:before { content: "\\ea6d" }\n.codicon-log-out:before { content: "\\ea6e" }\n.codicon-sign-out:before { content: "\\ea6e" }\n.codicon-log-in:before { content: "\\ea6f" }\n.codicon-sign-in:before { content: "\\ea6f" }\n.codicon-eye:before { content: "\\ea70" }\n.codicon-eye-unwatch:before { content: "\\ea70" }\n.codicon-eye-watch:before { content: "\\ea70" }\n.codicon-circle-filled:before { content: "\\ea71" }\n.codicon-primitive-dot:before { content: "\\ea71" }\n.codicon-close-dirty:before { content: "\\ea71" }\n.codicon-debug-breakpoint:before { content: "\\ea71" }\n.codicon-debug-breakpoint-disabled:before { content: "\\ea71" }\n.codicon-debug-hint:before { content: "\\ea71" }\n.codicon-primitive-square:before { content: "\\ea72" }\n.codicon-edit:before { content: "\\ea73" }\n.codicon-pencil:before { content: "\\ea73" }\n.codicon-info:before { content: "\\ea74" }\n.codicon-issue-opened:before { content: "\\ea74" }\n.codicon-gist-private:before { content: "\\ea75" }\n.codicon-git-fork-private:before { content: "\\ea75" }\n.codicon-lock:before { content: "\\ea75" }\n.codicon-mirror-private:before { content: "\\ea75" }\n.codicon-close:before { content: "\\ea76" }\n.codicon-remove-close:before { content: "\\ea76" }\n.codicon-x:before { content: "\\ea76" }\n.codicon-repo-sync:before { content: "\\ea77" }\n.codicon-sync:before { content: "\\ea77" }\n.codicon-clone:before { content: "\\ea78" }\n.codicon-desktop-download:before { content: "\\ea78" }\n.codicon-beaker:before { content: "\\ea79" }\n.codicon-microscope:before { content: "\\ea79" }\n.codicon-vm:before { content: "\\ea7a" }\n.codicon-device-desktop:before { content: "\\ea7a" }\n.codicon-file:before { content: "\\ea7b" }\n.codicon-file-text:before { content: "\\ea7b" }\n.codicon-more:before { content: "\\ea7c" }\n.codicon-ellipsis:before { content: "\\ea7c" }\n.codicon-kebab-horizontal:before { content: "\\ea7c" }\n.codicon-mail-reply:before { content: "\\ea7d" }\n.codicon-reply:before { content: "\\ea7d" }\n.codicon-organization:before { content: "\\ea7e" }\n.codicon-organization-filled:before { content: "\\ea7e" }\n.codicon-organization-outline:before { content: "\\ea7e" }\n.codicon-new-file:before { content: "\\ea7f" }\n.codicon-file-add:before { content: "\\ea7f" }\n.codicon-new-folder:before { content: "\\ea80" }\n.codicon-file-directory-create:before { content: "\\ea80" }\n.codicon-trash:before { content: "\\ea81" }\n.codicon-trashcan:before { content: "\\ea81" }\n.codicon-history:before { content: "\\ea82" }\n.codicon-clock:before { content: "\\ea82" }\n.codicon-folder:before { content: "\\ea83" }\n.codicon-file-directory:before { content: "\\ea83" }\n.codicon-symbol-folder:before { content: "\\ea83" }\n.codicon-logo-github:before { content: "\\ea84" }\n.codicon-mark-github:before { content: "\\ea84" }\n.codicon-github:before { content: "\\ea84" }\n.codicon-terminal:before { content: "\\ea85" }\n.codicon-console:before { content: "\\ea85" }\n.codicon-repl:before { content: "\\ea85" }\n.codicon-zap:before { content: "\\ea86" }\n.codicon-symbol-event:before { content: "\\ea86" }\n.codicon-error:before { content: "\\ea87" }\n.codicon-stop:before { content: "\\ea87" }\n.codicon-variable:before { content: "\\ea88" }\n.codicon-symbol-variable:before { content: "\\ea88" }\n.codicon-array:before { content: "\\ea8a" }\n.codicon-symbol-array:before { content: "\\ea8a" }\n.codicon-symbol-module:before { content: "\\ea8b" }\n.codicon-symbol-package:before { content: "\\ea8b" }\n.codicon-symbol-namespace:before { content: "\\ea8b" }\n.codicon-symbol-object:before { content: "\\ea8b" }\n.codicon-symbol-method:before { content: "\\ea8c" }\n.codicon-symbol-function:before { content: "\\ea8c" }\n.codicon-symbol-constructor:before { content: "\\ea8c" }\n.codicon-symbol-boolean:before { content: "\\ea8f" }\n.codicon-symbol-null:before { content: "\\ea8f" }\n.codicon-symbol-numeric:before { content: "\\ea90" }\n.codicon-symbol-number:before { content: "\\ea90" }\n.codicon-symbol-structure:before { content: "\\ea91" }\n.codicon-symbol-struct:before { content: "\\ea91" }\n.codicon-symbol-parameter:before { content: "\\ea92" }\n.codicon-symbol-type-parameter:before { content: "\\ea92" }\n.codicon-symbol-key:before { content: "\\ea93" }\n.codicon-symbol-text:before { content: "\\ea93" }\n.codicon-symbol-reference:before { content: "\\ea94" }\n.codicon-go-to-file:before { content: "\\ea94" }\n.codicon-symbol-enum:before { content: "\\ea95" }\n.codicon-symbol-value:before { content: "\\ea95" }\n.codicon-symbol-ruler:before { content: "\\ea96" }\n.codicon-symbol-unit:before { content: "\\ea96" }\n.codicon-activate-breakpoints:before { content: "\\ea97" }\n.codicon-archive:before { content: "\\ea98" }\n.codicon-arrow-both:before { content: "\\ea99" }\n.codicon-arrow-down:before { content: "\\ea9a" }\n.codicon-arrow-left:before { content: "\\ea9b" }\n.codicon-arrow-right:before { content: "\\ea9c" }\n.codicon-arrow-small-down:before { content: "\\ea9d" }\n.codicon-arrow-small-left:before { content: "\\ea9e" }\n.codicon-arrow-small-right:before { content: "\\ea9f" }\n.codicon-arrow-small-up:before { content: "\\eaa0" }\n.codicon-arrow-up:before { content: "\\eaa1" }\n.codicon-bell:before { content: "\\eaa2" }\n.codicon-bold:before { content: "\\eaa3" }\n.codicon-book:before { content: "\\eaa4" }\n.codicon-bookmark:before { content: "\\eaa5" }\n.codicon-debug-breakpoint-conditional-unverified:before { content: "\\eaa6" }\n.codicon-debug-breakpoint-conditional:before { content: "\\eaa7" }\n.codicon-debug-breakpoint-conditional-disabled:before { content: "\\eaa7" }\n.codicon-debug-breakpoint-data-unverified:before { content: "\\eaa8" }\n.codicon-debug-breakpoint-data:before { content: "\\eaa9" }\n.codicon-debug-breakpoint-data-disabled:before { content: "\\eaa9" }\n.codicon-debug-breakpoint-log-unverified:before { content: "\\eaaa" }\n.codicon-debug-breakpoint-log:before { content: "\\eaab" }\n.codicon-debug-breakpoint-log-disabled:before { content: "\\eaab" }\n.codicon-briefcase:before { content: "\\eaac" }\n.codicon-broadcast:before { content: "\\eaad" }\n.codicon-browser:before { content: "\\eaae" }\n.codicon-bug:before { content: "\\eaaf" }\n.codicon-calendar:before { content: "\\eab0" }\n.codicon-case-sensitive:before { content: "\\eab1" }\n.codicon-check:before { content: "\\eab2" }\n.codicon-checklist:before { content: "\\eab3" }\n.codicon-chevron-down:before { content: "\\eab4" }\n.codicon-chevron-left:before { content: "\\eab5" }\n.codicon-chevron-right:before { content: "\\eab6" }\n.codicon-chevron-up:before { content: "\\eab7" }\n.codicon-chrome-close:before { content: "\\eab8" }\n.codicon-chrome-maximize:before { content: "\\eab9" }\n.codicon-chrome-minimize:before { content: "\\eaba" }\n.codicon-chrome-restore:before { content: "\\eabb" }\n.codicon-circle-outline:before { content: "\\eabc" }\n.codicon-debug-breakpoint-unverified:before { content: "\\eabc" }\n.codicon-circle-slash:before { content: "\\eabd" }\n.codicon-circuit-board:before { content: "\\eabe" }\n.codicon-clear-all:before { content: "\\eabf" }\n.codicon-clippy:before { content: "\\eac0" }\n.codicon-close-all:before { content: "\\eac1" }\n.codicon-cloud-download:before { content: "\\eac2" }\n.codicon-cloud-upload:before { content: "\\eac3" }\n.codicon-code:before { content: "\\eac4" }\n.codicon-collapse-all:before { content: "\\eac5" }\n.codicon-color-mode:before { content: "\\eac6" }\n.codicon-comment-discussion:before { content: "\\eac7" }\n.codicon-credit-card:before { content: "\\eac9" }\n.codicon-dash:before { content: "\\eacc" }\n.codicon-dashboard:before { content: "\\eacd" }\n.codicon-database:before { content: "\\eace" }\n.codicon-debug-continue:before { content: "\\eacf" }\n.codicon-debug-disconnect:before { content: "\\ead0" }\n.codicon-debug-pause:before { content: "\\ead1" }\n.codicon-debug-restart:before { content: "\\ead2" }\n.codicon-debug-start:before { content: "\\ead3" }\n.codicon-debug-step-into:before { content: "\\ead4" }\n.codicon-debug-step-out:before { content: "\\ead5" }\n.codicon-debug-step-over:before { content: "\\ead6" }\n.codicon-debug-stop:before { content: "\\ead7" }\n.codicon-debug:before { content: "\\ead8" }\n.codicon-device-camera-video:before { content: "\\ead9" }\n.codicon-device-camera:before { content: "\\eada" }\n.codicon-device-mobile:before { content: "\\eadb" }\n.codicon-diff-added:before { content: "\\eadc" }\n.codicon-diff-ignored:before { content: "\\eadd" }\n.codicon-diff-modified:before { content: "\\eade" }\n.codicon-diff-removed:before { content: "\\eadf" }\n.codicon-diff-renamed:before { content: "\\eae0" }\n.codicon-diff:before { content: "\\eae1" }\n.codicon-discard:before { content: "\\eae2" }\n.codicon-editor-layout:before { content: "\\eae3" }\n.codicon-empty-window:before { content: "\\eae4" }\n.codicon-exclude:before { content: "\\eae5" }\n.codicon-extensions:before { content: "\\eae6" }\n.codicon-eye-closed:before { content: "\\eae7" }\n.codicon-file-binary:before { content: "\\eae8" }\n.codicon-file-code:before { content: "\\eae9" }\n.codicon-file-media:before { content: "\\eaea" }\n.codicon-file-pdf:before { content: "\\eaeb" }\n.codicon-file-submodule:before { content: "\\eaec" }\n.codicon-file-symlink-directory:before { content: "\\eaed" }\n.codicon-file-symlink-file:before { content: "\\eaee" }\n.codicon-file-zip:before { content: "\\eaef" }\n.codicon-files:before { content: "\\eaf0" }\n.codicon-filter:before { content: "\\eaf1" }\n.codicon-flame:before { content: "\\eaf2" }\n.codicon-fold-down:before { content: "\\eaf3" }\n.codicon-fold-up:before { content: "\\eaf4" }\n.codicon-fold:before { content: "\\eaf5" }\n.codicon-folder-active:before { content: "\\eaf6" }\n.codicon-folder-opened:before { content: "\\eaf7" }\n.codicon-gear:before { content: "\\eaf8" }\n.codicon-gift:before { content: "\\eaf9" }\n.codicon-gist-secret:before { content: "\\eafa" }\n.codicon-gist:before { content: "\\eafb" }\n.codicon-git-commit:before { content: "\\eafc" }\n.codicon-git-compare:before { content: "\\eafd" }\n.codicon-compare-changes:before { content: "\\eafd" }\n.codicon-git-merge:before { content: "\\eafe" }\n.codicon-github-action:before { content: "\\eaff" }\n.codicon-github-alt:before { content: "\\eb00" }\n.codicon-globe:before { content: "\\eb01" }\n.codicon-grabber:before { content: "\\eb02" }\n.codicon-graph:before { content: "\\eb03" }\n.codicon-gripper:before { content: "\\eb04" }\n.codicon-heart:before { content: "\\eb05" }\n.codicon-home:before { content: "\\eb06" }\n.codicon-horizontal-rule:before { content: "\\eb07" }\n.codicon-hubot:before { content: "\\eb08" }\n.codicon-inbox:before { content: "\\eb09" }\n.codicon-issue-reopened:before { content: "\\eb0b" }\n.codicon-issues:before { content: "\\eb0c" }\n.codicon-italic:before { content: "\\eb0d" }\n.codicon-jersey:before { content: "\\eb0e" }\n.codicon-json:before { content: "\\eb0f" }\n.codicon-kebab-vertical:before { content: "\\eb10" }\n.codicon-key:before { content: "\\eb11" }\n.codicon-law:before { content: "\\eb12" }\n.codicon-lightbulb-autofix:before { content: "\\eb13" }\n.codicon-link-external:before { content: "\\eb14" }\n.codicon-link:before { content: "\\eb15" }\n.codicon-list-ordered:before { content: "\\eb16" }\n.codicon-list-unordered:before { content: "\\eb17" }\n.codicon-live-share:before { content: "\\eb18" }\n.codicon-loading:before { content: "\\eb19" }\n.codicon-location:before { content: "\\eb1a" }\n.codicon-mail-read:before { content: "\\eb1b" }\n.codicon-mail:before { content: "\\eb1c" }\n.codicon-markdown:before { content: "\\eb1d" }\n.codicon-megaphone:before { content: "\\eb1e" }\n.codicon-mention:before { content: "\\eb1f" }\n.codicon-milestone:before { content: "\\eb20" }\n.codicon-mortar-board:before { content: "\\eb21" }\n.codicon-move:before { content: "\\eb22" }\n.codicon-multiple-windows:before { content: "\\eb23" }\n.codicon-mute:before { content: "\\eb24" }\n.codicon-no-newline:before { content: "\\eb25" }\n.codicon-note:before { content: "\\eb26" }\n.codicon-octoface:before { content: "\\eb27" }\n.codicon-open-preview:before { content: "\\eb28" }\n.codicon-package:before { content: "\\eb29" }\n.codicon-paintcan:before { content: "\\eb2a" }\n.codicon-pin:before { content: "\\eb2b" }\n.codicon-play:before { content: "\\eb2c" }\n.codicon-run:before { content: "\\eb2c" }\n.codicon-plug:before { content: "\\eb2d" }\n.codicon-preserve-case:before { content: "\\eb2e" }\n.codicon-preview:before { content: "\\eb2f" }\n.codicon-project:before { content: "\\eb30" }\n.codicon-pulse:before { content: "\\eb31" }\n.codicon-question:before { content: "\\eb32" }\n.codicon-quote:before { content: "\\eb33" }\n.codicon-radio-tower:before { content: "\\eb34" }\n.codicon-reactions:before { content: "\\eb35" }\n.codicon-references:before { content: "\\eb36" }\n.codicon-refresh:before { content: "\\eb37" }\n.codicon-regex:before { content: "\\eb38" }\n.codicon-remote-explorer:before { content: "\\eb39" }\n.codicon-remote:before { content: "\\eb3a" }\n.codicon-remove:before { content: "\\eb3b" }\n.codicon-replace-all:before { content: "\\eb3c" }\n.codicon-replace:before { content: "\\eb3d" }\n.codicon-repo-clone:before { content: "\\eb3e" }\n.codicon-repo-force-push:before { content: "\\eb3f" }\n.codicon-repo-pull:before { content: "\\eb40" }\n.codicon-repo-push:before { content: "\\eb41" }\n.codicon-report:before { content: "\\eb42" }\n.codicon-request-changes:before { content: "\\eb43" }\n.codicon-rocket:before { content: "\\eb44" }\n.codicon-root-folder-opened:before { content: "\\eb45" }\n.codicon-root-folder:before { content: "\\eb46" }\n.codicon-rss:before { content: "\\eb47" }\n.codicon-ruby:before { content: "\\eb48" }\n.codicon-save-all:before { content: "\\eb49" }\n.codicon-save-as:before { content: "\\eb4a" }\n.codicon-save:before { content: "\\eb4b" }\n.codicon-screen-full:before { content: "\\eb4c" }\n.codicon-screen-normal:before { content: "\\eb4d" }\n.codicon-search-stop:before { content: "\\eb4e" }\n.codicon-server:before { content: "\\eb50" }\n.codicon-settings-gear:before { content: "\\eb51" }\n.codicon-settings:before { content: "\\eb52" }\n.codicon-shield:before { content: "\\eb53" }\n.codicon-smiley:before { content: "\\eb54" }\n.codicon-sort-precedence:before { content: "\\eb55" }\n.codicon-split-horizontal:before { content: "\\eb56" }\n.codicon-split-vertical:before { content: "\\eb57" }\n.codicon-squirrel:before { content: "\\eb58" }\n.codicon-star-full:before { content: "\\eb59" }\n.codicon-star-half:before { content: "\\eb5a" }\n.codicon-symbol-class:before { content: "\\eb5b" }\n.codicon-symbol-color:before { content: "\\eb5c" }\n.codicon-symbol-constant:before { content: "\\eb5d" }\n.codicon-symbol-enum-member:before { content: "\\eb5e" }\n.codicon-symbol-field:before { content: "\\eb5f" }\n.codicon-symbol-file:before { content: "\\eb60" }\n.codicon-symbol-interface:before { content: "\\eb61" }\n.codicon-symbol-keyword:before { content: "\\eb62" }\n.codicon-symbol-misc:before { content: "\\eb63" }\n.codicon-symbol-operator:before { content: "\\eb64" }\n.codicon-symbol-property:before { content: "\\eb65" }\n.codicon-wrench:before { content: "\\eb65" }\n.codicon-wrench-subaction:before { content: "\\eb65" }\n.codicon-symbol-snippet:before { content: "\\eb66" }\n.codicon-tasklist:before { content: "\\eb67" }\n.codicon-telescope:before { content: "\\eb68" }\n.codicon-text-size:before { content: "\\eb69" }\n.codicon-three-bars:before { content: "\\eb6a" }\n.codicon-thumbsdown:before { content: "\\eb6b" }\n.codicon-thumbsup:before { content: "\\eb6c" }\n.codicon-tools:before { content: "\\eb6d" }\n.codicon-triangle-down:before { content: "\\eb6e" }\n.codicon-triangle-left:before { content: "\\eb6f" }\n.codicon-triangle-right:before { content: "\\eb70" }\n.codicon-triangle-up:before { content: "\\eb71" }\n.codicon-twitter:before { content: "\\eb72" }\n.codicon-unfold:before { content: "\\eb73" }\n.codicon-unlock:before { content: "\\eb74" }\n.codicon-unmute:before { content: "\\eb75" }\n.codicon-unverified:before { content: "\\eb76" }\n.codicon-verified:before { content: "\\eb77" }\n.codicon-versions:before { content: "\\eb78" }\n.codicon-vm-active:before { content: "\\eb79" }\n.codicon-vm-outline:before { content: "\\eb7a" }\n.codicon-vm-running:before { content: "\\eb7b" }\n.codicon-watch:before { content: "\\eb7c" }\n.codicon-whitespace:before { content: "\\eb7d" }\n.codicon-whole-word:before { content: "\\eb7e" }\n.codicon-window:before { content: "\\eb7f" }\n.codicon-word-wrap:before { content: "\\eb80" }\n.codicon-zoom-in:before { content: "\\eb81" }\n.codicon-zoom-out:before { content: "\\eb82" }\n.codicon-list-filter:before { content: "\\eb83" }\n.codicon-list-flat:before { content: "\\eb84" }\n.codicon-list-selection:before { content: "\\eb85" }\n.codicon-selection:before { content: "\\eb85" }\n.codicon-list-tree:before { content: "\\eb86" }\n.codicon-debug-breakpoint-function-unverified:before { content: "\\eb87" }\n.codicon-debug-breakpoint-function:before { content: "\\eb88" }\n.codicon-debug-breakpoint-function-disabled:before { content: "\\eb88" }\n.codicon-debug-stackframe-active:before { content: "\\eb89" }\n.codicon-circle-small-filled:before { content: "\\eb8a" }\n.codicon-debug-stackframe-dot:before { content: "\\eb8a" }\n.codicon-debug-stackframe:before { content: "\\eb8b" }\n.codicon-debug-stackframe-focused:before { content: "\\eb8b" }\n.codicon-debug-breakpoint-unsupported:before { content: "\\eb8c" }\n.codicon-symbol-string:before { content: "\\eb8d" }\n.codicon-debug-reverse-continue:before { content: "\\eb8e" }\n.codicon-debug-step-back:before { content: "\\eb8f" }\n.codicon-debug-restart-frame:before { content: "\\eb90" }\n.codicon-debug-alt:before { content: "\\eb91" }\n.codicon-call-incoming:before { content: "\\eb92" }\n.codicon-call-outgoing:before { content: "\\eb93" }\n.codicon-menu:before { content: "\\eb94" }\n.codicon-expand-all:before { content: "\\eb95" }\n.codicon-feedback:before { content: "\\eb96" }\n.codicon-group-by-ref-type:before { content: "\\eb97" }\n.codicon-ungroup-by-ref-type:before { content: "\\eb98" }\n.codicon-account:before { content: "\\eb99" }\n.codicon-bell-dot:before { content: "\\eb9a" }\n.codicon-debug-console:before { content: "\\eb9b" }\n.codicon-library:before { content: "\\eb9c" }\n.codicon-output:before { content: "\\eb9d" }\n.codicon-run-all:before { content: "\\eb9e" }\n.codicon-sync-ignored:before { content: "\\eb9f" }\n.codicon-pinned:before { content: "\\eba0" }\n.codicon-github-inverted:before { content: "\\eba1" }\n.codicon-server-process:before { content: "\\eba2" }\n.codicon-server-environment:before { content: "\\eba3" }\n.codicon-pass:before { content: "\\eba4" }\n.codicon-issue-closed:before { content: "\\eba4" }\n.codicon-stop-circle:before { content: "\\eba5" }\n.codicon-play-circle:before { content: "\\eba6" }\n.codicon-record:before { content: "\\eba7" }\n.codicon-debug-alt-small:before { content: "\\eba8" }\n.codicon-vm-connect:before { content: "\\eba9" }\n.codicon-cloud:before { content: "\\ebaa" }\n.codicon-merge:before { content: "\\ebab" }\n.codicon-export:before { content: "\\ebac" }\n.codicon-graph-left:before { content: "\\ebad" }\n.codicon-magnet:before { content: "\\ebae" }\n.codicon-notebook:before { content: "\\ebaf" }\n.codicon-redo:before { content: "\\ebb0" }\n.codicon-check-all:before { content: "\\ebb1" }\n.codicon-pinned-dirty:before { content: "\\ebb2" }\n.codicon-pass-filled:before { content: "\\ebb3" }\n.codicon-circle-large-filled:before { content: "\\ebb4" }\n.codicon-circle-large-outline:before { content: "\\ebb5" }\n.codicon-combine:before { content: "\\ebb6" }\n.codicon-gather:before { content: "\\ebb6" }\n.codicon-table:before { content: "\\ebb7" }\n.codicon-variable-group:before { content: "\\ebb8" }\n.codicon-type-hierarchy:before { content: "\\ebb9" }\n.codicon-type-hierarchy-sub:before { content: "\\ebba" }\n.codicon-type-hierarchy-super:before { content: "\\ebbb" }\n.codicon-git-pull-request-create:before { content: "\\ebbc" }\n.codicon-run-above:before { content: "\\ebbd" }\n.codicon-run-below:before { content: "\\ebbe" }\n.codicon-notebook-template:before { content: "\\ebbf" }\n.codicon-debug-rerun:before { content: "\\ebc0" }\n.codicon-workspace-trusted:before { content: "\\ebc1" }\n.codicon-workspace-untrusted:before { content: "\\ebc2" }\n.codicon-workspace-unknown:before { content: "\\ebc3" }\n.codicon-terminal-cmd:before { content: "\\ebc4" }\n.codicon-terminal-debian:before { content: "\\ebc5" }\n.codicon-terminal-linux:before { content: "\\ebc6" }\n.codicon-terminal-powershell:before { content: "\\ebc7" }\n.codicon-terminal-tmux:before { content: "\\ebc8" }\n.codicon-terminal-ubuntu:before { content: "\\ebc9" }\n.codicon-terminal-bash:before { content: "\\ebca" }\n.codicon-arrow-swap:before { content: "\\ebcb" }\n.codicon-copy:before { content: "\\ebcc" }\n.codicon-person-add:before { content: "\\ebcd" }\n.codicon-filter-filled:before { content: "\\ebce" }\n.codicon-wand:before { content: "\\ebcf" }\n.codicon-debug-line-by-line:before { content: "\\ebd0" }\n.codicon-inspect:before { content: "\\ebd1" }\n.codicon-layers:before { content: "\\ebd2" }\n.codicon-layers-dot:before { content: "\\ebd3" }\n.codicon-layers-active:before { content: "\\ebd4" }\n.codicon-compass:before { content: "\\ebd5" }\n.codicon-compass-dot:before { content: "\\ebd6" }\n.codicon-compass-active:before { content: "\\ebd7" }\n.codicon-azure:before { content: "\\ebd8" }\n.codicon-issue-draft:before { content: "\\ebd9" }\n.codicon-git-pull-request-closed:before { content: "\\ebda" }\n.codicon-git-pull-request-draft:before { content: "\\ebdb" }\n.codicon-debug-all:before { content: "\\ebdc" }\n.codicon-debug-coverage:before { content: "\\ebdd" }\n.codicon-run-errors:before { content: "\\ebde" }\n.codicon-folder-library:before { content: "\\ebdf" }\n.codicon-debug-continue-small:before { content: "\\ebe0" }\n.codicon-beaker-stop:before { content: "\\ebe1" }\n.codicon-graph-line:before { content: "\\ebe2" }\n.codicon-graph-scatter:before { content: "\\ebe3" }\n.codicon-pie-chart:before { content: "\\ebe4" }\n.codicon-bracket:before { content: "\\eb0f" }\n.codicon-bracket-dot:before { content: "\\ebe5" }\n.codicon-bracket-error:before { content: "\\ebe6" }\n.codicon-lock-small:before { content: "\\ebe7" }\n.codicon-azure-devops:before { content: "\\ebe8" }\n.codicon-verified-filled:before { content: "\\ebe9" }\n.codicon-newline:before { content: "\\ebea" }\n.codicon-layout:before { content: "\\ebeb" }\n.codicon-layout-activitybar-left:before { content: "\\ebec" }\n.codicon-layout-activitybar-right:before { content: "\\ebed" }\n.codicon-layout-panel-left:before { content: "\\ebee" }\n.codicon-layout-panel-center:before { content: "\\ebef" }\n.codicon-layout-panel-justify:before { content: "\\ebf0" }\n.codicon-layout-panel-right:before { content: "\\ebf1" }\n.codicon-layout-panel:before { content: "\\ebf2" }\n.codicon-layout-sidebar-left:before { content: "\\ebf3" }\n.codicon-layout-sidebar-right:before { content: "\\ebf4" }\n.codicon-layout-statusbar:before { content: "\\ebf5" }\n.codicon-layout-menubar:before { content: "\\ebf6" }\n.codicon-layout-centered:before { content: "\\ebf7" }\n.codicon-target:before { content: "\\ebf8" }\n.codicon-indent:before { content: "\\ebf9" }\n.codicon-record-small:before { content: "\\ebfa" }\n.codicon-error-small:before { content: "\\ebfb" }\n.codicon-arrow-circle-down:before { content: "\\ebfc" }\n.codicon-arrow-circle-left:before { content: "\\ebfd" }\n.codicon-arrow-circle-right:before { content: "\\ebfe" }\n.codicon-arrow-circle-up:before { content: "\\ebff" }\n.codicon-layout-sidebar-right-off:before { content: "\\ec00" }\n.codicon-layout-panel-off:before { content: "\\ec01" }\n.codicon-layout-sidebar-left-off:before { content: "\\ec02" }\n.codicon-blank:before { content: "\\ec03" }\n.codicon-heart-filled:before { content: "\\ec04" }\n.codicon-map:before { content: "\\ec05" }\n.codicon-map-filled:before { content: "\\ec06" }\n.codicon-circle-small:before { content: "\\ec07" }\n.codicon-bell-slash:before { content: "\\ec08" }\n.codicon-bell-slash-dot:before { content: "\\ec09" }\n.codicon-comment-unresolved:before { content: "\\ec0a" }\n.codicon-git-pull-request-go-to-changes:before { content: "\\ec0b" }\n.codicon-git-pull-request-new-changes:before { content: "\\ec0c" }\n\n@layer kol-component {\n\t:host {\n\t\tcolor: inherit;\n\t\tdisplay: contents;\n\t\theight: 1em;\n\t\tline-height: inherit;\n\t\twidth: 1em;\n\t}\n\n\t:host > i {\n\t\theight: 1em;\n\t\twidth: 1em;\n\t}\n\n\t/*\n   * The <code>:important</code> is important, because we should always override the font icon style.\n   */\n\t:host > i,\n\t:host > i:before {\n\t\tfont-size: inherit !important;\n\t}\n}\n',r=class{constructor(o){e(this,o),this._icons=void 0,this._label=void 0,this.state={_icons:"codicon codicon-home",_label:""}}render(){const e=this.state._label.length>0;return o(n,{exportparts:"icon"},o("i",{"aria-hidden":e?void 0:"true","aria-label":e?this.state._label:void 0,class:this.state._icons,part:"icon",role:"img"}))}validateIcons(e){t(this,"_icons",e)}validateLabel(e){c(this,e)}componentWillLoad(){this.validateIcons(this._icons),this.validateLabel(this._label)}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}};r.style={default:b};export{r as kol_icon};

package/dist/kolibri/kol-image.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-9c30809b.js";import{v as e}from"./image-source-d36f06a0.js";import{w as a,d as r}from"./prop.validators-6cc65427.js";import"./a11y.tipps-ba8ae150.js";import"./dev.utils-a31cf0e4.js";import"./reuse-b3566e4c.js";const n=new Set(['"eager", "lazy"']);function d(t,s){a(t,"_loading",(t=>"eager"===t||"lazy"===t),n,s)}const l="@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n",o=class{constructor(s){t(this,s),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"…",_loading:"lazy",_src:"…"}}validateAlt(t){r(this,"_alt",t,{required:!0})}validateLoading(t){d(this,t)}validateSizes(t){r(this,"_sizes",t)}validateSrc(t){e(this,t,{required:!0})}validateSrcset(t){r(this,"_srcset",t)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return i(s,null,i("img",{alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};o.style={default:l};export{o as kol_image};
+import{r as t,h as i,H as s}from"./index-9c30809b.js";import{v as e}from"./image-source-a819638e.js";import{w as a,d as r}from"./prop.validators-9bbd95a9.js";import"./a11y.tipps-29a5e350.js";import"./dev.utils-365879e7.js";import"./reuse-b3566e4c.js";const n=["eager","lazy"];function d(t,s){a(t,"_loading",(t=>"string"==typeof t&&n.includes(t)),new Set(n),s)}const l="@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n",o=class{constructor(s){t(this,s),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"…",_loading:"lazy",_src:"…"}}validateAlt(t){r(this,"_alt",t,{required:!0})}validateLoading(t){d(this,t)}validateSizes(t){r(this,"_sizes",t)}validateSrc(t){e(this,t,{required:!0})}validateSrcset(t){r(this,"_srcset",t)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return i(s,null,i("img",{alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};o.style={default:l};export{o as kol_image};

package/dist/kolibri/kol-image.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["AVAILABLE_LOADING_VALUES","Set","validateLoading","component","value","watchValidator","defaultStyleCss","KolImage","_alt","_loading","_src","validateAlt","watchString","this","required","validateSizes","validateSrc","validateImageSource","validateSrcset","componentWillLoad","_sizes","_srcset","render","h","Host","alt","state","loading","sizes","src","srcset"],"sources":["src/utils/validators/loading.ts","src/components/image/style.css?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchValidator } from '../prop.validators';\n\nexport type Loading = 'eager' | 'lazy';\n\nconst AVAILABLE_LOADING_VALUES = new Set(['\"eager\", \"lazy\"']);\nexport function validateLoading(component: Generic.Element.Component, value?: Loading): void {\n\twatchValidator<Loading>(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value);\n}\n","@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ImageSourcePropType, validateImageSource } from '../../types/props/image-source';\nimport { watchString } from '../../utils/prop.validators';\nimport { Loading, validateLoading } from '../../utils/validators/loading';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements API {\n\t/**\n\t * Setzt den alternativen Text.\n\t */\n\t@Prop() public _alt!: string;\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop() public _loading?: Loading = 'lazy';\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop() public _sizes?: string;\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src!: ImageSourcePropType;\n\n\t/**\n\t * Setzt eine Liste von Quell-URLs mit Breiten der Bilder.\n\t */\n\t@Prop() public _srcset?: string;\n\n\t@State() public state: States = {\n\t\t_alt: '…', // ⚠ required\n\t\t_loading: 'lazy',\n\t\t_src: '…', // ⚠ required\n\t};\n\n\t@Watch('_alt')\n\tpublic validateAlt(value?: string): void {\n\t\twatchString(this, '_alt', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_loading')\n\tpublic validateLoading(value?: Loading): void {\n\t\tvalidateLoading(this, value);\n\t}\n\n\t@Watch('_sizes')\n\tpublic validateSizes(value?: string): void {\n\t\twatchString(this, '_sizes', value);\n\t}\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_srcset')\n\tpublic validateSrcset(value?: string): void {\n\t\twatchString(this, '_srcset', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlt(this._alt);\n\t\tthis.validateLoading(this._loading);\n\t\tthis.validateSizes(this._sizes);\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateSrcset(this._srcset);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;2PAMA,MAAMA,EAA2B,IAAIC,IAAI,CAAC,oB,SAC1BC,EAAgBC,EAAsCC,GACrEC,EAAwBF,EAAW,YAAaC,GAAUA,IAAU,SAAWA,IAAU,QAAQJ,EAA0BI,EAC5H,CCTA,MAAME,EAAkB,yF,MCcXC,EAAQ,M,2DASgB,O,4EAiBJ,CAC/BC,KAAM,IACNC,SAAU,OACVC,KAAM,I,CAIA,WAAAC,CAAYP,GAClBQ,EAAYC,KAAM,OAAQT,EAAO,CAChCU,SAAU,M,CAKL,eAAAZ,CAAgBE,GACtBF,EAAgBW,KAAMT,E,CAIhB,aAAAW,CAAcX,GACpBQ,EAAYC,KAAM,SAAUT,E,CAItB,WAAAY,CAAYZ,GAClBa,EAAoBJ,KAAMT,EAAO,CAChCU,SAAU,M,CAKL,cAAAI,CAAed,GACrBQ,EAAYC,KAAM,UAAWT,E,CAGvB,iBAAAe,GACNN,KAAKF,YAAYE,KAAKL,MACtBK,KAAKX,gBAAgBW,KAAKJ,UAC1BI,KAAKE,cAAcF,KAAKO,QACxBP,KAAKG,YAAYH,KAAKH,MACtBG,KAAKK,eAAeL,KAAKQ,Q,CAGnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,OAAKE,IAAKZ,KAAKa,MAAMlB,KAAMmB,QAASd,KAAKa,MAAMjB,SAAUmB,MAAOf,KAAKa,MAAMN,OAAQS,IAAKhB,KAAKa,MAAMhB,KAAMoB,OAAQjB,KAAKa,MAAML,U"}
+{"version":3,"names":["loadingOptions","validateLoading","component","value","watchValidator","includes","Set","defaultStyleCss","KolImage","_alt","_loading","_src","validateAlt","watchString","this","required","validateSizes","validateSrc","validateImageSource","validateSrcset","componentWillLoad","_sizes","_srcset","render","h","Host","alt","state","loading","sizes","src","srcset"],"sources":["src/utils/validators/loading.ts","src/components/image/style.css?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/shadow.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchValidator } from '../prop.validators';\n\nconst loadingOptions = ['eager', 'lazy'] as const;\nexport type Loading = (typeof loadingOptions)[number];\n\nexport function validateLoading(component: Generic.Element.Component, value?: Loading): void {\n\twatchValidator<Loading>(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);\n}\n","@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ImageSourcePropType, validateImageSource } from '../../types/props/image-source';\nimport { watchString } from '../../utils/prop.validators';\nimport { Loading, validateLoading } from '../../utils/validators/loading';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements API {\n\t/**\n\t * Setzt den alternativen Text.\n\t */\n\t@Prop() public _alt!: string;\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop() public _loading?: Loading = 'lazy';\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop() public _sizes?: string;\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src!: ImageSourcePropType;\n\n\t/**\n\t * Setzt eine Liste von Quell-URLs mit Breiten der Bilder.\n\t */\n\t@Prop() public _srcset?: string;\n\n\t@State() public state: States = {\n\t\t_alt: '…', // ⚠ required\n\t\t_loading: 'lazy',\n\t\t_src: '…', // ⚠ required\n\t};\n\n\t@Watch('_alt')\n\tpublic validateAlt(value?: string): void {\n\t\twatchString(this, '_alt', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_loading')\n\tpublic validateLoading(value?: Loading): void {\n\t\tvalidateLoading(this, value);\n\t}\n\n\t@Watch('_sizes')\n\tpublic validateSizes(value?: string): void {\n\t\twatchString(this, '_sizes', value);\n\t}\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_srcset')\n\tpublic validateSrcset(value?: string): void {\n\t\twatchString(this, '_srcset', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlt(this._alt);\n\t\tthis.validateLoading(this._loading);\n\t\tthis.validateSizes(this._sizes);\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateSrcset(this._srcset);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;2PAIA,MAAMA,EAAiB,CAAC,QAAS,Q,SAGjBC,EAAgBC,EAAsCC,GACrEC,EAAwBF,EAAW,YAAaC,UAAiBA,IAAU,UAAYH,EAAeK,SAASF,IAAQ,IAAIG,IAAIN,GAAiBG,EACjJ,CCTA,MAAMI,EAAkB,yF,MCcXC,EAAQ,M,2DASgB,O,4EAiBJ,CAC/BC,KAAM,IACNC,SAAU,OACVC,KAAM,I,CAIA,WAAAC,CAAYT,GAClBU,EAAYC,KAAM,OAAQX,EAAO,CAChCY,SAAU,M,CAKL,eAAAd,CAAgBE,GACtBF,EAAgBa,KAAMX,E,CAIhB,aAAAa,CAAcb,GACpBU,EAAYC,KAAM,SAAUX,E,CAItB,WAAAc,CAAYd,GAClBe,EAAoBJ,KAAMX,EAAO,CAChCY,SAAU,M,CAKL,cAAAI,CAAehB,GACrBU,EAAYC,KAAM,UAAWX,E,CAGvB,iBAAAiB,GACNN,KAAKF,YAAYE,KAAKL,MACtBK,KAAKb,gBAAgBa,KAAKJ,UAC1BI,KAAKE,cAAcF,KAAKO,QACxBP,KAAKG,YAAYH,KAAKH,MACtBG,KAAKK,eAAeL,KAAKQ,Q,CAGnB,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,OAAKE,IAAKZ,KAAKa,MAAMlB,KAAMmB,QAASd,KAAKa,MAAMjB,SAAUmB,MAAOf,KAAKa,MAAMN,OAAQS,IAAKhB,KAAKa,MAAMhB,KAAMoB,OAAQjB,KAAKa,MAAML,U"}

package/dist/kolibri/kol-input-checkbox.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as n,r as e,g as i}from"./index-9c30809b.js";import{n as a}from"./dev.utils-a31cf0e4.js";import{s,t as o}from"./events-2bb1065b.js";import{i as r,a as l,s as d}from"./reuse-b3566e4c.js";import{v as h,g as c}from"./controller-873fca4f.js";import{a as p,w as u,s as m}from"./prop.validators-6cc65427.js";import{a as b}from"./a11y.tipps-ba8ae150.js";import{I as f}from"./controller-43306562.js";import{I as y}from"./InternalUnderlinedAccessKey-c3bc8e32.js";import"./hide-label-eb1f7b60.js";import"./label-3e545772.js";import"./tab-index-8864ef5e.js";import"./associated.controller-687b47db.js";const k=(t,e)=>{p(t,"_checked",e)},v=(t,e)=>{p(t,"_indeterminate",e)};class g extends f{constructor(t,e,n){super(t,e,n),this.setFormAssociatedCheckboxValue=t=>{this.component._checked?this.setFormAssociatedValue(t):this.setFormAssociatedValue(null)},this.component=t}validateChecked(t){k(this.component,t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateHideError(t){h(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&b("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateIcons(t){u(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&(r(t.checked,1)||r(t.indeterminate,1)||r(t.unchecked,1))),new Set(["InputCheckboxIcons"]),t,{hooks:{beforePatch:(t,e,n)=>{e.set("_icons",Object.assign(Object.assign({},n.state._icons),t))}}})}validateIndeterminate(t){v(this.component,t)}validateValue(t){m(this.component,"_value",t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(t){u(this.component,"_variant",(t=>"string"==typeof t&&("button"===t||"default"===t||"switch"===t)),new Set(["String {button, default, switch}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateHideError(this.component._hideError),this.validateIcons(this.component._icons),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}const x="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tkol-input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tjustify-items: left;\n\t}\n\n\tkol-input.default,\n\tkol-input.switch {\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\tkol-input .input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\torder: 1;\n\t}\n\n\tkol-input .input div {\n\t\tdisplay: inline-flex;\n\t}\n\n\tkol-input .input input {\n\t\tmargin: 0;\n\t}\n\n\tkol-input label {\n\t\torder: 2;\n\t}\n\n\tkol-input .hint,\n\tkol-input.error > kol-alert {\n\t\tgrid-column: span 2;\n\t}\n\n\tkol-input kol-alert.error {\n\t\torder: 3;\n\t}\n\n\tkol-input .hint {\n\t\torder: 4;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n\n\tinput {\n\t\tborder-style: solid;\n\t\tborder-width: 2px;\n\t\tline-height: 24px;\n\t}\n\n\tinput[type='checkbox'] {\n\t\tappearance: none;\n\t\tbackground-color: #fff;\n\t\tcursor: pointer;\n\t\ttransition: 0.5s;\n\t}\n\n\tinput[type='checkbox'].kol-disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\t.default kol-icon {\n\t\tdisplay: none;\n\t}\n\n\tkol-input.required .tooltip-content .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.button {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--a11y-min-size) auto;\n\t\tgrid-template-areas: 'error error' 'input label' 'hint hint';\n\t}\n\n\t.button[tabindex]:focus {\n\t\t/* override global `[tabindex]:focus` style */\n\t\tcursor: inherit;\n\t}\n\n\t.button input {\n\t\tdisplay: none;\n\t}\n\n\t.button > .error {\n\t\tgrid-area: error;\n\t}\n\n\t.button > label {\n\t\tgrid-area: label;\n\t}\n\n\t.button > .input {\n\t\tgrid-area: input;\n\t}\n\n\t.button > .hint {\n\t\tgrid-area: hint;\n\t}\n\n\t.button .icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t}\n}\n\n@layer kol-component {\n\t.default input[type='checkbox'] {\n\t\theight: 1.5em;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:before {\n\t\tdisplay: block;\n\t\theight: 1.5em;\n\t\tposition: relative;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:checked:before {\n\t\tborder-radius: 1px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 3px 3px 0;\n\t\theight: 0.75em;\n\t\tleft: calc(0.375em - 2px);\n\t\ttransform: rotate(40deg) translate(-50%, -50%);\n\t\ttop: calc(0.7125em - 2px);\n\t\twidth: 0.375em;\n\t}\n\n\t.default input[type='checkbox']:indeterminate:before {\n\t\tbackground-color: #000;\n\t\theight: 0.2em;\n\t\tleft: 0.24em;\n\t\ttop: 0.575em;\n\t\twidth: 0.8em;\n\t}\n}\n\n@layer kol-component {\n\t.switch .input {\n\t\tposition: relative;\n\t}\n\n\t.switch input[type='checkbox'] {\n\t\tdisplay: inline-block;\n\t\theight: 1.7em;\n\t\tmin-width: 3.2em;\n\t\tposition: relative;\n\t\twidth: 3.2em;\n\t}\n\n\t.switch input[type='checkbox']::before {\n\t\tbackground-color: #000;\n\t\theight: 1.2em;\n\t\tleft: calc(0.25em - 2px);\n\t\ttop: calc(0.25em - 2px);\n\t\tposition: absolute;\n\t\ttransition: 0.5s;\n\t\twidth: 1.2em;\n\t}\n\n\t.switch input[type='checkbox']:checked::before {\n\t\ttransform: translateX(1.5em);\n\t}\n\n\t.switch input[type='checkbox']:indeterminate::before {\n\t\ttransform: translateX(0.75em);\n\t}\n\n\t.switch .icon {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 1.2em;\n\t\theight: 1.2em;\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translate(0, -50%);\n\t\ttransition: 0.5s;\n\t\tcolor: #000;\n\t}\n\n\t.switch:has(input:checked) .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch:has(input:indeterminate) .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}\n\n",w=class{render(){const{ariaDescribedBy:e}=c(this.state),i=d(this.state._label);return t(n,null,t("kol-input",{class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel,checked:this.state._checked},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_accessKey:this.state._accessKey,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},t("span",{slot:"label"},i?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t("span",null,t(y,{accessKey:this.state._accessKey,label:this.state._label}),t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("kol-icon",{class:"icon",onClick:this.handleIconClick.bind(this),_icons:this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked,_label:""}),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,l(this.host,this.ref)},this.onChange=t=>{var e;this._checked=!this._checked,this._indeterminate=!1;const n=this._checked?this.state._value:null;s(t),o("change",this.host,n),this.controller.setFormAssociatedValue(n),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,n)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._hideError=!1,this._disabled=!1,this._error=void 0,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=!0,this._variant="default",this.state={_checked:!1,_hideError:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:`id-${a()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default"},this.controller=new g(this,"input-checkbox",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateChecked(t){this.controller.validateChecked(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateIndeterminate(t){this.controller.validateIndeterminate(t)}validateLabel(t){this.controller.validateLabel(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}validateVariant(t){this.controller.validateVariant(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}handleIconClick(t){this.state._disabled||this.onChange(t)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}};w.style={default:x};export{w as kol_input_checkbox};
+import{h as t,F as n,H as e,r as i,g as a}from"./index-9c30809b.js";import{n as s}from"./dev.utils-365879e7.js";import{s as o,t as r}from"./events-2bb1065b.js";import{i as l,a as d,s as h}from"./reuse-b3566e4c.js";import{v as c,g as p}from"./controller-039bdc8a.js";import{a as u,w as m,s as b}from"./prop.validators-9bbd95a9.js";import{a as f}from"./a11y.tipps-29a5e350.js";import{I as y}from"./controller-5c808627.js";import{I as k}from"./InternalUnderlinedAccessKey-f593c389.js";import"./hide-label-864b40c5.js";import"./label-d63f8231.js";import"./tab-index-7088e34e.js";import"./associated.controller-44a2c750.js";const v=(t,e)=>{u(t,"_checked",e)},g=(t,e)=>{u(t,"_indeterminate",e)},x=["button","default","switch"];class w extends y{constructor(t,e,n){super(t,e,n),this.setFormAssociatedCheckboxValue=t=>{this.component._checked?this.setFormAssociatedValue(t):this.setFormAssociatedValue(null)},this.component=t}validateChecked(t){v(this.component,t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateHideError(t){c(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&f("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateIcons(t){m(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&(l(t.checked,1)||l(t.indeterminate,1)||l(t.unchecked,1))),new Set(["InputCheckboxIcons"]),t,{hooks:{beforePatch:(t,e,n)=>{e.set("_icons",Object.assign(Object.assign({},n.state._icons),t))}}})}validateIndeterminate(t){g(this.component,t)}validateValue(t){b(this.component,"_value",t),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(t){m(this.component,"_variant",(t=>"string"==typeof t&&x.includes(t)),new Set([`String {${x.join(", ")}`]),t)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateHideError(this.component._hideError),this.validateIcons(this.component._icons),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}const _="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tkol-input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tjustify-items: left;\n\t}\n\n\tkol-input.default,\n\tkol-input.switch {\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\tkol-input .input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\torder: 1;\n\t}\n\n\tkol-input .input div {\n\t\tdisplay: inline-flex;\n\t}\n\n\tkol-input .input input {\n\t\tmargin: 0;\n\t}\n\n\tkol-input label {\n\t\torder: 2;\n\t}\n\n\tkol-input .hint,\n\tkol-input.error > kol-alert {\n\t\tgrid-column: span 2;\n\t}\n\n\tkol-input kol-alert.error {\n\t\torder: 3;\n\t}\n\n\tkol-input .hint {\n\t\torder: 4;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n\n\tinput {\n\t\tborder-style: solid;\n\t\tborder-width: 2px;\n\t\tline-height: 24px;\n\t}\n\n\tinput[type='checkbox'] {\n\t\tappearance: none;\n\t\tbackground-color: #fff;\n\t\tcursor: pointer;\n\t\ttransition: 0.5s;\n\t}\n\n\tinput[type='checkbox'].kol-disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\t.default kol-icon {\n\t\tdisplay: none;\n\t}\n\n\tkol-input.required .tooltip-content .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.button {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--a11y-min-size) auto;\n\t\tgrid-template-areas: 'error error' 'input label' 'hint hint';\n\t}\n\n\t.button[tabindex]:focus {\n\t\t/* override global `[tabindex]:focus` style */\n\t\tcursor: inherit;\n\t}\n\n\t.button input {\n\t\tdisplay: none;\n\t}\n\n\t.button > .error {\n\t\tgrid-area: error;\n\t}\n\n\t.button > label {\n\t\tgrid-area: label;\n\t}\n\n\t.button > .input {\n\t\tgrid-area: input;\n\t}\n\n\t.button > .hint {\n\t\tgrid-area: hint;\n\t}\n\n\t.button .icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t}\n}\n\n@layer kol-component {\n\t.default input[type='checkbox'] {\n\t\theight: 1.5em;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:before {\n\t\tdisplay: block;\n\t\theight: 1.5em;\n\t\tposition: relative;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:checked:before {\n\t\tborder-radius: 1px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 3px 3px 0;\n\t\theight: 0.75em;\n\t\tleft: calc(0.375em - 2px);\n\t\ttransform: rotate(40deg) translate(-50%, -50%);\n\t\ttop: calc(0.7125em - 2px);\n\t\twidth: 0.375em;\n\t}\n\n\t.default input[type='checkbox']:indeterminate:before {\n\t\tbackground-color: #000;\n\t\theight: 0.2em;\n\t\tleft: 0.24em;\n\t\ttop: 0.575em;\n\t\twidth: 0.8em;\n\t}\n}\n\n@layer kol-component {\n\t.switch .input {\n\t\tposition: relative;\n\t}\n\n\t.switch input[type='checkbox'] {\n\t\tdisplay: inline-block;\n\t\theight: 1.7em;\n\t\tmin-width: 3.2em;\n\t\tposition: relative;\n\t\twidth: 3.2em;\n\t}\n\n\t.switch input[type='checkbox']::before {\n\t\tbackground-color: #000;\n\t\theight: 1.2em;\n\t\tleft: calc(0.25em - 2px);\n\t\ttop: calc(0.25em - 2px);\n\t\tposition: absolute;\n\t\ttransition: 0.5s;\n\t\twidth: 1.2em;\n\t}\n\n\t.switch input[type='checkbox']:checked::before {\n\t\ttransform: translateX(1.5em);\n\t}\n\n\t.switch input[type='checkbox']:indeterminate::before {\n\t\ttransform: translateX(0.75em);\n\t}\n\n\t.switch .icon {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 1.2em;\n\t\theight: 1.2em;\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translate(0, -50%);\n\t\ttransition: 0.5s;\n\t\tcolor: #000;\n\t}\n\n\t.switch:has(input:checked) .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch:has(input:indeterminate) .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}\n\n",z=class{render(){const{ariaDescribedBy:i}=p(this.state),a=h(this.state._label);return t(e,null,t("kol-input",{class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel,checked:this.state._checked},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_accessKey:this.state._accessKey,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},t("span",{slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(n,null,t(k,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("kol-icon",{class:"icon",onClick:this.handleIconClick.bind(this),_icons:this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked,_label:""}),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,d(this.host,this.ref)},this.onChange=t=>{var e;this._checked=!this._checked,this._indeterminate=!1;const n=this._checked?this.state._value:null;o(t),r("change",this.host,n),this.controller.setFormAssociatedValue(n),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,n)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._hideError=!1,this._disabled=!1,this._error=void 0,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=!0,this._variant="default",this.state={_checked:!1,_hideError:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:`id-${s()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default"},this.controller=new w(this,"input-checkbox",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateChecked(t){this.controller.validateChecked(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateIndeterminate(t){this.controller.validateIndeterminate(t)}validateLabel(t){this.controller.validateLabel(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}validateVariant(t){this.controller.validateVariant(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}handleIconClick(t){this.state._disabled||this.onChange(t)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}};z.style={default:_};export{z as kol_input_checkbox};

package/dist/kolibri/kol-input-checkbox.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateChecked","component","value","watchBoolean","validateIndeterminate","InputCheckboxController","InputCheckboxRadioController","constructor","name","host","super","this","setFormAssociatedCheckboxValue","_checked","setFormAssociatedValue","state","_value","validateHideError","hooks","afterPatch","_hideError","a11yHint","validateIcons","watchValidator","isString","checked","indeterminate","unchecked","Set","beforePatch","nextValue","nextState","set","Object","assign","_icons","validateValue","setState","validateVariant","componentWillLoad","_indeterminate","_variant","defaultStyleCss","KolInputCheckbox","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","h","Host","class","checkbox","_hideLabel","undefined","onKeyPress","onChange","tabIndex","_accessKey","_alert","_disabled","_error","_hint","_id","_required","_tooltipAlign","_touched","slot","InternalUnderlinedAccessKey","accessKey","label","onClick","handleIconClick","bind","ref","catchRef","title","length","join","disabled","id","_name","required","_tabIndex","type","controller","onFacade","hostRef","propagateFocus","event","stopPropagation","tryToDispatchKoliBriEvent","_a","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched"],"sources":["src/types/props/checked.ts","src/types/props/indeterminate.ts","src/components/input-checkbox/controller.ts","src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type CheckedPropType = boolean;\n\n/**\n * Defines whether the checkbox is checked or not. Can be read and written.\n */\nexport type PropChecked = {\n\tchecked: CheckedPropType;\n};\n\n/* validator */\nexport const validateChecked = (component: Generic.Element.Component, value?: CheckedPropType): void => {\n\twatchBoolean(component, '_checked', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type IndeterminatePropType = boolean;\n\n/**\n * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n */\nexport type PropIndeterminate = {\n\tindeterminate: IndeterminatePropType;\n};\n\n/* validator */\nexport const validateIndeterminate = (component: Generic.Element.Component, value?: IndeterminatePropType): void => {\n\twatchBoolean(component, '_indeterminate', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { CheckedPropType, validateChecked } from '../../types/props/checked';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { IndeterminatePropType, validateIndeterminate } from '../../types/props/indeterminate';\nimport { StencilUnknown } from '../../types/unknown';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { setState, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIconsProp, InputCheckboxIconsState, InputCheckboxVariant, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly setFormAssociatedCheckboxValue = (value: StencilUnknown) => {\n\t\tif (this.component._checked) {\n\t\t\tthis.setFormAssociatedValue(value);\n\t\t} else {\n\t\t\tthis.setFormAssociatedValue(null);\n\t\t}\n\t};\n\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tvalidateChecked(this.component, value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateIcons(value?: Stringified<InputCheckboxIconsProp>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>, component: Generic.Element.Component) => {\n\t\t\t\t\t\tnextState.set('_icons', {\n\t\t\t\t\t\t\t...(component.state._icons as InputCheckboxIconsState),\n\t\t\t\t\t\t\t...(nextValue as InputCheckboxIconsProp),\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tvalidateIndeterminate(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this.component, '_value', value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'button' || value === 'default' || value === 'switch'),\n\t\t\tnew Set(['String {button, default, switch}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateIcons(this.component._icons);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant);\n\t}\n}\n","@import url(../input.css);\n@import url(common.css);\n@import url(button.css);\n@import url(checkbox.css);\n@import url(switch.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { CheckedPropType } from '../../types/props/checked';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { IndeterminatePropType } from '../../types/props/indeterminate';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { API, InputCheckboxIconsProp, InputCheckboxVariant, States } from './types';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\n\n/**\n * @slot expert - Die Beschriftung der Checkbox.\n */\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements API {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tcheckbox: true,\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tchecked: this.state._checked,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass=\"icon\"\n\t\t\t\t\t\t\tonClick={this.handleIconClick.bind(this)}\n\t\t\t\t\t\t\t_icons={\n\t\t\t\t\t\t\t\tthis.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tchecked={this.state._checked}\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the checkbox is checked or not. Can be read and written.\n\t * @TODO: Change type back to `CheckedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<InputCheckboxIconsProp>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n\t * @TODO: Change type back to `IndeterminatePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown> = true;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant = 'default';\n\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_hideError: false,\n\t\t_icons: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: `id-${nonce()}`,\n\t\t_indeterminate: false,\n\t\t_label: '', // ⚠ required\n\t\t_value: true,\n\t\t_variant: 'default',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'input-checkbox', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_checked')\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tthis.controller.validateChecked(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<InputCheckboxIconsProp>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tthis.controller.validateIndeterminate(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate handleIconClick(event: Event): void {\n\t\tif (!this.state._disabled) {\n\t\t\tthis.onChange(event);\n\t\t}\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = !this._checked;\n\t\tthis._indeterminate = false;\n\n\t\tconst value = this._checked ? this.state._value : null;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(value);\n\t\tthis.controller.setFormAssociatedCheckboxValue;\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateChecked","component","value","watchBoolean","validateIndeterminate","inputCheckboxVariantOptions","InputCheckboxController","InputCheckboxRadioController","constructor","name","host","super","this","setFormAssociatedCheckboxValue","_checked","setFormAssociatedValue","state","_value","validateHideError","hooks","afterPatch","_hideError","a11yHint","validateIcons","watchValidator","isString","checked","indeterminate","unchecked","Set","beforePatch","nextValue","nextState","set","Object","assign","_icons","validateValue","setState","validateVariant","includes","join","componentWillLoad","_indeterminate","_variant","defaultStyleCss","KolInputCheckbox","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","h","Host","class","checkbox","_hideLabel","undefined","onKeyPress","onChange","tabIndex","_accessKey","_alert","_disabled","_error","_hint","_id","_required","_tooltipAlign","_touched","slot","Fragment","InternalUnderlinedAccessKey","accessKey","label","onClick","handleIconClick","bind","ref","catchRef","title","length","disabled","id","_name","required","_tabIndex","type","controller","onFacade","hostRef","propagateFocus","event","stopPropagation","tryToDispatchKoliBriEvent","_a","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched"],"sources":["src/types/props/checked.ts","src/types/props/indeterminate.ts","src/components/input-checkbox/types.ts","src/components/input-checkbox/controller.ts","src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type CheckedPropType = boolean;\n\n/**\n * Defines whether the checkbox is checked or not. Can be read and written.\n */\nexport type PropChecked = {\n\tchecked: CheckedPropType;\n};\n\n/* validator */\nexport const validateChecked = (component: Generic.Element.Component, value?: CheckedPropType): void => {\n\twatchBoolean(component, '_checked', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type IndeterminatePropType = boolean;\n\n/**\n * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n */\nexport type PropIndeterminate = {\n\tindeterminate: IndeterminatePropType;\n};\n\n/* validator */\nexport const validateIndeterminate = (component: Generic.Element.Component, value?: IndeterminatePropType): void => {\n\twatchBoolean(component, '_indeterminate', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { AnyIconFontClass } from '../../types/icons';\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { PropChecked } from '../../types/props/checked';\nimport { PropDisabled } from '../../types/props/disabled';\nimport { PropHideError } from '../../types/props/hide-error';\nimport { PropHideLabel } from '../../types/props/hide-label';\nimport { PropIndeterminate } from '../../types/props/indeterminate';\nimport { PropLabelWithExpertSlot } from '../../types/props/label';\nimport { PropName } from '../../types/props/name';\nimport { PropRequired } from '../../types/props/required';\nimport { PropSyncValueBySelector } from '../../types/props/sync-value-by-selector';\nimport { PropTouched } from '../../types/props/touched';\nimport { StencilUnknown } from '../../types/unknown';\n\nexport const inputCheckboxVariantOptions = ['button', 'default', 'switch'] as const;\nexport type InputCheckboxVariant = (typeof inputCheckboxVariantOptions)[number];\n\nexport type InputCheckboxIconsProp =\n\t| {\n\t\t\tchecked: AnyIconFontClass;\n\t\t\tindeterminate?: AnyIconFontClass;\n\t\t\tunchecked?: AnyIconFontClass;\n\t  }\n\t| {\n\t\t\tchecked?: AnyIconFontClass;\n\t\t\tindeterminate: AnyIconFontClass;\n\t\t\tunchecked?: AnyIconFontClass;\n\t  }\n\t| {\n\t\t\tchecked?: AnyIconFontClass;\n\t\t\tindeterminate?: AnyIconFontClass;\n\t\t\tunchecked: AnyIconFontClass;\n\t  };\n\nexport type InputCheckboxIconsState = {\n\tchecked: AnyIconFontClass;\n\tindeterminate: AnyIconFontClass;\n\tunchecked: AnyIconFontClass;\n};\n\ntype RequiredProps = NonNullable<unknown>;\ntype OptionalProps = {\n\taccessKey: string;\n\talert: boolean;\n\terror: string;\n\thint: string;\n\ticons: Stringified<InputCheckboxIconsProp>;\n\ton: InputTypeOnDefault;\n\ttabIndex: number;\n\tvalue: Stringified<StencilUnknown>;\n\tvariant: InputCheckboxVariant;\n} & PropChecked &\n\tPropDisabled &\n\tPropHideError &\n\tPropHideLabel &\n\tPropIndeterminate &\n\tPropLabelWithExpertSlot &\n\tPropName &\n\tPropRequired &\n\tPropSyncValueBySelector &\n\tPropTouched;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\ticons: InputCheckboxIconsState;\n\tid: string;\n\tvalue: StencilUnknown;\n\tvariant: InputCheckboxVariant;\n} & PropChecked &\n\tPropHideError &\n\tPropIndeterminate &\n\tPropLabelWithExpertSlot;\ntype OptionalStates = {\n\taccessKey: string;\n\talert: boolean;\n\terror: string;\n\thint: string;\n\ton: InputTypeOnDefault;\n\ttabIndex: number;\n} & PropDisabled &\n\tPropHideLabel &\n\tPropName &\n\tPropRequired &\n\tPropTouched;\n\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nexport type Watches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\n\nexport type API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { CheckedPropType, validateChecked } from '../../types/props/checked';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { IndeterminatePropType, validateIndeterminate } from '../../types/props/indeterminate';\nimport { StencilUnknown } from '../../types/unknown';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { setState, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIconsProp, InputCheckboxIconsState, InputCheckboxVariant, inputCheckboxVariantOptions, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly setFormAssociatedCheckboxValue = (value: StencilUnknown) => {\n\t\tif (this.component._checked) {\n\t\t\tthis.setFormAssociatedValue(value);\n\t\t} else {\n\t\t\tthis.setFormAssociatedValue(null);\n\t\t}\n\t};\n\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tvalidateChecked(this.component, value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateIcons(value?: Stringified<InputCheckboxIconsProp>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: (nextValue: unknown, nextState: Map<string, unknown>, component: Generic.Element.Component) => {\n\t\t\t\t\t\tnextState.set('_icons', {\n\t\t\t\t\t\t\t...(component.state._icons as InputCheckboxIconsState),\n\t\t\t\t\t\t\t...(nextValue as InputCheckboxIconsProp),\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tvalidateIndeterminate(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tsetState(this.component, '_value', value);\n\t\tthis.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);\n\t}\n\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && inputCheckboxVariantOptions.includes(value),\n\t\t\tnew Set([`String {${inputCheckboxVariantOptions.join(', ')}`]),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateIcons(this.component._icons);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant);\n\t}\n}\n","@import url(../input.css);\n@import url(common.css);\n@import url(button.css);\n@import url(checkbox.css);\n@import url(switch.css);\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { CheckedPropType } from '../../types/props/checked';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { IndeterminatePropType } from '../../types/props/indeterminate';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { API, InputCheckboxIconsProp, InputCheckboxVariant, States } from './types';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\n\n/**\n * @slot expert - Die Beschriftung der Checkbox.\n */\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements API {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tcheckbox: true,\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tchecked: this.state._checked,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tclass=\"icon\"\n\t\t\t\t\t\t\tonClick={this.handleIconClick.bind(this)}\n\t\t\t\t\t\t\t_icons={\n\t\t\t\t\t\t\t\tthis.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tchecked={this.state._checked}\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the checkbox is checked or not. Can be read and written.\n\t * @TODO: Change type back to `CheckedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<InputCheckboxIconsProp>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n\t * @TODO: Change type back to `IndeterminatePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown> = true;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant = 'default';\n\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_hideError: false,\n\t\t_icons: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: `id-${nonce()}`,\n\t\t_indeterminate: false,\n\t\t_label: '', // ⚠ required\n\t\t_value: true,\n\t\t_variant: 'default',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'input-checkbox', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_checked')\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tthis.controller.validateChecked(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<InputCheckboxIconsProp>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tthis.controller.validateIndeterminate(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate handleIconClick(event: Event): void {\n\t\tif (!this.state._disabled) {\n\t\t\tthis.onChange(event);\n\t\t}\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = !this._checked;\n\t\tthis._indeterminate = false;\n\n\t\tconst value = this._checked ? this.state._value : null;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(value);\n\t\tthis.controller.setFormAssociatedCheckboxValue;\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-input-color.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as n,r as e,g as i}from"./index-9c30809b.js";import{n as s}from"./dev.utils-a31cf0e4.js";import{a,s as o}from"./reuse-b3566e4c.js";import{v as l,g as r}from"./controller-873fca4f.js";import{v as d}from"./suggestions-25890d93.js";import{a as h}from"./a11y.tipps-ba8ae150.js";import{w as p,d as u}from"./prop.validators-6cc65427.js";import{I as c}from"./controller-icon-92fc87b9.js";import{I as m}from"./InternalUnderlinedAccessKey-c3bc8e32.js";import"./hide-label-eb1f7b60.js";import"./label-3e545772.js";import"./events-2bb1065b.js";import"./tab-index-8864ef5e.js";import"./associated.controller-687b47db.js";import"./icons-4c438164.js";class f extends c{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){p(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateSuggestions(t){d(this.component,t)}validateValue(t){u(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}validateHideError(t){l(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&h("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHideError(this.component._hideError),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const y="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",b=class{render(){const{ariaDescribedBy:e}=r(this.state),i=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,a=o(this.state._label);return t(n,null,t("kol-input",{class:{color:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_hideError:this.state._hideError,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t("span",null,t(m,{accessKey:this.state._accessKey,label:this.state._label}),t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:i?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade)))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,a(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${s()}`,_label:"",_suggestions:[]},this.controller=new f(this,"input-color",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:y};export{b as kol_input_color};
+import{h as t,F as n,H as e,r as i,g as s}from"./index-9c30809b.js";import{n as a}from"./dev.utils-365879e7.js";import{a as o,s as l}from"./reuse-b3566e4c.js";import{v as r,g as d}from"./controller-039bdc8a.js";import{v as h}from"./suggestions-c147fcd3.js";import{a as p}from"./a11y.tipps-29a5e350.js";import{w as u,d as c}from"./prop.validators-9bbd95a9.js";import{I as m}from"./controller-icon-df4caeef.js";import{I as f}from"./InternalUnderlinedAccessKey-f593c389.js";import"./hide-label-864b40c5.js";import"./label-d63f8231.js";import"./events-2bb1065b.js";import"./tab-index-7088e34e.js";import"./associated.controller-44a2c750.js";import"./icons-548e1642.js";const y=["on","off"];class b extends m{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){u(this.component,"_autoComplete",(t=>"string"==typeof t&&y.includes(t)),new Set(y),t)}validateSuggestions(t){h(this.component,t)}validateValue(t){c(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}validateHideError(t){r(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&p("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHideError(this.component._hideError),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const v="@layer kol-global {\n\t/*\n\t * This file contains all rules for accessibility.\n\t */\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* font-family is NOT inherited all HTML elements. */\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",g=class{render(){const{ariaDescribedBy:i}=d(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,o=l(this.state._label);return t(e,null,t("kol-input",{class:{color:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_hideError:this.state._hideError,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},o?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(n,null,t(f,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade)))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${a()}`,_label:"",_suggestions:[]},this.controller=new b(this,"input-color",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:v};export{g as kol_input_color};

package/dist/kolibri/kol-input-color.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["InputColorController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateSuggestions","validateValue","watchString","setFormAssociatedValue","state","_value","validateHideError","hooks","afterPatch","_hideError","a11yHint","componentWillLoad","_autoComplete","_suggestions","defaultStyleCss","KolInputColor","render","ariaDescribedBy","getRenderStates","hasSuggestions","Array","isArray","length","hasExpertSlot","showExpertSlot","_label","h","Host","class","color","_hideLabel","_accessKey","_disabled","_error","_hint","_icons","_id","_smartButton","_tooltipAlign","_touched","onClick","_a","ref","focus","slot","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","title","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","_name","spellcheck","type","controller","onFacade","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-color/controller.ts","src/components/input-color/style.css?tag=kol-input-color&mode=default&encapsulation=shadow","src/components/input-color/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputColorController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n@layer kol-component {\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { Props as ButtonProps } from '../button/types';\nimport { getRenderStates } from '../input/controller';\nimport { InputColorController } from './controller';\nimport { API, States } from './types';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-color',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputColor implements API {\n\t@Element() private readonly host?: HTMLKolInputColorElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tcolor: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_suggestions={this.state._suggestions}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputColorController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputColorController(this, 'input-color', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["inputTypeOnOffOptions","InputColorController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","includes","Set","validateSuggestions","validateValue","watchString","setFormAssociatedValue","state","_value","validateHideError","hooks","afterPatch","_hideError","a11yHint","componentWillLoad","_autoComplete","_suggestions","defaultStyleCss","KolInputColor","render","ariaDescribedBy","getRenderStates","hasSuggestions","Array","isArray","length","hasExpertSlot","showExpertSlot","_label","h","Host","class","color","_hideLabel","_accessKey","_disabled","_error","_hint","_icons","_id","_smartButton","_tooltipAlign","_touched","onClick","_a","ref","focus","slot","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","title","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","_name","spellcheck","type","controller","onFacade","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/types/input/types.ts","src/components/input-color/controller.ts","src/components/input-color/style.css?tag=kol-input-color&mode=default&encapsulation=shadow","src/components/input-color/component.tsx"],"sourcesContent":["import { Events } from '../../enums/events';\nimport { EventCallback, EventValueOrEventCallback } from '../callbacks';\n\nexport const inputTypeOnOffOptions = ['on', 'off'] as const;\nexport type InputTypeOnOff = (typeof inputTypeOnOffOptions)[number];\n\ntype InputTypeOnBlur = {\n\t[Events.onBlur]?: EventCallback<Event>;\n};\n\ntype InputTypeOnClick = {\n\t[Events.onClick]?: EventCallback<Event>;\n};\n\ntype InputTypeOnChange = {\n\t[Events.onChange]?: EventValueOrEventCallback<Event, unknown>;\n};\n\ntype InputTypeOnFocus = {\n\t[Events.onFocus]?: EventCallback<Event>;\n};\n\n// https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element\nexport type Option<T> = {\n\tdisabled?: boolean;\n\tlabel: string | number;\n\t// selected?: boolean; // wird über den value der *-Komponente gesteuert\n\tvalue: T;\n};\n\nexport type Optgroup<T> = {\n\tdisabled?: boolean;\n\tlabel: string;\n\toptions: Option<T>[];\n};\n\nexport type SelectOption<T> = Option<T> | Optgroup<T>;\n\nexport type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus;\n","import { Generic } from '@a11y-ui/core';\n\nimport { InputTypeOnOff, inputTypeOnOffOptions } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputColorController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && inputTypeOnOffOptions.includes(value),\n\t\t\tnew Set(inputTypeOnOffOptions),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n@layer kol-component {\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { Props as ButtonProps } from '../button/types';\nimport { getRenderStates } from '../input/controller';\nimport { InputColorController } from './controller';\nimport { API, States } from './types';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-color',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputColor implements API {\n\t@Element() private readonly host?: HTMLKolInputColorElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tcolor: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_suggestions={this.state._suggestions}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputColorController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputColorController(this, 'input-color', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":";;;ypBAGO,MAAMA,EAAwB,CAAC,KAAM,O,MCO/BC,UAA6BC,EAGzC,WAAAC,CAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GACvBE,KAAKJ,UAAYA,C,CAGX,oBAAAK,CAAqBC,GAC3BC,EACCH,KAAKJ,UACL,iBACCM,UAA0BA,IAAU,UAAYV,EAAsBY,SAASF,IAChF,IAAIG,IAAIb,GACRU,E,CAIK,mBAAAI,CAAoBJ,GAC1BI,EAAoBN,KAAKJ,UAAWM,E,CAG9B,aAAAK,CAAcL,GACpBM,EAAYR,KAAKJ,UAAW,SAAUM,GACtCF,KAAKS,uBAAuBT,KAAKJ,UAAUc,MAAMC,O,CAG3C,iBAAAC,CAAkBV,GACxBU,EAAkBZ,KAAKJ,UAAWM,EAAO,CACxCW,MAAO,CACNC,WAAY,KACX,GAAId,KAAKJ,UAAUc,MAAMK,WAAY,CACpCC,EAAS,2G,MAOP,iBAAAC,GACNlB,MAAMkB,oBACNjB,KAAKC,qBAAqBD,KAAKJ,UAAUsB,eACzClB,KAAKY,kBAAkBZ,KAAKJ,UAAUmB,YACtCf,KAAKM,oBAAoBN,KAAKJ,UAAUuB,cACxCnB,KAAKO,cAAcP,KAAKJ,UAAUe,O,ECtDpC,MAAMS,EAAkB,+8J,MC8BXC,EAAa,MASlB,MAAAC,GACN,MAAMC,gBAAEA,GAAoBC,EAAgBxB,KAAKU,OACjD,MAAMe,EAAiBC,MAAMC,QAAQ3B,KAAKU,MAAMS,eAAiBnB,KAAKU,MAAMS,aAAaS,OAAS,EAClG,MAAMC,EAAgBC,EAAe9B,KAAKU,MAAMqB,QAEhD,OACCC,EAACC,EAAI,KACJD,EAAA,aACCE,MAAO,CACNC,MAAO,KACP,eAAgBnC,KAAKU,MAAM0B,YAE5BC,WAAYrC,KAAKU,MAAM2B,WACvBC,UAAWtC,KAAKU,MAAM4B,UACtBC,OAAQvC,KAAKU,MAAM6B,OACnBH,WAAYpC,KAAKU,MAAM0B,WACvBI,MAAOxC,KAAKU,MAAM8B,MAClBC,OAAQzC,KAAKU,MAAM+B,OACnB1B,WAAYf,KAAKU,MAAMK,WACvB2B,IAAK1C,KAAKU,MAAMgC,IAChBX,OAAQ/B,KAAKU,MAAMqB,OACnBZ,aAAcnB,KAAKU,MAAMS,aACzBwB,aAAc3C,KAAKU,MAAMiC,aACzBC,cAAe5C,KAAK4C,cACpBC,SAAU7C,KAAKU,MAAMmC,SACrBC,QAAS,SAAAC,EAAM,OAAAA,EAAA/C,KAAKgD,OAAG,MAAAD,SAAA,SAAAA,EAAEE,OAAO,GAEhCjB,EAAA,QAAMkB,KAAK,SACTrB,EACAG,EAAA,QAAMnC,KAAK,kBACDG,KAAKU,MAAM2B,aAAe,SACpCL,EAAAmB,EAAA,KACCnB,EAACoB,EAA2B,CAACC,UAAWrD,KAAKU,MAAM2B,WAAYiB,MAAOtD,KAAKU,MAAMqB,SAAW,IAC5FC,EAAA,QAAME,MAAM,kBAAiB,cAAa,QACxClC,KAAKU,MAAM2B,aAIdL,EAAA,YAAOhC,KAAKU,MAAMqB,SAGpBC,EAAA,OAAKkB,KAAK,SACTlB,EAAA,QAAAuB,OAAAC,OAAA,CACCR,IAAKhD,KAAKyD,SACVC,MAAM,GACNL,UAAWrD,KAAKU,MAAM2B,WAAU,mBACdd,EAAgBK,OAAS,EAAIL,EAAgBoC,KAAK,KAAOC,UAAS,aACxE5D,KAAKU,MAAM0B,mBAAqBpC,KAAKU,MAAMqB,SAAW,SAAW/B,KAAKU,MAAMqB,OAAS6B,UACjGC,eAAe,MACfC,aAAc9D,KAAKU,MAAMQ,cACzB6C,YAAY,MACZC,SAAUhE,KAAKU,MAAM4B,UACrB2B,GAAIjE,KAAKU,MAAMgC,IACfwB,KAAMzC,EAAiB,GAAGzB,KAAKU,MAAMgC,WAAakB,UAClD/D,KAAMG,KAAKU,MAAMyD,MACjBjB,KAAK,QACLkB,WAAW,QACXC,KAAK,QACLnE,MAAOF,KAAKU,MAAMC,QACdX,KAAKsE,WAAWC,a,CA4H1B,WAAA5E,CAAA6E,G,UA5LiBxE,KAAAyD,SAAYT,IAC5BhD,KAAKgD,IAAMA,EACXyB,EAAezE,KAAKF,KAAME,KAAKgD,IAAI,E,sCAgF8B,K,4CAW7B,M,sCAWiC,M,gBAOhC,M,WAKN,G,+OAmDsB,M,cAMc,M,iCAOpC,CAC/B9B,cAAe,MACfH,WAAY,MACZ2B,IAAK,MAAMgC,MACX3C,OAAQ,GACRZ,aAAc,IAIdnB,KAAKsE,WAAa,IAAI7E,EAAqBO,KAAM,cAAeA,KAAKF,K,CAI/D,iBAAA6E,CAAkBzE,GACxBF,KAAKsE,WAAWK,kBAAkBzE,E,CAI5B,aAAA0E,CAAc1E,GACpBF,KAAKsE,WAAWM,cAAc1E,E,CAIxB,oBAAAD,CAAqBC,GAC3BF,KAAKsE,WAAWrE,qBAAqBC,E,CAI/B,gBAAA2E,CAAiB3E,GACvBF,KAAKsE,WAAWO,iBAAiB3E,E,CAI3B,aAAA4E,CAAc5E,GACpBF,KAAKsE,WAAWQ,cAAc5E,E,CAIxB,iBAAAU,CAAkBV,GACxBF,KAAKsE,WAAW1D,kBAAkBV,E,CAI5B,iBAAA6E,CAAkB7E,GACxBF,KAAKsE,WAAWS,kBAAkB7E,E,CAI5B,YAAA8E,CAAa9E,GACnBF,KAAKsE,WAAWU,aAAa9E,E,CAIvB,aAAA+E,CAAc/E,GACpBF,KAAKsE,WAAWW,cAAc/E,E,CAIxB,UAAAgF,CAAWhF,GACjBF,KAAKsE,WAAWY,WAAWhF,E,CAIrB,aAAAiF,CAAcjF,GACpBF,KAAKsE,WAAWa,cAAcjF,E,CAIxB,YAAAkF,CAAalF,GACnBF,KAAKsE,WAAWc,aAAalF,E,CAIvB,UAAAmF,CAAWnF,GACjBF,KAAKsE,WAAWe,WAAWnF,E,CAIrB,mBAAAoF,CAAoBpF,GAC1BF,KAAKsE,WAAWgB,oBAAoBpF,E,CAI9B,mBAAAI,CAAoBJ,GAC1BF,KAAKsE,WAAWhE,oBAAoBJ,E,CAI9B,2BAAAqF,CAA4BrF,GAClCF,KAAKsE,WAAWiB,4BAA4BrF,E,CAItC,gBAAAsF,CAAiBtF,GACvBF,KAAKsE,WAAWkB,iBAAiBtF,E,CAI3B,eAAAuF,CAAgBvF,GACtBF,KAAKsE,WAAWmB,gBAAgBvF,E,CAI1B,aAAAK,CAAcL,GACpBF,KAAKsE,WAAW/D,cAAcL,E,CAGxB,iBAAAe,GACNjB,KAAK0F,OAAS1F,KAAK0F,SAAW,KAC9B1F,KAAK6C,SAAW7C,KAAK6C,WAAa,KAClC7C,KAAKsE,WAAWrD,mB"}