kritzel-stencil 0.4.4 → 0.4.6

package/dist/components/p-B5oHmPJb.js

@@ -1 +1,97 @@
-import{p as i,H as o,c as e,h as t,d as r,t as l}from"./p-B43upypT.js";import{d as s}from"./p-DX2nriaq.js";import{d as n}from"./p-CdR76C4L.js";const a=i(class extends o{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.providerLogin=e(this,"providerLogin"),this.dialogClosed=e(this,"dialogClosed")}get host(){return this}providers=[];dialogTitle="Sign in";subtitle;isDialogOpen=!1;loadingProvider=null;providerLogin;dialogClosed;async open(){this.loadingProvider=null,this.isDialogOpen=!0}async close(){this.isDialogOpen=!1,this.loadingProvider=null}async setLoading(i){this.loadingProvider=i}handleProviderClick=i=>{this.loadingProvider||(this.loadingProvider=i.name,this.providerLogin.emit({provider:i.name}))};closeDialog=()=>{this.isDialogOpen=!1,this.loadingProvider=null,this.dialogClosed.emit()};render(){return t(r,{key:"d2b393ac37292a0cf88d0e18e9768ca666b238b2"},t("kritzel-dialog",{key:"6e302e9030b5da0baf307fe261285e484b3c1f08",dialogTitle:this.dialogTitle,isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small",contained:!0},t("div",{key:"f32b073d70acb3874dc3ab4c3905543067a543d8",class:"login-content"},this.subtitle&&t("p",{key:"42a6ec7d6c9ca0a14700bd13cbe8ee9edbbcc18b",class:"login-subtitle"},this.subtitle),t("div",{key:"cbb5497abd1c88fc364ac8bb7c3d356df6df0dad",class:"login-providers"},this.providers.map((i=>t("button",{key:i.name,class:{"provider-button":!0,"is-loading":this.loadingProvider===i.name,"is-disabled":null!==this.loadingProvider&&this.loadingProvider!==i.name},disabled:null!==this.loadingProvider&&this.loadingProvider!==i.name,onClick:()=>this.handleProviderClick(i)},this.loadingProvider===i.name?t("span",{class:"spinner"}):i.icon&&t("kritzel-icon",{name:i.icon,size:20}),t("span",{class:"provider-label"},i.label))))))))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}"}},[513,"kritzel-login-dialog",{providers:[16],dialogTitle:[1,"dialog-title"],subtitle:[1],isDialogOpen:[32],loadingProvider:[32],open:[64],close:[64],setLoading:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-login-dialog","kritzel-dialog","kritzel-icon"].forEach((i=>{switch(i){case"kritzel-login-dialog":customElements.get(l(i))||customElements.define(l(i),a);break;case"kritzel-dialog":customElements.get(l(i))||s();break;case"kritzel-icon":customElements.get(l(i))||n()}}))}export{a as K,d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$2 } from './p-DX2nriaq.js';
+import { d as defineCustomElement$1 } from './p-CdR76C4L.js';
+
+const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
+
+const KritzelLoginDialog = /*@__PURE__*/ proxyCustomElement(class KritzelLoginDialog extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.providerLogin = createEvent(this, "providerLogin");
+        this.dialogClosed = createEvent(this, "dialogClosed");
+    }
+    get host() { return this; }
+    /** Array of authentication provider buttons to render */
+    providers = [];
+    /** Dialog title */
+    dialogTitle = 'Sign in';
+    /** Optional subtitle text displayed below the title */
+    subtitle;
+    isDialogOpen = false;
+    loadingProvider = null;
+    /** Emitted when a provider button is clicked */
+    providerLogin;
+    /** Emitted when the dialog is closed */
+    dialogClosed;
+    /** Opens the login dialog */
+    async open() {
+        this.loadingProvider = null;
+        this.isDialogOpen = true;
+    }
+    /** Closes the login dialog */
+    async close() {
+        this.isDialogOpen = false;
+        this.loadingProvider = null;
+    }
+    /** Sets or clears the loading state on a provider button */
+    async setLoading(provider) {
+        this.loadingProvider = provider;
+    }
+    handleProviderClick = (provider) => {
+        if (this.loadingProvider)
+            return;
+        this.loadingProvider = provider.name;
+        this.providerLogin.emit({ provider: provider.name });
+    };
+    closeDialog = () => {
+        this.isDialogOpen = false;
+        this.loadingProvider = null;
+        this.dialogClosed.emit();
+    };
+    render() {
+        return (h(Host, { key: 'd2b393ac37292a0cf88d0e18e9768ca666b238b2' }, h("kritzel-dialog", { key: '6e302e9030b5da0baf307fe261285e484b3c1f08', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'f32b073d70acb3874dc3ab4c3905543067a543d8', class: "login-content" }, this.subtitle && (h("p", { key: '42a6ec7d6c9ca0a14700bd13cbe8ee9edbbcc18b', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'cbb5497abd1c88fc364ac8bb7c3d356df6df0dad', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+                'provider-button': true,
+                'is-loading': this.loadingProvider === provider.name,
+                'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
+            }, disabled: this.loadingProvider !== null && this.loadingProvider !== provider.name, onClick: () => this.handleProviderClick(provider) }, this.loadingProvider === provider.name ? (h("span", { class: "spinner" })) : (provider.icon && h("kritzel-icon", { name: provider.icon, size: 20 })), h("span", { class: "provider-label" }, provider.label)))))))));
+    }
+    static get style() { return kritzelLoginDialogCss(); }
+}, [513, "kritzel-login-dialog", {
+        "providers": [16],
+        "dialogTitle": [1, "dialog-title"],
+        "subtitle": [1],
+        "isDialogOpen": [32],
+        "loadingProvider": [32],
+        "open": [64],
+        "close": [64],
+        "setLoading": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-login-dialog", "kritzel-dialog", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-login-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelLoginDialog);
+            }
+            break;
+        case "kritzel-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelLoginDialog as K, defineCustomElement as d };

package/dist/components/p-B6t5q-V4.js

@@ -1 +1,63 @@
-import{p as r,H as e,c as i,h as t,d as a,t as o}from"./p-B43upypT.js";const s=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.valueChange=i(this,"valueChange")}value=1;min=0;max=1;step=.01;previewColor="#000000";valueChange;handleInput(r){const e=parseFloat(r.target.value);this.value=e,this.valueChange.emit(e)}getPercentage(){return Math.round(100*this.value)}render(){const r=this.getPercentage();return t(a,{key:"a175945928dac5ae5b4464c0b11c4d812f8a3ef6"},t("div",{key:"a045d452d459577f8d657e00dd9189797dd4de66",class:"opacity-container"},t("div",{key:"11a4217a4b6e1f0b1981a8fd8e03f505a9d4a3b5",class:"slider-wrapper"},t("input",{key:"2cbf72a10026c4201727208230b8832ea2309a76",type:"range",class:"opacity-slider",min:this.min,max:this.max,step:this.step,value:this.value,onInput:r=>this.handleInput(r),style:{"--slider-progress":`${r}%`,"--kritzel-opacity-slider-thumb-border-color":this.previewColor}}))))}static get style(){return":host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(     to right,     var(--kritzel-opacity-slider-active-color, #007AFF) 0%,     var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%   );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}"}},[513,"kritzel-opacity-slider",{value:[1026],min:[2],max:[2],step:[2],previewColor:[1,"preview-color"]}]);function l(){"undefined"!=typeof customElements&&["kritzel-opacity-slider"].forEach((r=>{"kritzel-opacity-slider"===r&&(customElements.get(o(r))||customElements.define(o(r),s))}))}export{s as K,l as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(     to right,     var(--kritzel-opacity-slider-active-color, #007AFF) 0%,     var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%   );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
+
+const KritzelOpacitySlider = /*@__PURE__*/ proxyCustomElement(class KritzelOpacitySlider extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current opacity value (0 to 1) */
+    value = 1;
+    /** Minimum opacity value */
+    min = 0;
+    /** Maximum opacity value */
+    max = 1;
+    /** Step increment */
+    step = 0.01;
+    /** Color to display in the preview (optional) */
+    previewColor = '#000000';
+    valueChange;
+    handleInput(event) {
+        const input = event.target;
+        const newValue = parseFloat(input.value);
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getPercentage() {
+        return Math.round(this.value * 100);
+    }
+    render() {
+        const percentage = this.getPercentage();
+        return (h(Host, { key: 'a175945928dac5ae5b4464c0b11c4d812f8a3ef6' }, h("div", { key: 'a045d452d459577f8d657e00dd9189797dd4de66', class: "opacity-container" }, h("div", { key: '11a4217a4b6e1f0b1981a8fd8e03f505a9d4a3b5', class: "slider-wrapper" }, h("input", { key: '2cbf72a10026c4201727208230b8832ea2309a76', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+                '--slider-progress': `${percentage}%`,
+                '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
+            } })))));
+    }
+    static get style() { return kritzelOpacitySliderCss(); }
+}, [513, "kritzel-opacity-slider", {
+        "value": [1026],
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "previewColor": [1, "preview-color"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-opacity-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-opacity-slider":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelOpacitySlider);
+            }
+            break;
+    } });
+}
+
+export { KritzelOpacitySlider as K, defineCustomElement as d };

package/dist/components/p-B8Xi4Clg.js

@@ -1 +1,43 @@
-import{p as t,H as e,h as o,d as s,t as i}from"./p-B43upypT.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}fontFamily="Arial, sans-serif";size=24;color="#000000";render(){return o(s,{key:"57369ac95d0c99a52a8580e7659ec10e0e8ab38e"},o("div",{key:"e8f128fd7b8d26debb2c4ad2075b27f969d731bd",class:"font-preview",style:{fontFamily:this.fontFamily,fontSize:`${this.size}px`,color:this.color}},"A"))}static get style(){return":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}"}},[513,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}]);function r(){"undefined"!=typeof customElements&&["kritzel-font"].forEach((t=>{"kritzel-font"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))}export{n as K,r as d}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelFontCss = () => `:host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}`;
+
+const KritzelFont = /*@__PURE__*/ proxyCustomElement(class KritzelFont extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    fontFamily = 'Arial, sans-serif';
+    size = 24;
+    color = '#000000';
+    render() {
+        return (h(Host, { key: '57369ac95d0c99a52a8580e7659ec10e0e8ab38e' }, h("div", { key: 'e8f128fd7b8d26debb2c4ad2075b27f969d731bd', class: "font-preview", style: {
+                fontFamily: this.fontFamily,
+                fontSize: `${this.size}px`,
+                color: this.color
+            } }, "A")));
+    }
+    static get style() { return kritzelFontCss(); }
+}, [513, "kritzel-font", {
+        "fontFamily": [1, "font-family"],
+        "size": [2],
+        "color": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-font"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-font":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelFont);
+            }
+            break;
+    } });
+}
+
+export { KritzelFont as K, defineCustomElement as d };