@formkit/pro 0.115.10-3043ed6 → 0.116.0

package/README.md

@@ -5,6 +5,7 @@ FormKit Pro is a first party library of professional grade "synthetic" inputs fo
 - Autocomplete
 - Datepicker
 - Dropdown
+- Colorpicker
 - Mask
 - Rating
 - Repeater

package/colorpicker/colorpicker.ts

@@ -43,7 +43,7 @@ import {
   swatch,
 } from '../sections/colorpickerSections'
 import { $if } from '../compose'
-import { defaultIcon, options } from '@formkit/inputs'
+import { defaultIcon, options, localize } from '@formkit/inputs'
 import colorFeature from '../features/color'
 
 /**
@@ -59,8 +59,11 @@ export const colorpicker: FormKitProInput = {
       label('$label'),
       $if('$inline && $help', help('$help')),
       inner(
-        icon('prefix', 'label'),
-        prefix(),
+        $if(
+          '($inline === undefined || $inline === false) && $prefixIcon !== undefined',
+          icon('prefix', 'label')
+        ),
+        $if('$inline === undefined || $inline === false', prefix()),
         $if(
           '$inline === undefined || $inline === false',
           swatchPreview(canvasSwatchPreview(), $if('$showValue', valueString()))
@@ -68,7 +71,10 @@ export const colorpicker: FormKitProInput = {
         $if(
           '$inline || $panelIsOpen)',
           panel(
-            $if('$showPanelClose', panelClose(icon('close'))),
+            $if(
+              '$showPanelClose && ($inline === undefined || $inline === false)',
+              panelClose(icon('close'))
+            ),
             $if(
               '$panelControls',
               controlGroup(
@@ -107,8 +113,11 @@ export const colorpicker: FormKitProInput = {
             $if('$options', swatches(swatch()))
           )
         ),
-        suffix(),
-        icon('suffix')
+        $if('$inline === undefined || $inline === false', suffix()),
+        $if(
+          '($inline === undefined || $inline === false) && $suffixIcon !== undefined',
+          icon('suffix')
+        )
       ),
       $if(
         '$: ($inline === undefined || $inline === false) && $help',
@@ -149,5 +158,7 @@ export const colorpicker: FormKitProInput = {
     options,
     defaultIcon('eyeDropper', 'color'),
     defaultIcon('close', 'close'),
+    localize('close'),
+    localize('next'),
   ],
 }

package/colorpicker/index.mjs

@@ -1 +1 @@
-import{createSectionFactory as a,createBaseSections as e}from"../index.mjs";const s=a("cp"),{outer:l,wrapper:i,inner:t,label:r,prefix:n,suffix:d,help:$,messages:o,message:c,icon:h}=e(s),u=s("swatchPreview",(()=>({$el:"div",attrs:{class:"$classes.swatchPreview",tabindex:{if:"$disabled",then:-1,else:0},onClick:"$handlers.inputPreviewClick",onFocusout:"$handlers.inputPreviewFocusout",onKeydown:"$handlers.inputPreviewKeydown",role:"button","aria-valuetext":'$: "Current color: " + $value'}}))),p=s("valueString",(()=>({$el:"span",attrs:{class:"$classes.valueString"},children:{if:'$format === "hex"',then:"$hex",else:{if:'$format === "rgba"',then:"$rgbaString",else:{if:'$format === "hsla"',then:"$hslaString",else:""}}}}))),b=s("panel",(()=>({$el:"div",attrs:{class:"$classes.panel",onKeydown:"$handlers.panelKeydown","aria-role":{if:"$layout === popover",then:"dialog"},"aria-modal":{if:"$layout === popover",then:"true"},"aria-label":"$label",style:{position:{if:"$inline === undefined || $inline === false",then:"absolute"}}}}))),v=s("panelClose",(()=>({$el:"button",attrs:{class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:{if:"$showPanelClose",then:-1,else:0},onKeydown:"$handlers.panelCloseKeydown","aria-label":"Close"}}))),w=s("controlGroup",(()=>({$el:"div",attrs:{class:"$classes.controlGroup","data-eye-dropper":"$hasNativeEyeDropper && $eyeDropper",role:"group"}}))),f=s("LS",(()=>({$el:"div",attrs:{class:"$classes.LS"}}))),g=s("canvasLS",(()=>({$el:"canvas",attrs:{id:'$: "canvas-ls-" + $id',class:'$classes.canvas + " " + $classes.canvasLS',width:256,height:256,"aria-hidden":"true"}}))),y=s("controlLS",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},class:'$classes.control + " " + $classes.controlLS',onKeydown:"$handlers.lsKeydown",style:{left:'$controlLSPosition.x + "%"',top:'$controlLSPosition.y + "%"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuetext":'$: "Lightness: " + $hslaPercent.l + "%, Saturation: " + $hslaPercent.s + "%"',"aria-label":"Lightness and Saturation"}}))),m=s("hue",(()=>({$el:"div",attrs:{class:"$classes.hue"}}))),x=s("canvasHue",(()=>({$el:"canvas",attrs:{id:'$: "canvas-hue-" + $id',class:'$classes.canvas + " " + $classes.canvasHue',width:256,height:10,"aria-hidden":"true"}}))),F=s("controlHue",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.hueControlKeydown",class:'$classes.control + " " + $classes.controlHue',style:{left:'$: "min(max(" + (($hsla.h / 360) * 100) + "%, 3px), calc(100% - 3px))"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, 100%, 50%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$h","aria-label":"Hue"}}))),K=s("alpha",(()=>({$el:"div",attrs:{class:"$classes.alpha"}}))),S=s("canvasAlpha",(()=>({$el:"canvas",attrs:{id:'$: "canvas-alpha-" + $id',class:'$classes.canvas + " " + $classes.canvasAlpha',width:256,height:10,"aria-hidden":"true"}}))),L=s("controlAlpha",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.alphaControlKeydown",class:'$classes.control + " " + $classes.controlAlpha',style:{left:'$: "min(max(" + ($hsla.a * 100) + "%, 3px), calc(100% - 3px))"',backgroundImage:'$: "linear-gradient(to right, hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + "), hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + ")), linear-gradient(to right, white, white)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$hsla.a","aria-label":"Alpha"}}))),G=s("preview",(()=>({$el:"div",attrs:{class:"$classes.preview"}}))),C=s("canvasPreview",(()=>({$el:"canvas",attrs:{id:'$: "canvas-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasPreview',width:33,height:33,"aria-hidden":"true"}}))),I=s("canvasSwatchPreview",(()=>({$el:"div",attrs:{class:"$classes.canvasSwatchPreviewWrapper"},children:[{$el:"canvas",attrs:{id:'$: "canvas-swatch-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasSwatchPreview',width:33,height:33,"aria-hidden":"true"}}]}))),P=s("eyeDropper",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},role:"button","aria-label":"Eye Dropper",onKeydown:"$handlers.eyeDropperKeydown",id:'$: "eye-dropper-" + $id',class:"$classes.eyeDropper"}}))),k=s("formatField",(()=>({$el:"div",attrs:{class:"$classes.formatField"}}))),H=s("colorInputGroup",(()=>({$el:"div",attrs:{class:"$classes.colorInputGroup","aria-role":"group"}}))),A=s("hexField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hexFieldGroup'},children:[{$el:"input",attrs:{onInput:"$handlers.hexInput",onKeydown:"$handlers.hexKeydown",onFocus:"$handlers.hexFocus",onBlur:"$handlers.hexBlur",id:'$: "hex-" + $id',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",class:'$classes.colorField + " " + $classes.hexField',value:"$hex",autocomplete:"off"}},{$el:"label",children:"HEX",attrs:{for:'$: "hex-" + $id',class:"$classes.fieldLabel"}}]}))),D=s("rField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.rFieldGroup'},children:[{$el:"input",attrs:{id:'$: "r-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.rField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.r",autocomplete:"off","aria-label":"Red"}},{$el:"label",children:"R",attrs:{for:'$: "r-" + $id',class:"$classes.fieldLabel"}}]}))),T=s("gField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.gFieldGroup'},children:[{$el:"input",attrs:{id:'$: "g-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.gField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.g",autocomplete:"off","aria-label":"Green"}},{$el:"label",children:"G",attrs:{for:'$: "g-" + $id',class:"$classes.fieldLabel"}}]}))),B=s("bField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.bFieldGroup'},children:[{$el:"input",attrs:{id:'$: "b-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.bField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.b",autocomplete:"off","aria-label":"Blue"}},{$el:"label",children:"B",attrs:{for:'$: "b-" + $id',class:"$classes.fieldLabel"}}]}))),E=s("aField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.aFieldGroup'},children:[{$el:"input",attrs:{id:'$: "a-" + $id',onInput:'$handlers.rangeLimitInput("alpha", 0, 1)',onKeydown:'$handlers.rangeLimitKeydown("alpha", 0, 1, 0.01)',type:"text",class:'$classes.colorField + " " + $classes.aField',value:"$rgba.a",tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",autocomplete:"off"},"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$rgba.a","aria-label":"Alpha"},{$el:"label",children:"A",attrs:{for:'$: "a-" + $id',class:"$classes.fieldLabel"}}]}))),N=s("hField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hFieldGroup'},children:[{$el:"input",attrs:{id:'$: "h-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 360)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 360, 1)',type:"text",class:'$classes.colorField + " " + $classes.hField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.h",autocomplete:"off","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$hsla.h","aria-label":"Hue"}},{$el:"label",children:"H",attrs:{for:'$: "h-" + $id',class:"$classes.fieldLabel"}}]}))),R=s("sField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.sFieldGroup'},children:[{$el:"input",attrs:{id:'$: "s-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.sField',tabindex:{if:"$disabled",then:-1,else:0},value:"$hslaPercent.s",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.s","aria-label":"Saturation"}},{$el:"label",children:"S",attrs:{for:'$: "s-" + $id',class:"$classes.fieldLabel"}}]}))),U=s("lField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.lFieldGroup'},children:[{$el:"input",attrs:{id:'$: "l-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.lField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.l",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.l","aria-label":"Lightness"}},{$el:"label",children:"L",attrs:{for:'$: "l-" + $id',class:"$classes.fieldLabel"}}]}))),W=s("formatSwitcher",(()=>({$el:"div",attrs:{class:"$classes.formatSwitcher",onClick:"$handlers.toggleFormat",tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.formatSwitcherKeydown",role:"button","aria-label":"Change Format"}}))),X=s("swatches",(()=>({$el:"div",attrs:{id:'$: "swatches-" + $id',class:"$classes.swatches","data-keyboard-nav":"$swatchIsUsingKeyboardNav"}}))),j=s("swatch",(()=>({$el:"div",for:["swatch","index","$options"],if:"$swatch",attrs:{if:"$swatch.group",then:{class:"$classes.swatchGroup"},else:{class:"$classes.swatch",title:"$swatch.label"}},children:{if:"$swatch.group",then:[{$el:"span",attrs:{class:"$classes.swatchGroupLabel"},children:"$swatch.group"},{$el:"div",for:["groupSwatch","swatchIndex","$swatch.options"],attrs:{class:"$classes.swatch",title:"$groupSwatch.label"},children:[{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($groupSwatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$groupSwatch.label + "-" + $groupSwatch.value',"data-color":"$fns.anyToHsvaString($groupSwatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($groupSwatch.value, 2)","data-group":"$index",role:"button","aria-label":"$swatch.label"}}]}],else:{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($swatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$swatch.label + "-" + $swatch.value',"data-color":"$fns.anyToHsvaString($swatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($swatch.value, 2)","data-group":0,role:"button","aria-label":"$swatch.label"}}}})));export{f as LS,E as aField,K as alpha,B as bField,S as canvasAlpha,x as canvasHue,g as canvasLS,C as canvasPreview,I as canvasSwatchPreview,H as colorInputGroup,L as controlAlpha,w as controlGroup,F as controlHue,y as controlLS,s as createSection,P as eyeDropper,k as formatField,W as formatSwitcher,T as gField,N as hField,$ as help,A as hexField,m as hue,h as icon,t as inner,U as lField,r as label,c as message,o as messages,l as outer,b as panel,v as panelClose,n as prefix,G as preview,D as rField,R as sField,d as suffix,j as swatch,u as swatchPreview,X as swatches,p as valueString,i as wrapper};
+import{createSectionFactory as e,createBaseSections as a}from"../index.mjs";const s=e("cp"),{outer:l,wrapper:t,inner:i,label:r,prefix:n,suffix:d,help:$,messages:o,message:c,icon:h}=a(s),u=s("swatchPreview",(()=>({$el:"div",attrs:{class:"$classes.swatchPreview",tabindex:{if:"$disabled",then:-1,else:0},onClick:"$handlers.inputPreviewClick",onFocusout:"$handlers.inputPreviewFocusout",onKeydown:"$handlers.inputPreviewKeydown",role:"button","aria-valuetext":'$: "Current color: " + $value'}}))),p=s("valueString",(()=>({$el:"span",attrs:{class:"$classes.valueString"},children:{if:'$format === "hex"',then:"$hex",else:{if:'$format === "rgba"',then:"$rgbaString",else:{if:'$format === "hsla"',then:"$hslaString",else:""}}}}))),v=s("panel",(()=>({$el:"div",attrs:{id:"$id",class:"$classes.panel",onKeydown:"$handlers.panelKeydown","aria-role":{if:"$layout === popover",then:"dialog"},"aria-modal":{if:"$layout === popover",then:"true"},"aria-label":"$label",style:{position:{if:"$inline === undefined || $inline === false",then:"absolute"}}}}))),w=s("panelClose",(()=>({$el:"button",attrs:{class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:{if:"$showPanelClose",then:-1,else:0},onKeydown:"$handlers.panelCloseKeydown","aria-label":"$ui.close.value"}}))),b=s("controlGroup",(()=>({$el:"div",attrs:{class:"$classes.controlGroup","data-eye-dropper":"$hasNativeEyeDropper && $eyeDropper",role:"group"}}))),f=s("LS",(()=>({$el:"div",attrs:{class:"$classes.LS"}}))),g=s("canvasLS",(()=>({$el:"canvas",attrs:{id:'$: "canvas-ls-" + $id',class:'$classes.canvas + " " + $classes.canvasLS',width:256,height:256,"aria-hidden":"true"}}))),y=s("controlLS",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},class:'$classes.control + " " + $classes.controlLS',onKeydown:"$handlers.lsKeydown",style:{left:'$controlLSPosition.x + "%"',top:'$controlLSPosition.y + "%"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuetext":'$: "Lightness: " + $hslaPercent.l + "%, Saturation: " + $hslaPercent.s + "%"'}}))),m=s("hue",(()=>({$el:"div",attrs:{class:"$classes.hue"}}))),x=s("canvasHue",(()=>({$el:"canvas",attrs:{id:'$: "canvas-hue-" + $id',class:'$classes.canvas + " " + $classes.canvasHue',width:256,height:10,"aria-hidden":"true"}}))),F=s("controlHue",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.hueControlKeydown",class:'$classes.control + " " + $classes.controlHue',style:{left:'$: "min(max(" + (($hsla.h / 360) * 100) + "%, 3px), calc(100% - 3px))"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, 100%, 50%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$h"}}))),K=s("alpha",(()=>({$el:"div",attrs:{class:"$classes.alpha"}}))),S=s("canvasAlpha",(()=>({$el:"canvas",attrs:{id:'$: "canvas-alpha-" + $id',class:'$classes.canvas + " " + $classes.canvasAlpha',width:256,height:10,"aria-hidden":"true"}}))),L=s("controlAlpha",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.alphaControlKeydown",class:'$classes.control + " " + $classes.controlAlpha',style:{left:'$: "min(max(" + ($hsla.a * 100) + "%, 3px), calc(100% - 3px))"',backgroundImage:'$: "linear-gradient(to right, hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + "), hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + ")), linear-gradient(to right, white, white)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$hsla.a"}}))),G=s("preview",(()=>({$el:"div",attrs:{class:"$classes.preview"}}))),I=s("canvasPreview",(()=>({$el:"canvas",attrs:{id:'$: "canvas-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasPreview',width:33,height:33,"aria-hidden":"true"}}))),C=s("canvasSwatchPreview",(()=>({$el:"div",attrs:{class:"$classes.canvasSwatchPreviewWrapper"},children:[{$el:"canvas",attrs:{id:'$: "canvas-swatch-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasSwatchPreview',width:33,height:33,"aria-hidden":"true"}}]}))),P=s("eyeDropper",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},role:"button",onKeydown:"$handlers.eyeDropperKeydown",id:'$: "eye-dropper-" + $id',class:"$classes.eyeDropper"}}))),k=s("formatField",(()=>({$el:"div",attrs:{class:"$classes.formatField"}}))),H=s("colorInputGroup",(()=>({$el:"div",attrs:{class:"$classes.colorInputGroup","aria-role":"group"}}))),T=s("hexField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hexFieldGroup'},children:[{$el:"input",attrs:{onInput:"$handlers.hexInput",onKeydown:"$handlers.hexKeydown",onFocus:"$handlers.hexFocus",onBlur:"$handlers.hexBlur",id:'$: "hex-" + $id',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",class:'$classes.colorField + " " + $classes.hexField',value:"$hex",autocomplete:"off"}},{$el:"label",children:"HEX",attrs:{for:'$: "hex-" + $id',class:"$classes.fieldLabel"}}]}))),A=s("rField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.rFieldGroup'},children:[{$el:"input",attrs:{id:'$: "r-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.rField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.r",autocomplete:"off"}},{$el:"label",children:"R",attrs:{for:'$: "r-" + $id',class:"$classes.fieldLabel"}}]}))),D=s("gField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.gFieldGroup'},children:[{$el:"input",attrs:{id:'$: "g-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.gField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.g",autocomplete:"off"}},{$el:"label",children:"G",attrs:{for:'$: "g-" + $id',class:"$classes.fieldLabel"}}]}))),B=s("bField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.bFieldGroup'},children:[{$el:"input",attrs:{id:'$: "b-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.bField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.b",autocomplete:"off"}},{$el:"label",children:"B",attrs:{for:'$: "b-" + $id',class:"$classes.fieldLabel"}}]}))),E=s("aField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.aFieldGroup'},children:[{$el:"input",attrs:{id:'$: "a-" + $id',onInput:'$handlers.rangeLimitInput("alpha", 0, 1)',onKeydown:'$handlers.rangeLimitKeydown("alpha", 0, 1, 0.01)',type:"text",class:'$classes.colorField + " " + $classes.aField',value:"$rgba.a",tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",autocomplete:"off"},"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$rgba.a"},{$el:"label",children:"A",attrs:{for:'$: "a-" + $id',class:"$classes.fieldLabel"}}]}))),N=s("hField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hFieldGroup'},children:[{$el:"input",attrs:{id:'$: "h-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 360)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 360, 1)',type:"text",class:'$classes.colorField + " " + $classes.hField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.h",autocomplete:"off","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$hsla.h"}},{$el:"label",children:"H",attrs:{for:'$: "h-" + $id',class:"$classes.fieldLabel"}}]}))),R=s("sField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.sFieldGroup'},children:[{$el:"input",attrs:{id:'$: "s-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.sField',tabindex:{if:"$disabled",then:-1,else:0},value:"$hslaPercent.s",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.s"}},{$el:"label",children:"S",attrs:{for:'$: "s-" + $id',class:"$classes.fieldLabel"}}]}))),U=s("lField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.lFieldGroup'},children:[{$el:"input",attrs:{id:'$: "l-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.lField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.l",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.l"}},{$el:"label",children:"L",attrs:{for:'$: "l-" + $id',class:"$classes.fieldLabel"}}]}))),W=s("formatSwitcher",(()=>({$el:"div",attrs:{class:"$classes.formatSwitcher",onClick:"$handlers.toggleFormat",tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.formatSwitcherKeydown",role:"button","aria-label":"$ui.next.value"}}))),X=s("swatches",(()=>({$el:"div",attrs:{id:'$: "swatches-" + $id',class:"$classes.swatches","data-keyboard-nav":"$swatchIsUsingKeyboardNav"}}))),j=s("swatch",(()=>({$el:"div",for:["swatch","index","$options"],if:"$swatch",attrs:{if:"$swatch.group",then:{class:"$classes.swatchGroup"},else:{class:"$classes.swatch",title:"$swatch.label"}},children:{if:"$swatch.group",then:[{$el:"span",attrs:{class:"$classes.swatchGroupLabel"},children:"$swatch.group"},{$el:"div",for:["groupSwatch","swatchIndex","$swatch.options"],attrs:{class:"$classes.swatch",title:"$groupSwatch.label"},children:[{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($groupSwatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$groupSwatch.label + "-" + $groupSwatch.value',"data-color":"$fns.anyToHsvaString($groupSwatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($groupSwatch.value, 2)","data-group":"$index","data-label":"$swatch.label",role:"button","aria-label":"$swatch.label"}}]}],else:{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($swatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$swatch.label + "-" + $swatch.value',"data-color":"$fns.anyToHsvaString($swatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($swatch.value, 2)","data-group":0,"data-label":"$swatch.label",role:"button","aria-label":"$swatch.label"}}}})));export{f as LS,E as aField,K as alpha,B as bField,S as canvasAlpha,x as canvasHue,g as canvasLS,I as canvasPreview,C as canvasSwatchPreview,H as colorInputGroup,L as controlAlpha,b as controlGroup,F as controlHue,y as controlLS,s as createSection,P as eyeDropper,k as formatField,W as formatSwitcher,D as gField,N as hField,$ as help,T as hexField,m as hue,h as icon,i as inner,U as lField,r as label,c as message,o as messages,l as outer,v as panel,w as panelClose,n as prefix,G as preview,A as rField,R as sField,d as suffix,j as swatch,u as swatchPreview,X as swatches,p as valueString,t as wrapper};

package/dropdown/dropdown.ts

@@ -104,7 +104,7 @@ export const dropdown: FormKitProInput = {
           ),
           $if('$state.loading', icon('loader')),
           $if(
-            '$value && $selectionRemovable',
+            '$value !== undefined && $value !== null && $selectionRemovable',
             removeSelection(icon('close')),
             icon('select')
           )