2024-05-29 18:43:41 +00:00
import { a as subscribe , h as set _store _value , c as compute _rest _props , j as createEventDispatcher } from './lifecycle-CPZ0ouVO.js' ;
2024-06-10 19:21:30 +00:00
import { c as create _ssr _component , b as add _attribute , v as validate _component , e as escape , m as missing _component , g as add _styles , s as spread , f as escape _object } from './ssr-DX6yy04n.js' ;
import { F as Form _field , C as Control , a as Form _label , I as Input$1 , b as Form _field _errors , S as Switch , T as Textarea , g as getFormField , d as getDataFsError , e as generateId } from './textarea-CXaJXNdg.js' ;
2024-05-29 18:43:41 +00:00
import './stores-D9BZZahs.js' ;
import { g as superForm } from './index-k1TR3EJq.js' ;
import './index-Ddp2AB5f.js' ;
import { b as zodClient } from './zod-BtM9a6Uj.js' ;
2024-06-10 19:21:30 +00:00
import { s as schema } from './7-VNQxFZGk.js' ;
2024-05-29 18:43:41 +00:00
import { f as toast } from './index-EscoC7AS.js' ;
2024-05-29 19:31:10 +00:00
import { c as config } from './config-BHx687w1.js' ;
2024-06-10 19:21:30 +00:00
import { c as cn , B as Button } from './button-DV8DKkH_.js' ;
2024-05-29 18:43:41 +00:00
import './index3-TIAgGdNz.js' ;
import './index2-CkEewRlU.js' ;
import 'clsx' ;
import './exports-DuWZopOC.js' ;
import './stringify-D5iWhcfN.js' ;
import './scheduler-DW9WkiYZ.js' ;
import 'zod' ;
2024-05-29 19:31:10 +00:00
import './shared-server-i79vVjEm.js' ;
2024-06-10 19:21:30 +00:00
import 'tailwind-merge' ;
2024-05-29 18:43:41 +00:00
import 'tailwind-variants' ;
import './ssr2-BVSPLo1E.js' ;
var r = { grad : . 9 , turn : 360 , rad : 360 / ( 2 * Math . PI ) } , t = function ( r ) { return "string" == typeof r ? r . length > 0 : "number" == typeof r } , n = function ( r , t , n ) { return void 0 === t && ( t = 0 ) , void 0 === n && ( n = Math . pow ( 10 , t ) ) , Math . round ( n * r ) / n + 0 } , e = function ( r , t , n ) { return void 0 === t && ( t = 0 ) , void 0 === n && ( n = 1 ) , r > n ? n : r > t ? r : t } , u = function ( r ) { return ( r = isFinite ( r ) ? r % 360 : 0 ) > 0 ? r : r + 360 } , a = function ( r ) { return { r : e ( r . r , 0 , 255 ) , g : e ( r . g , 0 , 255 ) , b : e ( r . b , 0 , 255 ) , a : e ( r . a ) } } , o = function ( r ) { return { r : n ( r . r ) , g : n ( r . g ) , b : n ( r . b ) , a : n ( r . a , 3 ) } } , i = /^#([0-9a-f]{3,8})$/i , s = function ( r ) { var t = r . toString ( 16 ) ; return t . length < 2 ? "0" + t : t } , h = function ( r ) { var t = r . r , n = r . g , e = r . b , u = r . a , a = Math . max ( t , n , e ) , o = a - Math . min ( t , n , e ) , i = o ? a === t ? ( n - e ) / o : a === n ? 2 + ( e - t ) / o : 4 + ( t - n ) / o : 0 ; return { h : 60 * ( i < 0 ? i + 6 : i ) , s : a ? o / a * 100 : 0 , v : a / 255 * 100 , a : u } } , b = function ( r ) { var t = r . h , n = r . s , e = r . v , u = r . a ; t = t / 360 * 6 , n /= 100 , e /= 100 ; var a = Math . floor ( t ) , o = e * ( 1 - n ) , i = e * ( 1 - ( t - a ) * n ) , s = e * ( 1 - ( 1 - t + a ) * n ) , h = a % 6 ; return { r : 255 * [ e , i , o , o , s , e ] [ h ] , g : 255 * [ s , e , e , i , o , o ] [ h ] , b : 255 * [ o , o , s , e , e , i ] [ h ] , a : u } } , g = function ( r ) { return { h : u ( r . h ) , s : e ( r . s , 0 , 100 ) , l : e ( r . l , 0 , 100 ) , a : e ( r . a ) } } , d = function ( r ) { return { h : n ( r . h ) , s : n ( r . s ) , l : n ( r . l ) , a : n ( r . a , 3 ) } } , f = function ( r ) { return b ( ( n = ( t = r ) . s , { h : t . h , s : ( n *= ( ( e = t . l ) < 50 ? e : 100 - e ) / 100 ) > 0 ? 2 * n / ( e + n ) * 100 : 0 , v : e + n , a : t . a } ) ) ; var t , n , e ; } , c = function ( r ) { return { h : ( t = h ( r ) ) . h , s : ( u = ( 200 - ( n = t . s ) ) * ( e = t . v ) / 100 ) > 0 && u < 200 ? n * e / 100 / ( u <= 100 ? u : 200 - u ) * 100 : 0 , l : u / 2 , a : t . a } ; var t , n , e , u ; } , l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i , p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i , v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i , m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i , y = { string : [ [ function ( r ) { var t = i . exec ( r ) ; return t ? ( r = t [ 1 ] ) . length <= 4 ? { r : parseInt ( r [ 0 ] + r [ 0 ] , 16 ) , g : parseInt ( r [ 1 ] + r [ 1 ] , 16 ) , b : parseInt ( r [ 2 ] + r [ 2 ] , 16 ) , a : 4 === r . length ? n ( parseInt ( r [ 3 ] + r [ 3 ] , 16 ) / 255 , 2 ) : 1 } : 6 === r . length || 8 === r . length ? { r : parseInt ( r . substr ( 0 , 2 ) , 16 ) , g : parseInt ( r . substr ( 2 , 2 ) , 16 ) , b : parseInt ( r . substr ( 4 , 2 ) , 16 ) , a : 8 === r . length ? n ( parseInt ( r . substr ( 6 , 2 ) , 16 ) / 255 , 2 ) : 1 } : null : null } , "hex" ] , [ function ( r ) { var t = v . exec ( r ) || m . exec ( r ) ; return t ? t [ 2 ] !== t [ 4 ] || t [ 4 ] !== t [ 6 ] ? null : a ( { r : Number ( t [ 1 ] ) / ( t [ 2 ] ? 100 / 255 : 1 ) , g : Number ( t [ 3 ] ) / ( t [ 4 ] ? 100 / 255 : 1 ) , b : Number ( t [ 5 ] ) / ( t [ 6 ] ? 100 / 255 : 1 ) , a : void 0 === t [ 7 ] ? 1 : Number ( t [ 7 ] ) / ( t [ 8 ] ? 100 : 1 ) } ) : null } , "rgb" ] , [ function ( t ) { var n = l . exec ( t ) || p . exec ( t ) ; if ( ! n ) return null ; var e , u , a = g ( { h : ( e = n [ 1 ] , u = n [ 2 ] , void 0 === u && ( u = "deg" ) , Number ( e ) * ( r [ u ] || 1 ) ) , s : Number ( n [ 3 ] ) , l : Number ( n [ 4 ] ) , a : void 0 === n [ 5 ] ? 1 : Number ( n [ 5 ] ) / ( n [ 6 ] ? 100 : 1 ) } ) ; return f ( a ) } , "hsl" ] ] , object : [ [ function ( r ) { var n = r . r , e = r . g , u = r . b , o = r . a , i = void 0 === o ? 1 : o ; return t ( n ) && t ( e ) && t ( u ) ? a ( { r : Number ( n ) , g : Number ( e ) , b : Number ( u ) , a : Number ( i ) } ) : null } , "rgb" ] , [ function ( r ) { var n = r . h , e = r . s , u = r . l , a = r . a , o = void 0 === a ? 1 : a ; if ( ! t ( n ) || ! t ( e ) || ! t ( u ) ) return null ; var i = g ( { h : Number ( n ) , s : Number ( e ) , l : Number ( u ) , a : Number ( o ) } ) ; return f ( i ) } , "hsl" ] , [ function ( r ) { var n = r . h , a = r . s , o = r . v , i = r . a , s = void 0 === i ? 1 : i ; if ( ! t ( n ) || ! t ( a ) || ! t ( o ) ) return null ; var h = function ( r ) { return { h : u ( r . h ) , s : e ( r . s , 0 , 100 ) , v : e ( r . v , 0 , 100 ) , a : e ( r . a ) } } ( { h : Number ( n ) , s : Number ( a ) , v : Number ( o ) , a : Number ( s ) } ) ; return b ( h ) } , "hsv" ] ] } , N = function ( r , t ) { for ( var n = 0 ; n < t . length ; n ++ ) { var e = t [ n ] [ 0 ] ( r ) ; if ( e ) return [ e , t [ n ] [ 1 ] ] } return [ null , void 0 ] } , x = function ( r ) { return "string" == typeof r ? N ( r . trim ( ) , y . string ) : "object" == typeof r && null !== r ? N ( r , y . object ) : [ null , void 0 ] } , M = function ( r , t ) { var n = c ( r ) ; return { h : n . h , s : e ( n . s + 100 * t , 0 , 100 ) , l : n . l , a : n . a } } , H = function ( r ) { return ( 299 * r . r + 587 * r . g + 114 * r . b ) / 1e3 / 255 } , $ = function ( r , t ) { var n = c ( r ) ; return { h : n . h , s : n . s , l : e ( n . l + 100 * t , 0 , 100 ) , a : n . a } } , j = function ( ) { function r ( r ) { this . parsed = x ( r ) [ 0 ] , this . rgba = this . parsed || { r : 0 , g : 0 , b : 0 , a : 1 } ; } return r . prototype . isValid = function ( ) { return null !== this . parsed } , r . prototype . brightness = function ( ) { return n ( H ( this . rgba ) , 2 ) } , r . prototype . isDark = function ( ) { return H ( this . rgba ) < . 5 } , r . prototype . isLight = function ( ) { return H ( this . rgba ) >= . 5 } , r . prototype . toHex = function ( ) { return r = o ( th
2024-06-10 19:21:30 +00:00
const Description = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let descriptionAttrs ;
let $$restProps = compute _rest _props ( $$props , [ "id" , "asChild" , "el" ] ) ;
let $errors , $$unsubscribe _errors ;
let $descriptionId , $$unsubscribe _descriptionId ;
const { descriptionId , errors } = getFormField ( ) ;
$$unsubscribe _descriptionId = subscribe ( descriptionId , ( value ) => $descriptionId = value ) ;
$$unsubscribe _errors = subscribe ( errors , ( value ) => $errors = value ) ;
let { id = generateId ( ) } = $$props ;
let { asChild = false } = $$props ;
let { el = void 0 } = $$props ;
if ( $$props . id === void 0 && $$bindings . id && id !== void 0 )
$$bindings . id ( id ) ;
if ( $$props . asChild === void 0 && $$bindings . asChild && asChild !== void 0 )
$$bindings . asChild ( asChild ) ;
if ( $$props . el === void 0 && $$bindings . el && el !== void 0 )
$$bindings . el ( el ) ;
{
descriptionId . set ( id ) ;
}
descriptionAttrs = {
id : $descriptionId ,
"data-fs-error" : getDataFsError ( $errors ) ,
"data-fs-description" : "" ,
... $$restProps
} ;
$$unsubscribe _errors ( ) ;
$$unsubscribe _descriptionId ( ) ;
return ` ${ asChild ? ` ${ slots . default ? slots . default ( { descriptionAttrs } ) : ` ` } ` : ` <div ${ spread ( [ escape _object ( descriptionAttrs ) ] , { } )} ${ add _attribute ( "this" , el , 0 ) } > ${ slots . default ? slots . default ( { descriptionAttrs } ) : ` ` }</div> ` } ` ;
} ) ;
const Form _description = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let $$restProps = compute _rest _props ( $$props , [ "class" ] ) ;
let { class : className = void 0 } = $$props ;
if ( $$props . class === void 0 && $$bindings . class && className !== void 0 )
$$bindings . class ( className ) ;
return ` ${ validate _component ( Description , "FormPrimitive.Description" ) . $$render (
$$result ,
Object . assign (
{ } ,
{
class : cn ( "text-sm text-muted-foreground" , className )
} ,
$$restProps
) ,
{ } ,
{
default : ( { descriptionAttrs } ) => {
return ` ${ slots . default ? slots . default ( { descriptionAttrs } ) : ` ` } ` ;
}
}
) } ` ;
} ) ;
2024-05-29 18:43:41 +00:00
const Form _button = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let $$restProps = compute _rest _props ( $$props , [ ] ) ;
return ` ${ validate _component ( Button , "Button.Root" ) . $$render ( $$result , Object . assign ( { } , { type: "submit" }, $ $ restProps), {}, {
default : ( ) => {
return ` ${ slots . default ? slots . default ( { } ) : ` ` } ` ;
}
} ) } ` ;
} ) ;
const css$7 = {
code : ".slider.svelte-x7oaj0.svelte-x7oaj0{---track-width:var(--track-width, unset);---track-height:var(--track-height, 6px);---track-background:var(--track-background, #949494);---track-border:var(--track-border, none);---thumb-size:var(--thumb-size, 16px);---thumb-background:var(--thumb-background, #2d2d2d);---thumb-border:var(--thumb-border, none);---position:var(--position, 0px);---margin-inline-thumb-bigger:max(var(---thumb-size) - var(---track-height), 0px);---margin-inline-thumb-smaller:max(var(---track-height) - var(---thumb-size), 0px);position:relative;margin:auto;-moz-user-select:none;user-select:none;-webkit-user-select:none}[aria-orientation='horizontal'].svelte-x7oaj0.svelte-x7oaj0{width:var(---track-width);max-width:calc(100% - 2 * var(---margin-inline-thumb-bigger));height:calc(max(var(---track-height), var(---thumb-size)) + 4px);height:max(var(---track-height), var(---thumb-size));margin-inline:var(---margin-inline-thumb-bigger);margin-block:var(--margin-block, 8px)}[aria-orientation='vertical'].svelte-x7oaj0.svelte-x7oaj0{width:calc(max(var(---track-height), var(---thumb-size)) + 4px);width:max(var(---track-height), var(---thumb-size));height:var(---track-width);max-height:calc(100% - 2 * var(---margin-inline-thumb-bigger));margin-block:var(---margin-inline-thumb-bigger);margin-inline:var(--margin-block, 8px)}.track.svelte-x7oaj0.svelte-x7oaj0{position:absolute;pointer-events:none;background:var(---track-background);border:var(---track-border);border-radius:calc(var(---track-height) / 2);box-sizing:border-box}[aria-orientation='horizontal'].svelte-x7oaj0 .track.svelte-x7oaj0{height:var(---track-height);top:50%;transform:translateY(-50%);left:0;right:0}[aria-orientation='vertical'].svelte-x7oaj0 .track.svelte-x7oaj0{width:var(---track-height);left:50%;transform:translateX(-50%);top:0;bottom:0}.thumb.svelte-x7oaj0.svelte-x7oaj0{pointer-events:none;position:absolute;height:var(---thumb-size);width:var(---thumb-size);border-radius:calc(var(---thumb-size) / 2);background:var(---thumb-background);border:var(---thumb-border);box-sizing:border-box;transform:translate(-50%, -50%);--margin-left:(\n 2 * var(---track-height) - var(---thumb-size) - var(---margin-inline-thumb-smaller)\n ) / 2;--left:calc(var(---position) * (100% - 2 * var(--margin-left)) + var(--margin-left))}[aria-orientation='horizontal'].svelte-x7oaj0:not(.reverse) .thumb.svelte-x7oaj0{top:50%;left:var(--left)}[aria-orientation='vertical'].svelte-x7oaj0:not(.reverse) .thumb.svelte-x7oaj0{left:50%;bottom:calc(var(--left) - var(---thumb-size))}[aria-orientation='horizontal'].reverse.svelte-x7oaj0 .thumb.svelte-x7oaj0{top:50%;right:calc(var(--left) - var(---thumb-size))}[aria-orientation='vertical'].reverse.svelte-x7oaj0 .thumb.svelte-x7oaj0{left:50%;top:calc(var(--left))}.slider.svelte-x7oaj0.svelte-x7oaj0:focus-visible{outline:none}.slider.svelte-x7oaj0:focus-visible .track.svelte-x7oaj0{outline:2px solid var(--focus-color, red);outline-offset:2px}" ,
map : ` {"version":3,"file":"Slider.svelte","sources":["Slider.svelte"],"sourcesContent":["<script>import { createEventDispatcher } from 'svelte'; \\ n/** min value of the slider */ \\ nexport let min = 0; \\ n $ : _min = typeof min === 'string' ? parseFloat(min) : min; \\ n/** max value of the slider */ \\ nexport let max = 100; \\ n $ : _max = typeof max === 'string' ? parseFloat(max) : max; \\ n/** step value of the slider */ \\ nexport let step = 1; \\ n $ : _step = typeof step === 'string' ? parseFloat(step) : step; \\ n/** value of the slider */ \\ nexport let value = 50; \\ n/** \\ n * method to convert the current value to a string representation of the value for the \` aria-valuetext \` attribute. \\ n * For example, a battery meter value might be conveyed as aria-valuetext= \\ "8% (34 minutes) remaining \\ ". \\ n * See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) \\ n */ \\ nexport let ariaValueText = (current) => current.toString(); \\ n/** input name of the slider */ \\ nexport let name = undefined; \\ n/** direction of the slider */ \\ nexport let direction = 'horizontal'; \\ n/** if true, the min and max values will be reversed */ \\ nexport let reverse = false; \\ n/** disables mouse events */ \\ nexport let keyboardOnly = false; \\ n/** div element representing the slider */ \\ nexport let slider = undefined; \\ n/** aria-label props */ \\ nexport let ariaLabel = undefined; \\ n/** aria-labelledby props */ \\ nexport let ariaLabelledBy = undefined; \\ n/** aria-controls props */ \\ nexport let ariaControls = undefined; \\ n/** indicate if the slider is being dragged */ \\ nexport let isDragging = false; \\ nconst dispatch = createEventDispatcher(); \\ nfunction bound(value) { \\ n const ratio = 1 / _step; \\ n const rounded = Math.round(value * ratio) / ratio; \\ n return Math.max(_min, Math.min(_max, rounded)); \\ n} \\ nfunction keyHandler(e) { \\ n const inc = e.shiftKey ? _step * 10 : _step; \\ n if (e.key === 'ArrowUp' || e.key === 'ArrowRight') { \\ n value += inc; \\ n e.preventDefault(); \\ n } \\ n else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') { \\ n value -= inc; \\ n e.preventDefault(); \\ n } \\ n else if (e.key === 'Home') { \\ n value = _min; \\ n e.preventDefault(); \\ n } \\ n else if (e.key === 'End') { \\ n value = _max; \\ n e.preventDefault(); \\ n } \\ n else if (e.key === 'PageUp') { \\ n value += _step * 10; \\ n e.preventDefault(); \\ n } \\ n else if (e.key === 'PageDown') { \\ n value -= _step * 10; \\ n e.preventDefault(); \\ n } \\ n value = bound(value); \\ n dispatch('input', value); \\ n} \\ nconst config = { \\ n horizontal: { \\ n clientSize: 'clientWidth', \\ n offset: 'left', \\ n client: 'clientX' \\ n }, \\ n vertical: { \\ n clientSize: 'clientHeight', \\ n offset: 'top', \\ n client: 'clientY' \\ n } \\ n}; \\ nfunction updateValue(e) { \\ n const clientWidth = slider?.[config[direction].clientSize] || 120; \\ n const sliderOffsetX = slider?.getBoundingClientRect()[config[direction].offset] || 0; \\ n let offsetX = e[config[direction].client] - sliderOffsetX; \\ n if (direction === 'vertical') \\ n offsetX = -1 * offsetX + clientWidth; \\ n if (reverse) { \\ n value = _max - (offsetX / clientWidth) * (_max - _min); \\ n } \\ n else { \\ n value = (offsetX / clientWidth) * (_max - _min) + _min; \\ n } \\ n value = bound(value); \\ n dispatch('input', value); \\ n} \\ nfunction jump(e) { \\ n updateValue(e); \\ n isDragging = true; \\ n} \\ nfunction drag(e) { \\ n if (isDragging) \\ n updateValue(e); \\ n} \\ nfunction endDrag() { \\ n isDragging = false; \\ n} \\ nfunction touch(e) { \\ n updateValue({ \\ n clientX: e.changedTouches[0].clientX, \\ n clientY: e.changedTouches[0].clientY \\ n }); \\ n} \\ n $ : position = (((value - _min) / (_max - _min)) * 1).toFixed(4); \\ n< \/ script> \\ n \\ n<svelte:window on:mousemove={drag} on:mouseup={endDrag} /> \\ n \\ n<div \\ n \\ tclass= \\ "slider \\ " \\ n \\ tclass:reverse \\ n \\ trole= \\ "slider \\ " \\ n \\ taria-orientation={direction
} ;
const Slider = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let _min ;
let _max ;
let position ;
let { min = 0 } = $$props ;
let { max = 100 } = $$props ;
let { step = 1 } = $$props ;
let { value = 50 } = $$props ;
let { ariaValueText = ( current ) => current . toString ( ) } = $$props ;
let { name = void 0 } = $$props ;
let { direction = "horizontal" } = $$props ;
let { reverse = false } = $$props ;
let { keyboardOnly = false } = $$props ;
let { slider = void 0 } = $$props ;
let { ariaLabel = void 0 } = $$props ;
let { ariaLabelledBy = void 0 } = $$props ;
let { ariaControls = void 0 } = $$props ;
let { isDragging = false } = $$props ;
createEventDispatcher ( ) ;
if ( $$props . min === void 0 && $$bindings . min && min !== void 0 )
$$bindings . min ( min ) ;
if ( $$props . max === void 0 && $$bindings . max && max !== void 0 )
$$bindings . max ( max ) ;
if ( $$props . step === void 0 && $$bindings . step && step !== void 0 )
$$bindings . step ( step ) ;
if ( $$props . value === void 0 && $$bindings . value && value !== void 0 )
$$bindings . value ( value ) ;
if ( $$props . ariaValueText === void 0 && $$bindings . ariaValueText && ariaValueText !== void 0 )
$$bindings . ariaValueText ( ariaValueText ) ;
if ( $$props . name === void 0 && $$bindings . name && name !== void 0 )
$$bindings . name ( name ) ;
if ( $$props . direction === void 0 && $$bindings . direction && direction !== void 0 )
$$bindings . direction ( direction ) ;
if ( $$props . reverse === void 0 && $$bindings . reverse && reverse !== void 0 )
$$bindings . reverse ( reverse ) ;
if ( $$props . keyboardOnly === void 0 && $$bindings . keyboardOnly && keyboardOnly !== void 0 )
$$bindings . keyboardOnly ( keyboardOnly ) ;
if ( $$props . slider === void 0 && $$bindings . slider && slider !== void 0 )
$$bindings . slider ( slider ) ;
if ( $$props . ariaLabel === void 0 && $$bindings . ariaLabel && ariaLabel !== void 0 )
$$bindings . ariaLabel ( ariaLabel ) ;
if ( $$props . ariaLabelledBy === void 0 && $$bindings . ariaLabelledBy && ariaLabelledBy !== void 0 )
$$bindings . ariaLabelledBy ( ariaLabelledBy ) ;
if ( $$props . ariaControls === void 0 && $$bindings . ariaControls && ariaControls !== void 0 )
$$bindings . ariaControls ( ariaControls ) ;
if ( $$props . isDragging === void 0 && $$bindings . isDragging && isDragging !== void 0 )
$$bindings . isDragging ( isDragging ) ;
$$result . css . add ( css$7 ) ;
_min = typeof min === "string" ? parseFloat ( min ) : min ;
_max = typeof max === "string" ? parseFloat ( max ) : max ;
position = ( ( value - _min ) / ( _max - _min ) * 1 ) . toFixed ( 4 ) ;
return ` <div class=" ${ [ "slider svelte-x7oaj0" , reverse ? "reverse" : "" ] . join ( " " ) . trim ( ) } " role="slider" ${ add _attribute ( "aria-orientation" , direction , 0 ) } ${ add _attribute ( "aria-valuemax" , _max , 0 ) } ${ add _attribute ( "aria-valuemin" , _min , 0 ) } ${ add _attribute ( "aria-valuenow" , value , 0 ) } ${ add _attribute ( "aria-valuetext" , ariaValueText ( value ) , 0 ) } ${ add _attribute ( "aria-label" , ariaLabel , 0 ) } ${ add _attribute ( "aria-labelledby" , ariaLabelledBy , 0 ) } ${ add _attribute ( "aria-controls" , ariaControls , 0 ) } tabindex="0" ${ add _styles ( { "--position" : position } )} ${ add _attribute ( "this" , slider , 0 ) } ><div class="track svelte-x7oaj0"></div> <div class="thumb svelte-x7oaj0"></div></div> ${ name ? ` <input type="hidden" ${ add _attribute ( "name" , name , 0 ) } ${ add _attribute ( "value" , value , 0 ) } > ` : ` ` } ` ;
} ) ;
const css$6 = {
code : ".picker.svelte-amfbfx{position:relative;display:inline-block;width:var(--picker-width, 200px);height:var(--picker-height, 200px);background:linear-gradient(#ffffff00, #000000ff), linear-gradient(0.25turn, #ffffffff, #00000000),\n var(--picker-color-bg);border-radius:var(--picker-radius, 8px);outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.s.svelte-amfbfx,.v.svelte-amfbfx{position:absolute;--track-background:none;--track-border:none;--thumb-background:none;--thumb-border:none;--thumb-size:2px;--margin-block:0;--track-height:var(--picker-indicator-size, 10px);-moz-user-select:none;user-select:none;-webkit-user-select:none}.s.svelte-amfbfx{top:calc(var(--pos-y) * (var(--picker-height, 200px) - var(--picker-indicator-size, 10px) - 4px) / 100 + 2px);left:2px;--track-width:calc(var(--picker-width, 200px) - 4px)}.v.svelte-amfbfx{top:2px;left:calc(var(--pos-x) * (var(--picker-width, 200px) - var(--picker-indicator-size, 10px) - 4px) / 100 + 2px);--track-width:calc(var(--picker-height, 200px) - 4px)}" ,
map : ` {"version":3,"file":"Picker.svelte","sources":["Picker.svelte"],"sourcesContent":["<script>import { colord } from 'colord'; \\ nimport { Slider } from 'svelte-awesome-slider'; \\ nimport { createEventDispatcher } from 'svelte'; \\ nconst dispatch = createEventDispatcher(); \\ n/** customize the ColorPicker component parts. Can be used to display a Chrome variant or an Accessibility Notice */ \\ nexport let components; \\ n/** hue value */ \\ nexport let h; \\ n/** saturation value */ \\ nexport let s; \\ n/** vibrance value */ \\ nexport let v; \\ n/** indicator whether the selected color is light or dark */ \\ nexport let isDark; \\ nlet picker; \\ nlet isMouseDown = false; \\ nlet focused = false; \\ nlet pickerColorBg; \\ nlet pos = { x: 100, y: 0 }; \\ n $ : if (typeof h === 'number') \\ n pickerColorBg = colord({ h, s: 100, v: 100, a: 1 }).toHex(); \\ nfunction clamp(value, min, max) { \\ n return Math.min(Math.max(min, value), max); \\ n} \\ nfunction onClick(e) { \\ n const { width, left, height, top } = picker.getBoundingClientRect(); \\ n const mouse = { x: clamp(e.clientX - left, 0, width), y: clamp(e.clientY - top, 0, height) }; \\ n s = clamp(mouse.x / width, 0, 1) * 100; \\ n v = clamp((height - mouse.y) / height, 0, 1) * 100; \\ n} \\ nfunction pickerMousedown(e) { \\ n if (e.button === 0) { \\ n isMouseDown = true; \\ n onClick(e); \\ n } \\ n} \\ nfunction mouseUp() { \\ n isMouseDown = false; \\ n} \\ nfunction mouseMove(e) { \\ n if (isMouseDown) \\ n onClick(e); \\ n} \\ nfunction mouseDown(e) { \\ n if (!e.target.isSameNode(picker)) \\ n focused = false; \\ n} \\ nfunction touch(e) { \\ n e.preventDefault(); \\ n onClick(e.changedTouches[0]); \\ n} \\ n $ : if (typeof s === 'number' && typeof v === 'number' && picker) \\ n pos = { \\ n x: s, \\ n y: 100 - v \\ n }; \\ n $ : dispatch('input', { s, v }); \\ n< \/ script> \\ n \\ n<svelte:window on:mouseup={mouseUp} on:mousedown={mouseDown} on:mousemove={mouseMove} /> \\ n \\ n<!-- svelte-ignore a11y-no-static-element-interactions --> \\ n<div \\ n \\ tclass= \\ "picker \\ " \\ n \\ tbind:this={picker} \\ n \\ ton:mousedown|preventDefault={pickerMousedown} \\ n \\ ton:touchstart|nonpassive={touch} \\ n \\ ton:touchmove|nonpassive|preventDefault={touch} \\ n \\ ton:touchend|nonpassive={touch} \\ n \\ tstyle:--picker-color-bg={pickerColorBg} \\ n> \\ n \\ t<svelte:component this={components.pickerIndicator} {pos} {isDark} /> \\ n \\ t<div class= \\ "s \\ " style:--pos-y={pos.y}> \\ n \\ t \\ t<Slider bind:value={s} keyboardOnly ariaValueText={(value) => \` \$ {value}% \` } ariaLabel= \\ "saturation color \\ " /> \\ n \\ t</div> \\ n \\ t<div class= \\ "v \\ " style:--pos-x={pos.x}> \\ n \\ t \\ t<Slider \\ n \\ t \\ t \\ tbind:value={v} \\ n \\ t \\ t \\ tkeyboardOnly \\ n \\ t \\ t \\ tariaValueText={(value) => \` \$ {value}% \` } \\ n \\ t \\ t \\ tdirection= \\ "vertical \\ " \\ n \\ t \\ t \\ tariaLabel= \\ "brightness color \\ " \\ n \\ t \\ t/> \\ n \\ t</div> \\ n</div> \\ n \\ n<!-- \\ n@component Picker wrapper containing the mouse and keyboard logic to select the color. _internal component_ \\ n \\ n**Import** \\ nN.A. \\ n \\ n**Use** \\ nN.A. \\ n \\ n**Props** \\ n@prop components: Components — customize the ColorPicker component parts. Can be used to display a Chrome variant or an Accessibility Notice \\ n@prop h: number — hue value \\ n@prop s: number — saturation value \\ n@prop v: number — vibrance value \\ n@prop isDark: boolean — indicator whether the selected color is light or dark \\ n--> \\ n<style> \\ n \\ t.picker { \\ n \\ t \\ tposition: relative; \\ n \\ t \\ tdisplay: inline-block; \\ n \\ t \\ twidth: var(--picker-width, 200px); \\ n \\ t \\ theight: var(--picker-height, 200px); \\ n \\ t \\ tbackground: linear-gradient(#ffffff00, #000000ff), linear-gradient(0.25turn, #ffffffff, #00000000), \\ n \\ t \\ t \\ tvar(--picker-color-bg); \\ n \\ t \\ tborder-radius: var(--picker-radius, 8px); \\ n \\ t \\ toutline: none; \\ n \\ t \\ t-webkit-user-select: none; \\ n \\ t \\ t -moz-user-select: none; \\ n \\ t \\ t user-select: none; \\ n \\ t} \\ n \\ n \\ t.s, \\ n \\ t.v { \\ n \\ t \\ tposition: absolute; \\ n \\ t \\ t--track-background: none; \\ n \\ t \\ t--track-border: none; \\ n \\ t \\ t--thumb-background: none; \\ n \\ t \\ t--thumb-border: none; \\ n \\ t \\ t--thumb-size: 2px; \\ n \\ t \\ t--margin-block: 0; \\ n \\ t \\ t--track-height: v
} ;
const Picker = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
const dispatch = createEventDispatcher ( ) ;
let { components } = $$props ;
let { h } = $$props ;
let { s } = $$props ;
let { v } = $$props ;
let { isDark } = $$props ;
let picker ;
let pickerColorBg ;
let pos = { x : 100 , y : 0 } ;
if ( $$props . components === void 0 && $$bindings . components && components !== void 0 )
$$bindings . components ( components ) ;
if ( $$props . h === void 0 && $$bindings . h && h !== void 0 )
$$bindings . h ( h ) ;
if ( $$props . s === void 0 && $$bindings . s && s !== void 0 )
$$bindings . s ( s ) ;
if ( $$props . v === void 0 && $$bindings . v && v !== void 0 )
$$bindings . v ( v ) ;
if ( $$props . isDark === void 0 && $$bindings . isDark && isDark !== void 0 )
$$bindings . isDark ( isDark ) ;
$$result . css . add ( css$6 ) ;
let $$settled ;
let $$rendered ;
let previous _head = $$result . head ;
do {
$$settled = true ;
$$result . head = previous _head ;
{
if ( typeof h === "number" )
pickerColorBg = w ( { h , s : 100 , v : 100 , a : 1 } ) . toHex ( ) ;
}
{
if ( typeof s === "number" && typeof v === "number" && picker )
pos = { x : s , y : 100 - v } ;
}
{
dispatch ( "input" , { s , v } ) ;
}
$$rendered = ` <div class="picker svelte-amfbfx" ${ add _styles ( { "--picker-color-bg" : pickerColorBg } )} ${ add _attribute ( "this" , picker , 0 ) } > ${ validate _component ( components . pickerIndicator || missing _component , "svelte:component" ) . $$render ( $$result , { pos , isDark } , {}, {})} <div class="s svelte-amfbfx" ${ add _styles ( { "--pos-y" : pos . y } )}> ${ validate _component ( Slider , "Slider" ) . $$render (
$$result ,
{
keyboardOnly : true ,
ariaValueText : ( value ) => ` ${ value } % ` ,
ariaLabel : "saturation color" ,
value : s
} ,
{
value : ( $$value ) => {
s = $$value ;
$$settled = false ;
}
} ,
{ }
) } < / d i v > < d i v c l a s s = " v s v e l t e - a m f b f x " $ { a d d _ s t y l e s ( { " - - p o s - x " : p o s . x } ) } > $ { v a l i d a t e _ c o m p o n e n t ( S l i d e r , " S l i d e r " ) . $ $ r e n d e r (
$$result ,
{
keyboardOnly : true ,
ariaValueText : ( value ) => ` ${ value } % ` ,
direction : "vertical" ,
ariaLabel : "brightness color" ,
value : v
} ,
{
value : ( $$value ) => {
v = $$value ;
$$settled = false ;
}
} ,
{ }
) } < / d i v > < / d i v > ` ;
} while ( ! $$settled ) ;
return $$rendered ;
} ) ;
const css$5 = {
code : "div.svelte-i5mg2p{position:absolute;left:calc(var(--pos-x) * (var(--picker-width, 200px) - var(--picker-indicator-size, 10px) - 4px) / 100 + 2px);top:calc(var(--pos-y) * (var(--picker-height, 200px) - var(--picker-indicator-size, 10px) - 4px) / 100 + 2px);width:var(--picker-indicator-size, 10px);height:var(--picker-indicator-size, 10px);background-color:white;box-shadow:0 0 4px black;border-radius:50%;pointer-events:none;z-index:1;transition:box-shadow 0.2s}.is-dark.svelte-i5mg2p{box-shadow:0 0 4px white}" ,
map : '{"version":3,"file":"PickerIndicator.svelte","sources":["PickerIndicator.svelte"],"sourcesContent":["<script>/** indicator position in % */\\nexport let pos;\\n/** indicator whether the selected color is light or dark */\\nexport let isDark;\\n<\/script>\\n\\n<div class=\\"picker-indicator\\" class:is-dark={isDark} style:--pos-x={pos.x} style:--pos-y={pos.y} />\\n\\n<style>\\n\\tdiv {\\n\\t\\tposition: absolute;\\n\\t\\tleft: calc(var(--pos-x) * (var(--picker-width, 200px) - var(--picker-indicator-size, 10px) - 4px) / 100 + 2px);\\n\\t\\ttop: calc(var(--pos-y) * (var(--picker-height, 200px) - var(--picker-indicator-size, 10px) - 4px) / 100 + 2px);\\n\\n\\t\\twidth: var(--picker-indicator-size, 10px);\\n\\t\\theight: var(--picker-indicator-size, 10px);\\n\\t\\tbackground-color: white;\\n\\t\\tbox-shadow: 0 0 4px black;\\n\\t\\tborder-radius: 50%;\\n\\n\\t\\tpointer-events: none;\\n\\t\\tz-index: 1;\\n\\t\\ttransition: box-shadow 0.2s;\\n\\t}\\n\\t.is-dark {\\n\\t\\tbox-shadow: 0 0 4px white;\\n\\t}\\n</style>\\n"],"names":[],"mappings":"AASC,iBAAI,CACH,QAAQ,CAAE,QAAQ,CAClB,IAAI,CAAE,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAC9G,GAAG,CAAE,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAE9G,KAAK,CAAE,IAAI,uBAAuB,CAAC,KAAK,CAAC,CACzC,MAAM,CAAE,IAAI,uBAAuB,CAAC,KAAK,CAAC,CAC1C,gBAAgB,CAAE,KAAK,CACvB,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CACzB,aAAa,CAAE,GAAG,CAElB,cAAc,CAAE,IAAI,CACpB,OAAO,CAAE,CAAC,CACV,UAAU,CAAE,UAAU,CAAC,IACxB,CACA,sBAAS,CACR,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KACrB"}'
} ;
const PickerIndicator = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let { pos } = $$props ;
let { isDark } = $$props ;
if ( $$props . pos === void 0 && $$bindings . pos && pos !== void 0 )
$$bindings . pos ( pos ) ;
if ( $$props . isDark === void 0 && $$bindings . isDark && isDark !== void 0 )
$$bindings . isDark ( isDark ) ;
$$result . css . add ( css$5 ) ;
return ` <div class=" ${ [ "picker-indicator svelte-i5mg2p" , isDark ? "is-dark" : "" ] . join ( " " ) . trim ( ) } " ${ add _styles ( { "--pos-x" : pos . x , "--pos-y" : pos . y } )}></div> ` ;
} ) ;
const css$4 = {
code : ".text-input.svelte-1mk8abz.svelte-1mk8abz{margin:var(--text-input-margin, 5px 0 0)}.input-container.svelte-1mk8abz.svelte-1mk8abz{display:flex;flex:1;gap:10px}input.svelte-1mk8abz.svelte-1mk8abz,button.svelte-1mk8abz.svelte-1mk8abz,.button-like.svelte-1mk8abz.svelte-1mk8abz{flex:1;border:none;background-color:var(--cp-input-color, #eee);color:var(--cp-border-color);padding:0;border-radius:5px;height:30px;line-height:30px;text-align:center}input.svelte-1mk8abz.svelte-1mk8abz{width:5px;font-family:inherit}button.svelte-1mk8abz.svelte-1mk8abz,.button-like.svelte-1mk8abz.svelte-1mk8abz{position:relative;flex:1;margin:8px 0 0;height:30px;width:100%;transition:background-color 0.2s;cursor:pointer;font-family:inherit}.button-like.svelte-1mk8abz.svelte-1mk8abz{cursor:default}.appear.svelte-1mk8abz.svelte-1mk8abz,.disappear.svelte-1mk8abz.svelte-1mk8abz{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;transition:all 0.5s}button.svelte-1mk8abz:hover .disappear.svelte-1mk8abz,.appear.svelte-1mk8abz.svelte-1mk8abz{opacity:0}.disappear.svelte-1mk8abz.svelte-1mk8abz,button.svelte-1mk8abz:hover .appear.svelte-1mk8abz{opacity:1}button.svelte-1mk8abz.svelte-1mk8abz:hover{background-color:var(--cp-button-hover-color, #ccc)}input.svelte-1mk8abz.svelte-1mk8abz:focus,button.svelte-1mk8abz.svelte-1mk8abz:focus{outline:none}input.svelte-1mk8abz.svelte-1mk8abz:focus-visible,button.svelte-1mk8abz.svelte-1mk8abz:focus-visible{outline:2px solid var(--focus-color, red);outline-offset:2px}" ,
map : ` {"version":3,"file":"TextInput.svelte","sources":["TextInput.svelte"],"sourcesContent":["<script>import { createEventDispatcher } from 'svelte'; \\ nconst dispatch = createEventDispatcher(); \\ n/** if set to false, disables the alpha channel */ \\ nexport let isAlpha; \\ n/** rgb color */ \\ nexport let rgb; \\ n/** hsv color */ \\ nexport let hsv; \\ n/** hex color */ \\ nexport let hex; \\ n/** configure which hex, rgb and hsv inputs will be visible and in which order. If overridden, it is necessary to provide at least one value */ \\ nexport let textInputModes; \\ n/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */ \\ nexport let texts; \\ nconst HEX_COLOR_REGEX = /^#?([A-F0-9]{6}|[A-F0-9]{8}) $ /i; \\ nlet mode = textInputModes[0] || 'hex'; \\ n $ : nextMode = textInputModes[(textInputModes.indexOf(mode) + 1) % textInputModes.length]; \\ n $ : h = Math.round(hsv.h); \\ n $ : s = Math.round(hsv.s); \\ n $ : v = Math.round(hsv.v); \\ n $ : a = hsv.a === undefined ? 1 : Math.round(hsv.a * 100) / 100; \\ nfunction updateHex(e) { \\ n const target = e.target; \\ n if (HEX_COLOR_REGEX.test(target.value)) { \\ n hex = target.value; \\ n dispatch('input', { hex }); \\ n } \\ n} \\ nfunction updateRgb(property) { \\ n return function (e) { \\ n rgb = { ...rgb, [property]: parseFloat(e.target.value) }; \\ n dispatch('input', { rgb }); \\ n }; \\ n} \\ nfunction updateHsv(property) { \\ n return function (e) { \\ n hsv = { ...hsv, [property]: parseFloat(e.target.value) }; \\ n dispatch('input', { hsv }); \\ n }; \\ n} \\ n< \/ script> \\ n \\ n<div class= \\ "text-input \\ "> \\ n \\ t<div class= \\ "input-container \\ "> \\ n \\ t \\ t{#if mode === 'hex'} \\ n \\ t \\ t \\ t<input aria-label={texts.label.hex} value={hex} on:input={updateHex} style:flex={3} /> \\ n \\ t \\ t{:else if mode === 'rgb'} \\ n \\ t \\ t \\ t<input aria-label={texts.label.r} value={rgb.r} type= \\ "number \\ " min= \\ "0 \\ " max= \\ "255 \\ " on:input={updateRgb('r')} /> \\ n \\ t \\ t \\ t<input aria-label={texts.label.g} value={rgb.g} type= \\ "number \\ " min= \\ "0 \\ " max= \\ "255 \\ " on:input={updateRgb('g')} /> \\ n \\ t \\ t \\ t<input aria-label={texts.label.b} value={rgb.b} type= \\ "number \\ " min= \\ "0 \\ " max= \\ "255 \\ " on:input={updateRgb('b')} /> \\ n \\ t \\ t{:else} \\ n \\ t \\ t \\ t<input aria-label={texts.label.h} value={h} type= \\ "number \\ " min= \\ "0 \\ " max= \\ "360 \\ " on:input={updateHsv('h')} /> \\ n \\ t \\ t \\ t<input aria-label={texts.label.s} value={s} type= \\ "number \\ " min= \\ "0 \\ " max= \\ "100 \\ " on:input={updateHsv('s')} /> \\ n \\ t \\ t \\ t<input aria-label={texts.label.v} value={v} type= \\ "number \\ " min= \\ "0 \\ " max= \\ "100 \\ " on:input={updateHsv('v')} /> \\ n \\ t \\ t{/if} \\ n \\ t \\ t{#if isAlpha} \\ n \\ t \\ t \\ t<input \\ n \\ t \\ t \\ t \\ taria-label={texts.label.a} \\ n \\ t \\ t \\ t \\ tvalue={a} \\ n \\ t \\ t \\ t \\ ttype= \\ "number \\ " \\ n \\ t \\ t \\ t \\ tmin= \\ "0 \\ " \\ n \\ t \\ t \\ t \\ tmax= \\ "1 \\ " \\ n \\ t \\ t \\ t \\ tstep= \\ "0.01 \\ " \\ n \\ t \\ t \\ t \\ ton:input={mode === 'hsv' ? updateHsv('a') : updateRgb('a')} \\ n \\ t \\ t \\ t/> \\ n \\ t \\ t{/if} \\ n \\ t</div> \\ n \\ n \\ t{#if textInputModes.length > 1} \\ n \\ t \\ t<button type= \\ "button \\ " on:click={() => (mode = nextMode)}> \\ n \\ t \\ t \\ t<span class= \\ "disappear \\ " aria-hidden= \\ "true \\ ">{texts.color[mode]}</span> \\ n \\ t \\ t \\ t<span class= \\ "appear \\ ">{texts.changeTo} {nextMode}</span> \\ n \\ t \\ t</button> \\ n \\ t{:else} \\ n \\ t \\ t<div class= \\ "button-like \\ ">{texts.color[mode]}</div> \\ n \\ t{/if} \\ n</div> \\ n \\ n<!-- \\ n@component text inputs for the hex, rgb and hsv colors. This component cannot be imported \\ ndirectly but can be overridden. \\ n \\ n**Import** \\ n_N.A._ \\ n \\ n**Use** \\ n_N.A._ \\ n \\ n**Props** \\ n@prop isAlpha: boolean — if set to false, disables the alpha channel \\ n@prop rgb: RgbaColor — rgb color \\ n@prop hsv: HsvaColor — hsv color \\ n@prop hex: string — hex color \\ n@prop textInputModes: Array<'hex' | 'rgb' | 'hsv'> — configure which hex, rgb and hsv inputs will be visible and in which order. If overridden, it is necessary to provide at least one value \\ n@prop texts: Texts — all translation tokens used in the library; can be pa
} ;
const TextInput = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let nextMode ;
let h ;
let s ;
let v ;
let a ;
createEventDispatcher ( ) ;
let { isAlpha } = $$props ;
let { rgb } = $$props ;
let { hsv } = $$props ;
let { hex } = $$props ;
let { textInputModes } = $$props ;
let { texts } = $$props ;
let mode = textInputModes [ 0 ] || "hex" ;
if ( $$props . isAlpha === void 0 && $$bindings . isAlpha && isAlpha !== void 0 )
$$bindings . isAlpha ( isAlpha ) ;
if ( $$props . rgb === void 0 && $$bindings . rgb && rgb !== void 0 )
$$bindings . rgb ( rgb ) ;
if ( $$props . hsv === void 0 && $$bindings . hsv && hsv !== void 0 )
$$bindings . hsv ( hsv ) ;
if ( $$props . hex === void 0 && $$bindings . hex && hex !== void 0 )
$$bindings . hex ( hex ) ;
if ( $$props . textInputModes === void 0 && $$bindings . textInputModes && textInputModes !== void 0 )
$$bindings . textInputModes ( textInputModes ) ;
if ( $$props . texts === void 0 && $$bindings . texts && texts !== void 0 )
$$bindings . texts ( texts ) ;
$$result . css . add ( css$4 ) ;
nextMode = textInputModes [ ( textInputModes . indexOf ( mode ) + 1 ) % textInputModes . length ] ;
h = Math . round ( hsv . h ) ;
s = Math . round ( hsv . s ) ;
v = Math . round ( hsv . v ) ;
a = hsv . a === void 0 ? 1 : Math . round ( hsv . a * 100 ) / 100 ;
return ` <div class="text-input svelte-1mk8abz"><div class="input-container svelte-1mk8abz"> ${ mode === "hex" ? ` <input ${ add _attribute ( "aria-label" , texts . label . hex , 0 ) } ${ add _attribute ( "value" , hex , 0 ) } class="svelte-1mk8abz" ${ add _styles ( { "flex" : 3 } )}> ` : ` ${ mode === "rgb" ? ` <input ${ add _attribute ( "aria-label" , texts . label . r , 0 ) } ${ add _attribute ( "value" , rgb . r , 0 ) } type="number" min="0" max="255" class="svelte-1mk8abz"> <input ${ add _attribute ( "aria-label" , texts . label . g , 0 ) } ${ add _attribute ( "value" , rgb . g , 0 ) } type="number" min="0" max="255" class="svelte-1mk8abz"> <input ${ add _attribute ( "aria-label" , texts . label . b , 0 ) } ${ add _attribute ( "value" , rgb . b , 0 ) } type="number" min="0" max="255" class="svelte-1mk8abz"> ` : ` <input ${ add _attribute ( "aria-label" , texts . label . h , 0 ) } ${ add _attribute ( "value" , h , 0 ) } type="number" min="0" max="360" class="svelte-1mk8abz"> <input ${ add _attribute ( "aria-label" , texts . label . s , 0 ) } ${ add _attribute ( "value" , s , 0 ) } type="number" min="0" max="100" class="svelte-1mk8abz"> <input ${ add _attribute ( "aria-label" , texts . label . v , 0 ) } ${ add _attribute ( "value" , v , 0 ) } type="number" min="0" max="100" class="svelte-1mk8abz"> ` } ` } ${ isAlpha ? ` <input ${ add _attribute ( "aria-label" , texts . label . a , 0 ) } ${ add _attribute ( "value" , a , 0 ) } type="number" min="0" max="1" step="0.01" class="svelte-1mk8abz"> ` : ` ` } </div> ${ textInputModes . length > 1 ? ` <button type="button" class="svelte-1mk8abz"><span class="disappear svelte-1mk8abz" aria-hidden="true"> ${ escape ( texts . color [ mode ] ) } </span> <span class="appear svelte-1mk8abz"> ${ escape ( texts . changeTo ) } ${ escape ( nextMode ) } </span></button> ` : ` <div class="button-like svelte-1mk8abz"> ${ escape ( texts . color [ mode ] ) } </div> ` } </div> ` ;
} ) ;
const css$3 = {
code : "label.svelte-15ns2n5.svelte-15ns2n5{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border-radius:3px;margin:4px;height:var(--input-size, 25px);-webkit-user-select:none;-moz-user-select:none;user-select:none}.container.svelte-15ns2n5.svelte-15ns2n5{position:relative;display:block;display:flex;align-items:center;justify-content:center;width:var(--input-size, 25px)}input.svelte-15ns2n5.svelte-15ns2n5{margin:0;padding:0;border:none;width:1px;height:1px;flex-shrink:0;opacity:0}.alpha.svelte-15ns2n5.svelte-15ns2n5{clip-path:circle(50%);background:var(--alpha-grid-bg)}.alpha.svelte-15ns2n5.svelte-15ns2n5,.color.svelte-15ns2n5.svelte-15ns2n5{position:absolute;width:var(--input-size, 25px);height:var(--input-size, 25px);border-radius:50%;-webkit-user-select:none;-moz-user-select:none;user-select:none}input.svelte-15ns2n5:focus-visible~.color.svelte-15ns2n5{outline:2px solid var(--focus-color, red);outline-offset:2px}" ,
map : '{"version":3,"file":"Input.svelte","sources":["Input.svelte"],"sourcesContent":["<script>/** DOM element of the label wrapper */\\nexport let labelElement;\\n/** hex color */\\nexport let hex;\\n/** input label */\\nexport let label;\\n/** input name, useful in a native form */\\nexport let name = undefined;\\n/* svelte-ignore unused-export-let /** indicator of the popup state */\\nexport let isOpen;\\nfunction noop() {\\n /* prevent browser color picker from opening unless javascript is broken */\\n}\\n<\/script>\\n\\n<!-- svelte-ignore a11y-no-noninteractive-element-interactions a11y-click-events-have-key-events -->\\n<label bind:this={labelElement} on:click|preventDefault={noop} on:mousedown|preventDefault={noop}>\\n\\t<div class=\\"container\\">\\n\\t\\t<input\\n\\t\\t\\ttype=\\"color\\"\\n\\t\\t\\t{name}\\n\\t\\t\\tvalue={hex}\\n\\t\\t\\ton:click|preventDefault={noop}\\n\\t\\t\\ton:mousedown|preventDefault={noop}\\n\\t\\t\\taria-haspopup=\\"dialog\\"\\n\\t\\t/>\\n\\t\\t<div class=\\"alpha\\" />\\n\\t\\t<div class=\\"color\\" style:background={hex} />\\n\\t</div>\\n\\t{label}\\n</label>\\n\\n<!-- \\n@component button to open the color picker. Also provides a hidden input with the hex value selected by the user\\nto fallback to color picker to the default browser one if a problem happens. This component cannot be imported\\ndirectly but can be overridden.\\n\\n**Import**\\n_N.A._\\n\\n**Use**\\n_N.A._\\n\\n**Props**\\n@prop labelElement: HTMLLabelElement — DOM element of the label wrapper\\n@prop hex: string | undefined — hex color\\n@prop label: string — input label\\n@prop name: string | undefined = undefined — input name, useful in a native form\\n@prop isOpen: boolean — indicator of the popup state\\n-->\\n<style>\\n\\tlabel {\\n\\t\\tdisplay: inline-flex;\\n\\t\\talign-items: center;\\n\\t\\tgap: 8px;\\n\\t\\tcursor: pointer;\\n\\t\\tborder-radius: 3px;\\n\\t\\tmargin: 4px;\\n\\t\\theight: var(--input-size, 25px);\\n\\t\\t-webkit-user-select: none;\\n\\t\\t -moz-user-select: none;\\n\\t\\t user-select: none;\\n\\t}\\n\\n\\t.container {\\n\\t\\tposition: relative;\\n\\t\\tdisplay: block;\\n\\t\\tdisplay: flex;\\n\\t\\talign-items: center;\\n\\t\\tjustify-content: center;\\n\\t\\twidth: var(--input-size, 25px);\\n\\t}\\n\\n\\tinput {\\n\\t\\tmargin: 0;\\n\\t\\tpadding: 0;\\n\\t\\tborder: none;\\n\\t\\twidth: 1px;\\n\\t\\theight: 1px;\\n\\t\\tflex-shrink: 0;\\n\\t\\topacity: 0;\\n\\t}\\n\\n\\t.alpha {\\n\\t\\tclip-path: circle(50%);\\n\\t\\tbackground: var(--alpha-grid-bg);\\n\\t}\\n\\n\\t.alpha,\\n\\t.color {\\n\\t\\tposition: absolute;\\n\\t\\twidth: var(--input-size, 25px);\\n\\t\\theight: var(--input-size, 25px);\\n\\t\\tborder-radius: 50%;\\n\\t\\t-webkit-user-select: none;\\n\\t\\t -moz-user-select: none;\\n\\t\\t user-select: none;\\n\\t}\\n\\n\\tinput:focus-visible ~ .color {\\n\\t\\toutline: 2px solid var(--focus-color, red);\\n\\t\\toutline-offset: 2px;\\n\\t}\\n</style>\\n"],"names":[],"mappings":"AAmDC,mCAAM,CACL,OAAO,CAAE,WAAW,CACpB,WAAW,CAAE,MAAM,CACnB,GAAG,CAAE,GAAG,CACR,MAAM,CAAE,OAAO,CACf,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,GAAG,CACX,MAAM,CAAE,IAAI,YAAY,CAAC,KAAK,CAAC,CAC/B,mBAAmB,CAAE,IAAI,CACtB,gBAAgB,CAAE,IAAI,CACjB,WAAW,CAAE,IACtB,CAEA,wCAAW,CACV,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,KAAK,CACd,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,MAAM,CACvB,KAAK,CAAE,IAAI,YAAY,CAAC,KAAK,CAC9B,CAEA,mCAAM,CACL,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACV,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,WAAW,CAAE,CAAC,CACd,OAAO,CAAE,CACV,CAEA,oCAAO,CACN,SAAS,CAAE,OAAO,GAAG,CAAC,CACtB,UAAU,CAAE,IAAI,eAAe,CAChC,CAEA,oCAAM,CACN,oCAAO,CACN,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,YAAY,CAAC,KAAK,CAAC,CAC9B,MAAM,CAAE,IAAI,YAAY,CAAC,KAAK,CAAC,CAC/B,aAAa,CAAE,GAAG,CAClB,mBAAmB,CAAE,IAAI,CACtB,gBAAgB,CAAE,IAAI,CACjB,WAAW,CAAE,IACtB,CAEA,oBAAK,cAAc,CAAG,qBAAO,CAC5B,OAAO,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,CAC1C,cAAc,CAAE,GACjB"}'
} ;
const Input = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let { labelElement } = $$props ;
let { hex } = $$props ;
let { label } = $$props ;
let { name = void 0 } = $$props ;
let { isOpen } = $$props ;
if ( $$props . labelElement === void 0 && $$bindings . labelElement && labelElement !== void 0 )
$$bindings . labelElement ( labelElement ) ;
if ( $$props . hex === void 0 && $$bindings . hex && hex !== void 0 )
$$bindings . hex ( hex ) ;
if ( $$props . label === void 0 && $$bindings . label && label !== void 0 )
$$bindings . label ( label ) ;
if ( $$props . name === void 0 && $$bindings . name && name !== void 0 )
$$bindings . name ( name ) ;
if ( $$props . isOpen === void 0 && $$bindings . isOpen && isOpen !== void 0 )
$$bindings . isOpen ( isOpen ) ;
$$result . css . add ( css$3 ) ;
return ` <label class="svelte-15ns2n5" ${ add _attribute ( "this" , labelElement , 0 ) } ><div class="container svelte-15ns2n5"><input type="color" ${ add _attribute ( "name" , name , 0 ) } ${ add _attribute ( "value" , hex , 0 ) } aria-haspopup="dialog" class="svelte-15ns2n5"> <div class="alpha svelte-15ns2n5"></div> <div class="color svelte-15ns2n5" ${ add _styles ( { "background" : hex } )}></div></div> ${ escape ( label ) } </label> ` ;
} ) ;
const css$2 = {
code : "div.svelte-1h4o41o{padding:8px;background-color:var(--cp-bg-color, white);margin:0 10px 10px;border:1px solid var(--cp-border-color, black);border-radius:12px;display:none;width:-moz-max-content;width:max-content}.is-open.svelte-1h4o41o{display:inline-block}[role='dialog'].svelte-1h4o41o{position:absolute;top:calc(var(--input-size, 25px) + 12px);left:0;z-index:var(--picker-z-index, 2)}" ,
map : ` {"version":3,"file":"Wrapper.svelte","sources":["Wrapper.svelte"],"sourcesContent":["<script>/** DOM element of the wrapper element */ \\ nexport let wrapper; \\ n/** indicator of the popup state */ \\ nexport let isOpen; \\ n/** if set to true, the wrapper should have a dialog role and be absolute. It should be relative otherwise */ \\ nexport let isDialog; \\ n< \/ script> \\ n \\ n<div \\ n \\ tbind:this={wrapper} \\ n \\ tclass= \\ "wrapper \\ " \\ n \\ tclass:is-open={isOpen} \\ n \\ trole={isDialog ? 'dialog' : undefined} \\ n \\ taria-label= \\ "color picker \\ " \\ n> \\ n \\ t<slot /> \\ n</div> \\ n \\ n<!-- \\ n@component Default variant wrapper \\ n \\ n**Import** \\ nthis component is the default variant and cannot be imported \\ n \\ n**Use** \\ nN.A. \\ n \\ n**Props** \\ n@prop wrapper: HTMLElement — DOM element of the wrapper element \\ n@prop isOpen: boolean — indicator of the popup state \\ n@prop isDialog: boolean — if set to true, the wrapper should have a dialog role and be absolute. It should be relative otherwise \\ n--> \\ n<style> \\ n \\ tdiv { \\ n \\ t \\ tpadding: 8px; \\ n \\ t \\ tbackground-color: var(--cp-bg-color, white); \\ n \\ t \\ tmargin: 0 10px 10px; \\ n \\ t \\ tborder: 1px solid var(--cp-border-color, black); \\ n \\ t \\ tborder-radius: 12px; \\ n \\ t \\ tdisplay: none; \\ n \\ t \\ twidth: -moz-max-content; \\ n \\ t \\ twidth: max-content; \\ n \\ t} \\ n \\ t.is-open { \\ n \\ t \\ tdisplay: inline-block; \\ n \\ t} \\ n \\ t[role='dialog'] { \\ n \\ t \\ tposition: absolute; \\ n \\ t \\ ttop: calc(var(--input-size, 25px) + 12px); \\ n \\ t \\ tleft: 0; \\ n \\ t \\ tz-index: var(--picker-z-index, 2); \\ n \\ t} \\ n</style> \\ n"],"names":[],"mappings":"AAiCC,kBAAI,CACH,OAAO,CAAE,GAAG,CACZ,gBAAgB,CAAE,IAAI,aAAa,CAAC,MAAM,CAAC,CAC3C,MAAM,CAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CACnB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,MAAM,CAAC,CAC/C,aAAa,CAAE,IAAI,CACnB,OAAO,CAAE,IAAI,CACb,KAAK,CAAE,gBAAgB,CACvB,KAAK,CAAE,WACR,CACA,uBAAS,CACR,OAAO,CAAE,YACV,CACA,CAAC,IAAI,CAAC,QAAQ,gBAAE,CACf,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,KAAK,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CACzC,IAAI,CAAE,CAAC,CACP,OAAO,CAAE,IAAI,gBAAgB,CAAC,EAAE,CACjC"} `
} ;
const Wrapper = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let { wrapper } = $$props ;
let { isOpen } = $$props ;
let { isDialog } = $$props ;
if ( $$props . wrapper === void 0 && $$bindings . wrapper && wrapper !== void 0 )
$$bindings . wrapper ( wrapper ) ;
if ( $$props . isOpen === void 0 && $$bindings . isOpen && isOpen !== void 0 )
$$bindings . isOpen ( isOpen ) ;
if ( $$props . isDialog === void 0 && $$bindings . isDialog && isDialog !== void 0 )
$$bindings . isDialog ( isDialog ) ;
$$result . css . add ( css$2 ) ;
return ` <div class=" ${ [ "wrapper svelte-1h4o41o" , isOpen ? "is-open" : "" ] . join ( " " ) . trim ( ) } " ${ add _attribute ( "role" , isDialog ? "dialog" : void 0 , 0 ) } aria-label="color picker" ${ add _attribute ( "this" , wrapper , 0 ) } > ${ slots . default ? slots . default ( { } ) : ` ` }</div> ` ;
} ) ;
const defaultTexts = {
label : {
h : "hue channel" ,
s : "saturation channel" ,
v : "brightness channel" ,
r : "red channel" ,
g : "green channel" ,
b : "blue channel" ,
a : "alpha channel" ,
hex : "hex color" ,
withoutColor : "without color"
} ,
color : {
rgb : "rgb" ,
hsv : "hsv" ,
hex : "hex"
} ,
changeTo : "change to "
} ;
const css$1 = {
code : "label.svelte-pt866j.svelte-pt866j{display:flex;justify-content:center;margin-bottom:4px;grid-area:nullable;-webkit-user-select:none;-moz-user-select:none;user-select:none}input.svelte-pt866j.svelte-pt866j{margin:0}input.svelte-pt866j.svelte-pt866j:focus-visible{outline:none}input.svelte-pt866j:focus-visible+span.svelte-pt866j{width:14px;height:14px;border-radius:2px;outline:2px solid var(--focus-color, red);outline-offset:2px}div.svelte-pt866j.svelte-pt866j{width:32px;aspect-ratio:2;position:relative}div.svelte-pt866j .svelte-pt866j{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}" ,
map : '{"version":3,"file":"NullabilityCheckbox.svelte","sources":["NullabilityCheckbox.svelte"],"sourcesContent":["<script>/** whether the color picker is undefined */\\nexport let isUndefined;\\n/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */\\nexport let texts;\\n<\/script>\\n\\n<label class=\\"nullability-checkbox\\">\\n\\t<div>\\n\\t\\t<input type=\\"checkbox\\" bind:checked={isUndefined} />\\n\\t\\t<span />\\n\\t</div>\\n\\t{texts.label.withoutColor}\\n</label>\\n\\n<style>\\n\\tlabel {\\n\\t\\tdisplay: flex;\\n\\t\\tjustify-content: center;\\n\\t\\tmargin-bottom: 4px;\\n\\t\\tgrid-area: nullable;\\n\\t\\t-webkit-user-select: none;\\n\\t\\t -moz-user-select: none;\\n\\t\\t user-select: none;\\n\\t}\\n\\tinput {\\n\\t\\tmargin: 0;\\n\\t}\\n\\tinput:focus-visible {\\n\\t\\toutline: none;\\n\\t}\\n\\tinput:focus-visible + span {\\n\\t\\twidth: 14px;\\n\\t\\theight: 14px;\\n\\t\\tborder-radius: 2px;\\n\\t\\toutline: 2px solid var(--focus-color, red);\\n\\t\\toutline-offset: 2px;\\n\\t}\\n\\n\\tdiv {\\n\\t\\twidth: 32px;\\n\\t\\taspect-ratio: 2;\\n\\t\\tposition: relative;\\n\\t}\\n\\tdiv * {\\n\\t\\tposition: absolute;\\n\\t\\ttop: 50%;\\n\\t\\tleft: 50%;\\n\\t\\ttransform: translate(-50%, -50%);\\n\\t}\\n</style>\\n"],"names":[],"mappings":"AAeC,iCAAM,CACL,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,MAAM,CACvB,aAAa,CAAE,GAAG,CAClB,SAAS,CAAE,QAAQ,CACnB,mBAAmB,CAAE,IAAI,CACtB,gBAAgB,CAAE,IAAI,CACjB,WAAW,CAAE,IACtB,CACA,iCAAM,CACL,MAAM,CAAE,CACT,CACA,iCAAK,cAAe,CACnB,OAAO,CAAE,IACV,CACA,mBAAK,cAAc,CAAG,kBAAK,CAC1B,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,CAC1C,cAAc,CAAE,GACjB,CAEA,+BAAI,CACH,KAAK,CAAE,IAAI,CACX,YAAY,CAAE,CAAC,CACf,QAAQ,CAAE,QACX,CACA,iBAAG,CAAC,cAAE,CACL,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,GAAG,CACR,IAAI,CAAE,GAAG,CACT,SAAS,CAAE,UAAU,IAAI,CAAC,CAAC,IAAI,CAChC"}'
} ;
const NullabilityCheckbox = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let { isUndefined } = $$props ;
let { texts } = $$props ;
if ( $$props . isUndefined === void 0 && $$bindings . isUndefined && isUndefined !== void 0 )
$$bindings . isUndefined ( isUndefined ) ;
if ( $$props . texts === void 0 && $$bindings . texts && texts !== void 0 )
$$bindings . texts ( texts ) ;
$$result . css . add ( css$1 ) ;
return ` <label class="nullability-checkbox svelte-pt866j"><div class="svelte-pt866j"><input type="checkbox" class="svelte-pt866j" ${ add _attribute ( "checked" , isUndefined , 1 ) } > <span class="svelte-pt866j"></span></div> ${ escape ( texts . label . withoutColor ) } </label> ` ;
} ) ;
const css = {
code : "span.svelte-1n1d6qa.svelte-1n1d6qa{position:relative;color:var(--cp-border-color, black);--alpha-grid-bg:linear-gradient(45deg, #eee 25%, #0000 25%, #0000 75%, #eee 75%) 0 0 / 10px 10px,\n linear-gradient(45deg, #eee 25%, #0000 25%, #0000 75%, #eee 75%) 5px 5px / 10px 10px}.h.svelte-1n1d6qa.svelte-1n1d6qa,.a.svelte-1n1d6qa.svelte-1n1d6qa{display:inline-flex;justify-content:center;--track-height:var(--slider-width, 10px);--track-width:var(--picker-height, 200px);--track-border:none;--thumb-size:calc(var(--slider-width, 10px) - 3px);--thumb-background:white;--thumb-border:1px solid black;--margin-block:0;--gradient-direction:0.5turn}.horizontal.svelte-1n1d6qa .h.svelte-1n1d6qa,.horizontal.svelte-1n1d6qa .a.svelte-1n1d6qa{--track-width:calc(var(--picker-width, 200px) - 12px);--gradient-direction:0.25turn;margin:4px 6px}.horizontal.svelte-1n1d6qa .h.svelte-1n1d6qa{margin-top:8px}.vertical.svelte-1n1d6qa .h.svelte-1n1d6qa,.vertical.svelte-1n1d6qa .a.svelte-1n1d6qa{margin-left:3px}.h.svelte-1n1d6qa.svelte-1n1d6qa{grid-area:hue;--gradient-hue:#ff1500fb, #ffff00 17.2%, #ffff00 18.2%, #00ff00 33.3%, #00ffff 49.5%, #00ffff 51.5%, #0000ff 67.7%,\n #ff00ff 83.3%, #ff0000;--track-background:linear-gradient(var(--gradient-direction), var(--gradient-hue))}.a.svelte-1n1d6qa.svelte-1n1d6qa{grid-area:alpha;margin-top:2px;--track-background:linear-gradient(var(--gradient-direction), rgba(0, 0, 0, 0), var(--alphaless-color)),\n var(--alpha-grid-bg)}span.svelte-1n1d6qa .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}" ,
map : ` {"version":3,"file":"ColorPicker.svelte","sources":["ColorPicker.svelte"],"sourcesContent":["<script>import { createEventDispatcher } from 'svelte'; \\ nimport { colord } from 'colord'; \\ nimport Picker from './Picker.svelte'; \\ nimport { Slider } from 'svelte-awesome-slider'; \\ nimport PickerIndicator from './variant/default/PickerIndicator.svelte'; \\ nimport TextInput from './variant/default/TextInput.svelte'; \\ nimport Input from './variant/default/Input.svelte'; \\ nimport Wrapper from './variant/default/Wrapper.svelte'; \\ nimport { defaultTexts } from '../utils/texts'; \\ nimport { trapFocus } from '../utils/trapFocus'; \\ nimport NullabilityCheckbox from './variant/default/NullabilityCheckbox.svelte'; \\ nconst dispatch = createEventDispatcher(); \\ n/** customize the ColorPicker component parts. Can be used to display a Chrome variant or an Accessibility Notice */ \\ nexport let components = {}; \\ n/** input label, hidden when the ColorPicker is always shown (prop \` isDialog={false} \` ) */ \\ nexport let label = 'Choose a color'; \\ n/** input name, useful in a native form */ \\ nexport let name = undefined; \\ n/** if set to true, the color picker becomes nullable (rgb, hsv and hex set to undefined) */ \\ nexport let nullable = false; \\ n/** rgb color */ \\ nexport let rgb = nullable ? undefined : { r: 255, g: 0, b: 0, a: 1 }; \\ n/** hsv color */ \\ nexport let hsv = nullable ? undefined : { h: 0, s: 100, v: 100, a: 1 }; \\ n/** hex color */ \\ nexport let hex = nullable ? undefined : '#ff0000'; \\ n/** Colord color */ \\ nexport let color = undefined; \\ n/** indicator whether the selected color is light or dark */ \\ nexport let isDark = false; \\ n/** if set to false, disables the alpha channel */ \\ nexport let isAlpha = true; \\ n/** if set to false, the input and the label will not be displayed and the ColorPicker will always be visible */ \\ nexport let isDialog = true; \\ n/** indicator of the popup state */ \\ nexport let isOpen = !isDialog; \\ n/** if set to false, hide the hex, rgb and hsv text inputs */ \\ nexport let isTextInput = true; \\ n/** configure which hex, rgb and hsv inputs will be visible and in which order. If overridden, it is necessary to provide at least one value */ \\ nexport let textInputModes = ['hex', 'rgb', 'hsv']; \\ n/** If set to \\ "horizontal \\ ", the hue and alpha sliders will be displayed horizontally. It is necessary to set this props to \\ "horizontal \\ " for the ChromeVariant */ \\ nexport let sliderDirection = 'vertical'; \\ n/** If set to true, it will not be possible to close the color picker by clicking outside */ \\ nexport let disableCloseClickOutside = false; \\ n/** used with the A11yVariant. Define the accessibility examples in the color picker */ \\ nexport let a11yColors = [{ bgHex: '#ffffff' }]; \\ n/** required WCAG contrast level */ \\ nexport let a11yLevel = 'AA'; \\ n/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */ \\ nexport let texts = undefined; \\ n/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */ \\ nexport let a11yTexts = undefined; \\ n/** \\ n * Internal old values to trigger color conversion \\ n */ \\ nlet _rgb = { r: 255, g: 0, b: 0, a: 1 }; \\ nlet _hsv = { h: 0, s: 100, v: 100, a: 1 }; \\ nlet _hex = '#ff0000'; \\ nlet isUndefined = false; \\ nlet _isUndefined = isUndefined; \\ nlet spanElement; \\ nlet labelElement; \\ nlet wrapper; \\ nlet trap = undefined; \\ nconst default_components = { \\ n pickerIndicator: PickerIndicator, \\ n textInput: TextInput, \\ n input: Input, \\ n nullabilityCheckbox: NullabilityCheckbox, \\ n wrapper: Wrapper \\ n}; \\ nfunction getComponents() { \\ n return { \\ n ...default_components, \\ n ...components \\ n }; \\ n} \\ nfunction getTexts() { \\ n return { \\ n label: { \\ n ...defaultTexts.label, \\ n ...texts?.label \\ n }, \\ n color: { \\ n ...defaultTexts.colo
} ;
const ColorPicker = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
const dispatch = createEventDispatcher ( ) ;
let { components = { } } = $$props ;
let { label = "Choose a color" } = $$props ;
let { name = void 0 } = $$props ;
let { nullable = false } = $$props ;
let { rgb = nullable ? void 0 : { r : 255 , g : 0 , b : 0 , a : 1 } } = $$props ;
let { hsv = nullable ? void 0 : { h : 0 , s : 100 , v : 100 , a : 1 } } = $$props ;
let { hex = nullable ? void 0 : "#ff0000" } = $$props ;
let { color = void 0 } = $$props ;
let { isDark = false } = $$props ;
let { isAlpha = true } = $$props ;
let { isDialog = true } = $$props ;
let { isOpen = ! isDialog } = $$props ;
let { isTextInput = true } = $$props ;
let { textInputModes = [ "hex" , "rgb" , "hsv" ] } = $$props ;
let { sliderDirection = "vertical" } = $$props ;
let { disableCloseClickOutside = false } = $$props ;
let { a11yColors = [ { bgHex : "#ffffff" } ] } = $$props ;
let { a11yLevel = "AA" } = $$props ;
let { texts = void 0 } = $$props ;
let { a11yTexts = void 0 } = $$props ;
let _rgb = { r : 255 , g : 0 , b : 0 , a : 1 } ;
let _hsv = { h : 0 , s : 100 , v : 100 , a : 1 } ;
let _hex = "#ff0000" ;
let isUndefined = false ;
let _isUndefined = isUndefined ;
let spanElement ;
let labelElement ;
let wrapper ;
const default _components = {
pickerIndicator : PickerIndicator ,
textInput : TextInput ,
input : Input ,
nullabilityCheckbox : NullabilityCheckbox ,
wrapper : Wrapper
} ;
function getComponents ( ) {
return { ... default _components , ... components } ;
}
function getTexts ( ) {
return {
label : { ... defaultTexts . label , ... texts ? . label } ,
color : { ... defaultTexts . color , ... texts ? . color } ,
changeTo : texts ? . changeTo ? ? defaultTexts . changeTo
} ;
}
function updateColor ( ) {
if ( isUndefined && ! _isUndefined ) {
_isUndefined = true ;
hsv = rgb = hex = void 0 ;
dispatch ( "input" , { color , hsv , rgb , hex } ) ;
return ;
} else if ( _isUndefined && ! isUndefined ) {
_isUndefined = false ;
hsv = _hsv ;
rgb = _rgb ;
hex = _hex ;
dispatch ( "input" , { color , hsv , rgb , hex } ) ;
return ;
}
if ( ! hsv && ! rgb && ! hex ) {
isUndefined = true ;
_isUndefined = true ;
dispatch ( "input" , { color : void 0 , hsv , rgb , hex } ) ;
return ;
}
if ( hsv && rgb && hsv . h === _hsv . h && hsv . s === _hsv . s && hsv . v === _hsv . v && hsv . a === _hsv . a && rgb . r === _rgb . r && rgb . g === _rgb . g && rgb . b === _rgb . b && rgb . a === _rgb . a && hex === _hex ) {
return ;
}
isUndefined = false ;
if ( hsv && hsv . a === void 0 )
hsv . a = 1 ;
if ( _hsv . a === void 0 )
_hsv . a = 1 ;
if ( rgb && rgb . a === void 0 )
rgb . a = 1 ;
if ( _rgb . a === void 0 )
_rgb . a = 1 ;
if ( hex ? . substring ( 7 ) === "ff" )
hex = hex . substring ( 0 , 7 ) ;
if ( hex ? . substring ( 7 ) === "ff" )
hex = hex . substring ( 0 , 7 ) ;
if ( hsv && ( hsv . h !== _hsv . h || hsv . s !== _hsv . s || hsv . v !== _hsv . v || hsv . a !== _hsv . a ) ) {
color = w ( hsv ) ;
rgb = color . toRgb ( ) ;
hex = color . toHex ( ) ;
} else if ( rgb && ( rgb . r !== _rgb . r || rgb . g !== _rgb . g || rgb . b !== _rgb . b || rgb . a !== _rgb . a ) ) {
color = w ( rgb ) ;
hex = color . toHex ( ) ;
hsv = color . toHsv ( ) ;
} else if ( hex && hex !== _hex ) {
color = w ( hex ) ;
rgb = color . toRgb ( ) ;
hsv = color . toHsv ( ) ;
}
if ( color ) {
isDark = color . isDark ( ) ;
}
if ( ! hex )
return ;
_hsv = Object . assign ( { } , hsv ) ;
_rgb = Object . assign ( { } , rgb ) ;
_hex = hex ;
_isUndefined = isUndefined ;
dispatch ( "input" , { color , hsv , rgb , hex } ) ;
}
if ( $$props . components === void 0 && $$bindings . components && components !== void 0 )
$$bindings . components ( components ) ;
if ( $$props . label === void 0 && $$bindings . label && label !== void 0 )
$$bindings . label ( label ) ;
if ( $$props . name === void 0 && $$bindings . name && name !== void 0 )
$$bindings . name ( name ) ;
if ( $$props . nullable === void 0 && $$bindings . nullable && nullable !== void 0 )
$$bindings . nullable ( nullable ) ;
if ( $$props . rgb === void 0 && $$bindings . rgb && rgb !== void 0 )
$$bindings . rgb ( rgb ) ;
if ( $$props . hsv === void 0 && $$bindings . hsv && hsv !== void 0 )
$$bindings . hsv ( hsv ) ;
if ( $$props . hex === void 0 && $$bindings . hex && hex !== void 0 )
$$bindings . hex ( hex ) ;
if ( $$props . color === void 0 && $$bindings . color && color !== void 0 )
$$bindings . color ( color ) ;
if ( $$props . isDark === void 0 && $$bindings . isDark && isDark !== void 0 )
$$bindings . isDark ( isDark ) ;
if ( $$props . isAlpha === void 0 && $$bindings . isAlpha && isAlpha !== void 0 )
$$bindings . isAlpha ( isAlpha ) ;
if ( $$props . isDialog === void 0 && $$bindings . isDialog && isDialog !== void 0 )
$$bindings . isDialog ( isDialog ) ;
if ( $$props . isOpen === void 0 && $$bindings . isOpen && isOpen !== void 0 )
$$bindings . isOpen ( isOpen ) ;
if ( $$props . isTextInput === void 0 && $$bindings . isTextInput && isTextInput !== void 0 )
$$bindings . isTextInput ( isTextInput ) ;
if ( $$props . textInputModes === void 0 && $$bindings . textInputModes && textInputModes !== void 0 )
$$bindings . textInputModes ( textInputModes ) ;
if ( $$props . sliderDirection === void 0 && $$bindings . sliderDirection && sliderDirection !== void 0 )
$$bindings . sliderDirection ( sliderDirection ) ;
if ( $$props . disableCloseClickOutside === void 0 && $$bindings . disableCloseClickOutside && disableCloseClickOutside !== void 0 )
$$bindings . disableCloseClickOutside ( disableCloseClickOutside ) ;
if ( $$props . a11yColors === void 0 && $$bindings . a11yColors && a11yColors !== void 0 )
$$bindings . a11yColors ( a11yColors ) ;
if ( $$props . a11yLevel === void 0 && $$bindings . a11yLevel && a11yLevel !== void 0 )
$$bindings . a11yLevel ( a11yLevel ) ;
if ( $$props . texts === void 0 && $$bindings . texts && texts !== void 0 )
$$bindings . texts ( texts ) ;
if ( $$props . a11yTexts === void 0 && $$bindings . a11yTexts && a11yTexts !== void 0 )
$$bindings . a11yTexts ( a11yTexts ) ;
$$result . css . add ( css ) ;
let $$settled ;
let $$rendered ;
let previous _head = $$result . head ;
do {
$$settled = true ;
$$result . head = previous _head ;
{
if ( hsv || rgb || hex ) {
updateColor ( ) ;
}
}
{
updateColor ( ) ;
}
$$rendered = ` <span class=" ${ "color-picker " + escape ( sliderDirection , true ) + " svelte-1n1d6qa" } " ${ add _attribute ( "this" , spanElement , 0 ) } > ${ isDialog ? ` ${ validate _component ( getComponents ( ) . input || missing _component , "svelte:component" ) . $$render (
$$result ,
{
isOpen : true ,
hex ,
label ,
name ,
labelElement
} ,
{
labelElement : ( $$value ) => {
labelElement = $$value ;
$$settled = false ;
}
} ,
{ }
) } ` : ` $ { name ? ` <input type="hidden" ${ add _attribute ( "value" , hex , 0 ) } ${ add _attribute ( "name" , name , 0 ) } > ` : ` ` } ` } ${ validate _component ( getComponents ( ) . wrapper || missing _component , "svelte:component" ) . $$render (
$$result ,
{ isOpen , isDialog , wrapper } ,
{
wrapper : ( $$value ) => {
wrapper = $$value ;
$$settled = false ;
}
} ,
{
default : ( ) => {
return ` ${ nullable ? ` ${ validate _component ( getComponents ( ) . nullabilityCheckbox || missing _component , "svelte:component" ) . $$render (
$$result ,
{ texts : getTexts ( ) , isUndefined } ,
{
isUndefined : ( $$value ) => {
isUndefined = $$value ;
$$settled = false ;
}
} ,
{ }
) } ` : ` ` } ${ validate _component ( Picker , "Picker" ) . $$render (
$$result ,
{
components : getComponents ( ) ,
h : hsv ? . h ? ? _hsv . h ,
s : hsv ? . s ? ? _hsv . s ,
v : hsv ? . v ? ? _hsv . v ,
isDark
} ,
{ } ,
{ }
) } < div class = "h svelte-1n1d6qa" > $ { validate _component ( Slider , "Slider" ) . $$render (
$$result ,
{
min : 0 ,
max : 360 ,
step : 1 ,
value : hsv ? . h ? ? _hsv . h ,
direction : sliderDirection ,
reverse : sliderDirection === "vertical" ,
ariaLabel : getTexts ( ) . label . h
} ,
{ } ,
{ }
) } < / d i v > $ { i s A l p h a ? ` < d i v c l a s s = " a s v e l t e - 1 n 1 d 6 q a " $ { a d d _ s t y l e s ( {
"--alphaless-color" : ( hex ? hex : _hex ) . substring ( 0 , 7 )
} ) } > $ { validate _component ( Slider , "Slider" ) . $$render (
$$result ,
{
min : 0 ,
max : 1 ,
step : 0.01 ,
value : hsv ? . a ? ? _hsv . a ,
direction : sliderDirection ,
reverse : sliderDirection === "vertical" ,
ariaLabel : getTexts ( ) . label . a
} ,
{ } ,
{ }
) } < / d i v > ` : ` ` } $ { i s T e x t I n p u t ? ` $ { v a l i d a t e _ c o m p o n e n t ( g e t C o m p o n e n t s ( ) . t e x t I n p u t | | m i s s i n g _ c o m p o n e n t , " s v e l t e : c o m p o n e n t " ) . $ $ r e n d e r (
$$result ,
{
hex : hex ? ? _hex ,
rgb : rgb ? ? _rgb ,
hsv : hsv ? ? _hsv ,
isAlpha ,
textInputModes ,
texts : getTexts ( )
} ,
{ } ,
{ }
) } ` : ` ` } ${ getComponents ( ) . a11yNotice ? ` ${ validate _component ( getComponents ( ) . a11yNotice || missing _component , "svelte:component" ) . $$render (
$$result ,
{
components : getComponents ( ) ,
a11yColors ,
hex : hex || "#00000000" ,
a11yTexts ,
a11yLevel
} ,
{ } ,
{ }
) } ` : ` ` } ` ;
}
}
) } < / s p a n > ` ;
} while ( ! $$settled ) ;
return $$rendered ;
} ) ;
const Page = create _ssr _component ( ( $$result , $$props , $$bindings , slots ) => {
let $formData , $$unsubscribe _formData ;
let $tainted , $$unsubscribe _tainted ;
let { data } = $$props ;
const form = superForm ( data . form , {
validators : zodClient ( schema ) ,
resetForm : false ,
onResult : ( e ) => {
if ( e . result . type == "success" ) {
toast . success ( "Website configuration successfully updated!" ) ;
} else {
2024-06-07 15:11:44 +00:00
if ( e . result . type === "error" ) {
toast . error ( "Error when updating website. Message from server: " + e . result . error . message ) ;
}
2024-05-29 18:43:41 +00:00
}
}
} ) ;
const { form : formData , enhance , tainted , isTainted } = form ;
$$unsubscribe _formData = subscribe ( formData , ( value ) => $formData = value ) ;
$$unsubscribe _tainted = subscribe ( tainted , ( value ) => $tainted = value ) ;
set _store _value ( formData , $formData . id = data . blog _info . id , $formData ) ;
let disable _freebies = ! $formData . use _freebie ;
if ( $$props . data === void 0 && $$bindings . data && data !== void 0 )
$$bindings . data ( data ) ;
let $$settled ;
let $$rendered ;
let previous _head = $$result . head ;
do {
$$settled = true ;
$$result . head = previous _head ;
disable _freebies = ! $formData . use _freebie ;
2024-05-30 10:31:54 +00:00
$$rendered = ` <div class="w-full max-w-7xl"><form method="post" enctype="multipart/form-data"><input type="text" ${ add _attribute ( "value" , data . blog _info . id , 0 ) } name="id" readonly class="hidden"> <div class="grid grid-cols-1 gap-16 md:grid-cols-2 md:grid-rows-1"><div><h2 class="mb-4 text-2xl font-bold" data-svelte-h="svelte-wga1n3">Basics</h2> ${ validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "name" } , {}, {
2024-05-29 18:43:41 +00:00
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
return ` Blog name ` ;
}
} ) } $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { value : $formData . name } ) ,
{
value : ( $$value ) => {
$formData . name = $$value ;
$$settled = false ;
}
} ,
{ }
) } ` ;
}
} ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , { } ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "title" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
return ` Blog title ` ;
}
} ) } $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { value : $formData . title } ) ,
{
value : ( $$value ) => {
$formData . title = $$value ;
$$settled = false ;
}
} ,
{ }
) } ` ;
}
} ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , { } ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "subtitle" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
return ` Blog subtitle ` ;
}
} ) } $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { value : $formData . subtitle } ) ,
{
value : ( $$value ) => {
$formData . subtitle = $$value ;
$$settled = false ;
}
} ,
{ }
) } ` ;
}
} ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , { } ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "primary_color_hex" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
return ` Primary color ` ;
}
} ) } $ { validate _component ( ColorPicker , "ColorPicker" ) . $$render ( $$result , Object . assign ( { } , { hex : data . blog _info . primary _color _hex } , attrs ) , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , { } ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "secondary_color_hex" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
return ` Secondary color ` ;
}
} ) } $ { validate _component ( ColorPicker , "ColorPicker" ) . $$render ( $$result , Object . assign ( { } , { hex : data . blog _info . secondary _color _hex } , attrs ) , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , { } ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "text_color_hex" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
return ` Text color ` ;
}
} ) } $ { validate _component ( ColorPicker , "ColorPicker" ) . $$render ( $$result , Object . assign ( { } , { hex : data . blog _info . text _color _hex } , attrs ) , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , { } ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "domain" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
return ` Custom domain ` ;
}
} ) } $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { value : $formData . domain } ) ,
{
value : ( $$value ) => {
$formData . domain = $$value ;
$$settled = false ;
}
} ,
{ }
) } ` ;
}
} ) } $ { data . blog _info . subdomain _slug ? ` ${ validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , {}, {
default : ( ) => {
2024-05-30 10:31:54 +00:00
return ` You can also access your website at <a href=" ${ "http://" + escape ( data . blog _info . subdomain _slug , true ) + "." + escape ( config . sites _url , true ) } " class="font-semibold underline"> ${ escape ( data . blog _info . subdomain _slug ) } . ${ escape ( config . sites _url ) } </a> ` ;
2024-05-29 18:43:41 +00:00
}
} ) } ` : ` ` } ${ validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , {}, {})} ` ;
}
2024-05-30 10:31:54 +00:00
} ) } < / d i v > < d i v > < h 2 c l a s s = " m b - 4 t e x t - 2 x l f o n t - b o l d " d a t a - s v e l t e - h = " s v e l t e - 1 o s 2 o u 3 " > F r e e b i e s < / h 2 > $ { v a l i d a t e _ c o m p o n e n t ( F o r m _ f i e l d , " F o r m . F i e l d " ) . $ $ r e n d e r ( $ $ r e s u l t , { f o r m , n a m e : " u s e _ f r e e b i e " } , { } , {
2024-05-29 18:43:41 +00:00
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { class : "text-right" } , {}, {
default : ( ) => {
return ` Send freebie ` ;
}
} ) } < div class = "flex items-center justify-start" > $ { validate _component ( Switch , "Switch" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { checked : $formData . use _freebie } ) ,
{
checked : ( $$value ) => {
$formData . use _freebie = $$value ;
$$settled = false ;
}
} ,
{ }
) } < / d i v > $ { v a l i d a t e _ c o m p o n e n t ( F o r m _ d e s c r i p t i o n , " F o r m . D e s c r i p t i o n " ) . $ $ r e n d e r ( $ $ r e s u l t , { } , { } , {
default : ( ) => {
return ` Whether to send a freebie when a new person enters their email on your website. ` ;
}
} ) } ` ;
}
} ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "freebie_name" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { class : "text-right" } , {}, {
default : ( ) => {
return ` Freebie Name ` ;
}
} ) } < div class = "flex items-center justify-start" > $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { value : $formData . freebie _name } , { readonly : disable _freebies } ) ,
{
value : ( $$value ) => {
$formData . freebie _name = $$value ;
$$settled = false ;
} ,
readonly : ( $$value ) => {
disable _freebies = $$value ;
$$settled = false ;
}
} ,
{ }
) } < / d i v > ` ;
}
} ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
} ) } $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "freebie_url" } , { } , {
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { class : "text-right" } , {}, {
default : ( ) => {
return ` Freebie file ` ;
}
} ) } < div class = "flex items-center justify-start" > $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
{ type : "file" , disabled : disable _freebies } ,
{
disabled : ( $$value ) => {
disable _freebies = $$value ;
$$settled = false ;
}
} ,
{ }
) } $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { class : "hidden" } , { readonly : true } , { value : $formData . freebie _url } ) ,
{
value : ( $$value ) => {
$formData . freebie _url = $$value ;
$$settled = false ;
}
} ,
{ }
) } < / d i v > ` ;
}
2024-06-07 19:50:31 +00:00
} ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , {
default : ( ) => {
return ` Maximum size of 5MB (TEMPORARY) ` ;
}
2024-05-29 18:43:41 +00:00
} ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
2024-05-30 10:31:54 +00:00
} ) } < div class = "hidden" > $ { validate _component ( Form _field , "Form.Field" ) . $$render ( $$result , { form , name : "freebie_image_url" } , { } , {
2024-05-29 18:43:41 +00:00
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { class : "text-right" } , {}, {
default : ( ) => {
return ` Freebie image ` ;
}
} ) } < div class = "flex items-center justify-start" > $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
{
type : "file" ,
accept : "png,jpg,webp,jpeg" ,
disabled : disable _freebies
} ,
{
disabled : ( $$value ) => {
disable _freebies = $$value ;
$$settled = false ;
}
} ,
{ }
) } $ { validate _component ( Input$1 , "Input" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { class : "hidden" } , { readonly : true } , { value : $formData . freebie _image _url } ) ,
{
value : ( $$value ) => {
$formData . freebie _image _url = $$value ;
$$settled = false ;
}
} ,
{ }
) } < / d i v > ` ;
}
} ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } ` ;
}
2024-05-30 10:31:54 +00:00
} ) } < / d i v > $ { v a l i d a t e _ c o m p o n e n t ( F o r m _ f i e l d , " F o r m . F i e l d " ) . $ $ r e n d e r ( $ $ r e s u l t , { f o r m , n a m e : " f r e e b i e _ t e x t " } , { } , {
2024-05-29 18:43:41 +00:00
default : ( ) => {
return ` ${ validate _component ( Control , "Form.Control" ) . $$render ( $$result , { } , {}, {
default : ( { attrs } ) => {
return ` ${ validate _component ( Form _label , "Form.Label" ) . $$render ( $$result , { class : "text-right" } , {}, {
default : ( ) => {
return ` Freebie text ` ;
}
} ) } < div class = "flex items-center justify-start" > $ { validate _component ( Textarea , "Textarea" ) . $$render (
$$result ,
Object . assign ( { } , attrs , { value : $formData . freebie _text } ) ,
{
value : ( $$value ) => {
$formData . freebie _text = $$value ;
$$settled = false ;
}
} ,
{ }
) } < / d i v > ` ;
}
} ) } $ { validate _component ( Form _field _errors , "Form.FieldErrors" ) . $$render ( $$result , { } , { } , { } ) } $ { validate _component ( Form _description , "Form.Description" ) . $$render ( $$result , { } , { } , {
default : ( ) => {
return ` The text displayed next to the signup form on your blog. ` ;
}
} ) } ` ;
}
} ) } < / d i v > < / d i v > $ { v a l i d a t e _ c o m p o n e n t ( F o r m _ b u t t o n , " F o r m . B u t t o n " ) . $ $ r e n d e r ( $ $ r e s u l t , { d i s a b l e d : ! i s T a i n t e d ( $ t a i n t e d ) } , { } , {
default : ( ) => {
return ` Submit ` ;
}
} ) } < / f o r m > < / d i v > ` ;
} while ( ! $$settled ) ;
$$unsubscribe _formData ( ) ;
$$unsubscribe _tainted ( ) ;
return $$rendered ;
} ) ;
export { Page as default } ;
2024-06-10 19:21:30 +00:00
//# sourceMappingURL=_page.svelte-DiR4gkLj.js.map