Omer/youtuber-blog-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
6f74d07a12
youtuber-blog-frontend/build/server/chunks/_page.svelte-C7zLFnba.js

885 lines
104 KiB
JavaScript
Raw Normal View History

uhhh beesechurger
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';
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 } from './ssr-DX6yy04n.js';
import { F as Form_field, C as Control, a as Form_label, I as Input$1, b as Form_description, c as Form_field_errors, S as Switch, T as Textarea } from './textarea-T1WcfCyZ.js';
import './stores-D9BZZahs.js';
import { g as superForm } from './index-k1TR3EJq.js';
import './index-Ddp2AB5f.js';
import { b as zodClient } from './zod-BtM9a6Uj.js';
new build
2024-06-07 15:44:08 +00:00
import { s as schema } from './7-B4yEXH3g.js';
uhhh beesechurger
2024-05-29 18:43:41 +00:00
import { f as toast } from './index-EscoC7AS.js';
new build
2024-05-29 19:31:10 +00:00
import { c as config } from './config-BHx687w1.js';
uhhh beesechurger
2024-05-29 18:43:41 +00:00
import './index3-TIAgGdNz.js';
import { B as Button } from './button-DV8DKkH_.js';
import './index2-CkEewRlU.js';
import 'clsx';
import './exports-DuWZopOC.js';
import './stringify-D5iWhcfN.js';
import './scheduler-DW9WkiYZ.js';
import 'zod';
new build
2024-05-29 19:31:10 +00:00
import './shared-server-i79vVjEm.js';
uhhh beesechurger
2024-05-29 18:43:41 +00:00
import 'tailwind-variants';
import './ssr2-BVSPLo1E.js';
import 'tailwind-merge';
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
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;
}
},
{}
)}</div> <div class="v svelte-amfbfx"${add_styles({ "--pos-x": pos.x })}>${validate_component(Slider, "Slider").$$render(
$$result,
{
keyboardOnly: true,
ariaValueText: (value) => `${value}%`,
direction: "vertical",
ariaLabel: "brightness color",
value: v
},
{
value: ($$value) => {
v = $$value;
$$settled = false;
}
},
{}
)}</div></div> `;
} 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&lt;'hex' | 'rgb' | 'hsv'&gt; — 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
},
{},
{}
)}</div> ${isAlpha ? `<div class="a svelte-1n1d6qa"${add_styles({
"--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
},
{},
{}
)}</div>` : ``} ${isTextInput ? `${validate_component(getComponents().textInput || missing_component, "svelte:component").$$render(
$$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
},
{},
{}
)}` : ``}`;
}
}
)}</span> `;
} 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 {
console.log(e.result);
new build
2024-06-07 15:11:44 +00:00
if (e.result.type === "error") {
console.log(e.result.error);
toast.error("Error when updating website. Message from server: " + e.result.error.message);
}
uhhh beesechurger
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;
new build
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" }, {}, {
uhhh beesechurger
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: () => {
new build
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>`;
uhhh beesechurger
2024-05-29 18:43:41 +00:00
}
})}` : ``} ${validate_component(Form_field_errors, "Form.FieldErrors").$$render($$result, {}, {}, {})}`;
}
new build
2024-05-30 10:31:54 +00:00
})}</div> <div><h2 class="mb-4 text-2xl font-bold" data-svelte-h="svelte-1os2ou3">Freebies</h2> ${validate_component(Form_field, "Form.Field").$$render($$result, { form, name: "use_freebie" }, {}, {
uhhh beesechurger
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;
}
},
{}
)} </div> ${validate_component(Form_description, "Form.Description").$$render($$result, {}, {}, {
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;
}
},
{}
)}</div>`;
}
})} ${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;
}
},
{}
)}</div>`;
}
})} ${validate_component(Form_field_errors, "Form.FieldErrors").$$render($$result, {}, {}, {})}`;
}
new build
2024-05-30 10:31:54 +00:00
})} <div class="hidden">${validate_component(Form_field, "Form.Field").$$render($$result, { form, name: "freebie_image_url" }, {}, {
uhhh beesechurger
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;
}
},
{}
)}</div>`;
}
})} ${validate_component(Form_field_errors, "Form.FieldErrors").$$render($$result, {}, {}, {})}`;
}
new build
2024-05-30 10:31:54 +00:00
})}</div> ${validate_component(Form_field, "Form.Field").$$render($$result, { form, name: "freebie_text" }, {}, {
uhhh beesechurger
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;
}
},
{}
)}</div>`;
}
})} ${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.`;
}
})}`;
}
})}</div></div> ${validate_component(Form_button, "Form.Button").$$render($$result, { disabled: !isTainted($tainted) }, {}, {
default: () => {
return `Submit`;
}
})}</form></div>`;
} while (!$$settled);
$$unsubscribe_formData();
$$unsubscribe_tainted();
return $$rendered;
});
export { Page as default };
new build
2024-06-07 15:44:08 +00:00
//# sourceMappingURL=_page.svelte-C7zLFnba.js.map
Reference in New Issue Copy Permalink