kritzel-react 0.1.32 → 0.1.34

package/dist/kritzel-stencil/src/components/shared/kritzel-brush-style/kritzel-brush-style.js

@@ -1,46 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Host, Prop, Event } from '@stencil/core';
-let KritzelBrushStyle = class KritzelBrushStyle {
-    constructor() {
-        this.type = 'pen';
-        this.brushOptions = [
-            { value: 'pen', label: 'Pen' },
-            { value: 'highlighter', label: 'Highlighter' },
-        ];
-    }
-    handleDropdownValueChange(event) {
-        this.typeChange.emit(event.detail);
-    }
-    render() {
-        const dropdownOptions = this.brushOptions.map(option => ({
-            value: option.value,
-            label: option.label,
-        }));
-        return (React.createElement(Host, null,
-            React.createElement("kritzel-dropdown", { options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) },
-                React.createElement("button", { class: "brush-style-button", slot: "prefix" },
-                    React.createElement("kritzel-icon", { name: this.type, size: 16 })))));
-    }
-};
-__decorate([
-    Prop()
-], KritzelBrushStyle.prototype, "type", void 0);
-__decorate([
-    Prop()
-], KritzelBrushStyle.prototype, "brushOptions", void 0);
-__decorate([
-    Event()
-], KritzelBrushStyle.prototype, "typeChange", void 0);
-KritzelBrushStyle = __decorate([
-    Component({
-        tag: 'kritzel-brush-style',
-        styleUrl: 'kritzel-brush-style.css',
-        shadow: true,
-    })
-], KritzelBrushStyle);
-export { KritzelBrushStyle };

package/dist/kritzel-stencil/src/components/shared/kritzel-dropdown/kritzel-dropdown.js

@@ -1,312 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Host, Prop, State, Event, Watch, Element, Listen } from '@stencil/core';
-let KritzelDropdown = class KritzelDropdown {
-    constructor() {
-        this.options = [];
-        this.selectStyles = {};
-        this.hasSuffixContent = false;
-        this.hasPrefixContent = false;
-        this.isOpen = false;
-        this.focusedIndex = -1;
-        this.openDirection = 'down';
-        this.toggleMenu = () => {
-            if (this.isOpen) {
-                this.closeMenu();
-            }
-            else {
-                this.openMenu();
-            }
-        };
-        this.openMenu = () => {
-            this.calculateMenuDirection();
-            this.isOpen = true;
-            const currentIndex = this.options.findIndex(opt => opt.value === this.internalValue);
-            this.focusedIndex = currentIndex >= 0 ? currentIndex : 0;
-            // Focus the menu after it opens
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-        };
-        this.calculateMenuDirection = () => {
-            if (!this.wrapperElement) {
-                this.openDirection = 'down';
-                return;
-            }
-            const wrapperRect = this.wrapperElement.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - wrapperRect.bottom;
-            const spaceAbove = wrapperRect.top;
-            // Estimate menu height (max 240px or fewer based on options)
-            const estimatedOptionHeight = 36; // padding + content
-            const menuPadding = 8; // 4px top + 4px bottom
-            const estimatedMenuHeight = Math.min(240, this.options.length * estimatedOptionHeight + menuPadding);
-            // Prefer opening downward, but switch to upward if not enough space below
-            // and there's more space above
-            if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {
-                this.openDirection = 'up';
-            }
-            else {
-                this.openDirection = 'down';
-            }
-        };
-        this.closeMenu = () => {
-            this.isOpen = false;
-            this.focusedIndex = -1;
-            // Note: openDirection is intentionally NOT reset here to allow the close animation
-            // to play in the same direction the menu was opened
-        };
-        this.selectOption = (option) => {
-            var _a;
-            if (this.internalValue !== option.value) {
-                this.internalValue = option.value;
-                this.valueChanged.emit(this.internalValue);
-            }
-            this.closeMenu();
-            (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        this.handleTriggerKeyDown = (event) => {
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                case 'ArrowDown':
-                case 'ArrowUp':
-                    event.preventDefault();
-                    this.openMenu();
-                    break;
-            }
-        };
-        this.handleMenuKeyDown = (event) => {
-            switch (event.key) {
-                case 'ArrowDown':
-                    event.preventDefault();
-                    this.focusedIndex = Math.min(this.focusedIndex + 1, this.options.length - 1);
-                    this.scrollFocusedOptionIntoView();
-                    break;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
-                    this.scrollFocusedOptionIntoView();
-                    break;
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    if (this.focusedIndex >= 0 && this.focusedIndex < this.options.length) {
-                        this.selectOption(this.options[this.focusedIndex]);
-                    }
-                    break;
-                case 'Home':
-                    event.preventDefault();
-                    this.focusedIndex = 0;
-                    this.scrollFocusedOptionIntoView();
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    this.focusedIndex = this.options.length - 1;
-                    this.scrollFocusedOptionIntoView();
-                    break;
-                case 'Tab':
-                    this.closeMenu();
-                    break;
-            }
-        };
-        this.scrollFocusedOptionIntoView = () => {
-            if (!this.menuElement || this.focusedIndex < 0) {
-                return;
-            }
-            // Use requestAnimationFrame to ensure the DOM has updated with the new focused class
-            requestAnimationFrame(() => {
-                var _a;
-                const focusedOption = (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-option.is-focused');
-                if (focusedOption) {
-                    focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-                }
-            });
-        };
-        this.handleOptionMouseEnter = (index) => {
-            this.focusedIndex = index;
-        };
-        this.evaluateSuffixContent = () => {
-            if (this.suffixSlotElement) {
-                const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
-                if (this.hasSuffixContent !== newHasContent) {
-                    this.hasSuffixContent = newHasContent;
-                }
-            }
-            else if (this.hasSuffixContent !== false) {
-                this.hasSuffixContent = false;
-            }
-        };
-        this.evaluatePrefixContent = () => {
-            if (this.prefixSlotElement) {
-                const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
-                if (this.hasPrefixContent !== newHasContent) {
-                    this.hasPrefixContent = newHasContent;
-                }
-            }
-            else if (this.hasPrefixContent !== false) {
-                this.hasPrefixContent = false;
-            }
-        };
-    }
-    optionsChanged() {
-        this.updateInternalValue(this.internalValue, true);
-    }
-    externalValueChanged(newValue) {
-        if (newValue !== this.internalValue) {
-            this.updateInternalValue(newValue, false);
-        }
-    }
-    componentWillLoad() {
-        this.updateInternalValue(this.value, false);
-        this.evaluateSuffixContent();
-        this.evaluatePrefixContent();
-    }
-    disconnectedCallback() {
-        // Close menu when component is removed from DOM to prevent orphaned open dropdowns
-        if (this.isOpen) {
-            this.isOpen = false;
-        }
-    }
-    handleDocumentClick(event) {
-        if (this.isOpen && !this.el.contains(event.target)) {
-            this.closeMenu();
-        }
-    }
-    handleDocumentKeydown(event) {
-        var _a;
-        if (this.isOpen && event.key === 'Escape') {
-            event.stopPropagation();
-            event.preventDefault();
-            this.closeMenu();
-            (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
-    updateInternalValue(proposedValue, emitChange) {
-        let finalValue = proposedValue;
-        if (this.options && this.options.length > 0) {
-            const isValidValue = this.options.some(opt => opt.value === finalValue);
-            if (!finalValue || !isValidValue) {
-                finalValue = this.options[0].value;
-            }
-        }
-        else {
-            finalValue = undefined;
-        }
-        if (this.internalValue !== finalValue) {
-            this.internalValue = finalValue;
-            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
-                this.valueChanged.emit(this.internalValue);
-            }
-        }
-    }
-    getSelectedLabel() {
-        var _a;
-        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
-        return (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '';
-    }
-    getSelectedStyle() {
-        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
-        return selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.style;
-    }
-    render() {
-        const triggerClasses = {
-            'dropdown-trigger': true,
-            'has-suffix-border': this.hasSuffixContent,
-            'has-prefix-border': this.hasPrefixContent,
-            'is-open': this.isOpen,
-            'open-up': this.openDirection === 'up',
-        };
-        const menuClasses = {
-            'dropdown-menu': true,
-            'is-open': this.isOpen,
-            'open-up': this.openDirection === 'up',
-            'open-down': this.openDirection === 'down',
-        };
-        return (React.createElement(Host, null,
-            React.createElement("div", { class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) },
-                React.createElement("slot", { name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }),
-                React.createElement("div", { class: "dropdown-container", style: { width: this.width } },
-                    React.createElement("button", { type: "button", class: triggerClasses, style: Object.assign(Object.assign({}, this.selectStyles), this.getSelectedStyle()), onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) },
-                        React.createElement("span", { class: "dropdown-trigger-label" }, this.getSelectedLabel()),
-                        React.createElement("span", { class: "dropdown-trigger-arrow", "aria-hidden": "true" },
-                            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
-                                React.createElement("polyline", { points: "6 9 12 15 18 9" }))))),
-                React.createElement("slot", { name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }),
-                React.createElement("ul", { class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
-                    const isSelected = option.value === this.internalValue;
-                    const isFocused = index === this.focusedIndex;
-                    const optionClasses = {
-                        'dropdown-option': true,
-                        'is-selected': isSelected,
-                        'is-focused': isFocused,
-                    };
-                    return (React.createElement("li", { class: optionClasses, role: "option", "aria-selected": isSelected ? 'true' : 'false', style: option.style, onClick: () => this.selectOption(option), onMouseEnter: () => this.handleOptionMouseEnter(index) },
-                        option.label,
-                        isSelected && (React.createElement("span", { class: "dropdown-option-check", "aria-hidden": "true" },
-                            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
-                                React.createElement("polyline", { points: "20 6 9 17 4 12" }))))));
-                })))));
-    }
-};
-__decorate([
-    Element()
-], KritzelDropdown.prototype, "el", void 0);
-__decorate([
-    Prop()
-], KritzelDropdown.prototype, "options", void 0);
-__decorate([
-    Watch('options')
-], KritzelDropdown.prototype, "optionsChanged", null);
-__decorate([
-    Prop()
-], KritzelDropdown.prototype, "value", void 0);
-__decorate([
-    Watch('value')
-], KritzelDropdown.prototype, "externalValueChanged", null);
-__decorate([
-    Prop()
-], KritzelDropdown.prototype, "width", void 0);
-__decorate([
-    Prop()
-], KritzelDropdown.prototype, "selectStyles", void 0);
-__decorate([
-    State()
-], KritzelDropdown.prototype, "internalValue", void 0);
-__decorate([
-    State()
-], KritzelDropdown.prototype, "hasSuffixContent", void 0);
-__decorate([
-    State()
-], KritzelDropdown.prototype, "hasPrefixContent", void 0);
-__decorate([
-    State()
-], KritzelDropdown.prototype, "isOpen", void 0);
-__decorate([
-    State()
-], KritzelDropdown.prototype, "focusedIndex", void 0);
-__decorate([
-    State()
-], KritzelDropdown.prototype, "openDirection", void 0);
-__decorate([
-    Event()
-], KritzelDropdown.prototype, "valueChanged", void 0);
-__decorate([
-    Listen('click', { target: 'document' })
-], KritzelDropdown.prototype, "handleDocumentClick", null);
-__decorate([
-    Listen('keydown', { target: 'document' })
-], KritzelDropdown.prototype, "handleDocumentKeydown", null);
-KritzelDropdown = __decorate([
-    Component({
-        tag: 'kritzel-dropdown',
-        styleUrl: 'kritzel-dropdown.css',
-        shadow: true,
-    })
-], KritzelDropdown);
-export { KritzelDropdown };

package/dist/kritzel-stencil/src/components/shared/kritzel-font-family/kritzel-font-family.js

@@ -1,60 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Host, Prop, Event } from '@stencil/core';
-let KritzelFontFamily = class KritzelFontFamily {
-    constructor() {
-        this.fontOptions = [
-            { value: 'arial', label: 'Arial' },
-            { value: 'verdana', label: 'Verdana' },
-            { value: 'helvetica', label: 'Helvetica' },
-            { value: 'tahoma', label: 'Tahoma' },
-            { value: 'trebuchet ms', label: 'Trebuchet MS' },
-            { value: 'times new roman', label: 'Times New Roman' },
-            { value: 'georgia', label: 'Georgia' },
-            { value: 'garamond', label: 'Garamond' },
-            { value: 'courier new', label: 'Courier New' },
-            { value: 'brush script mt', label: 'Brush Script MT' },
-        ];
-        this.handleDropdownValueChange = (event) => {
-            this.fontFamilyChange.emit(event.detail);
-        };
-    }
-    componentWillLoad() {
-        if (this.fontOptions && this.fontOptions.length > 0) {
-            const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);
-            if (!this.selectedFontFamily || !isValidCurrentFont) {
-                this.selectedFontFamily = this.fontOptions[0].value;
-            }
-        }
-    }
-    render() {
-        const dropdownOptions = this.fontOptions.map(option => ({
-            value: option.value,
-            label: option.label,
-            style: { fontFamily: option.value },
-        }));
-        return (React.createElement(Host, null,
-            React.createElement("kritzel-dropdown", { options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
-    }
-};
-__decorate([
-    Prop()
-], KritzelFontFamily.prototype, "fontOptions", void 0);
-__decorate([
-    Prop({ mutable: true })
-], KritzelFontFamily.prototype, "selectedFontFamily", void 0);
-__decorate([
-    Event()
-], KritzelFontFamily.prototype, "fontFamilyChange", void 0);
-KritzelFontFamily = __decorate([
-    Component({
-        tag: 'kritzel-font-family',
-        styleUrl: 'kritzel-font-family.css',
-        shadow: true,
-    })
-], KritzelFontFamily);
-export { KritzelFontFamily };

package/dist/kritzel-stencil/src/components/shared/kritzel-line-endings/kritzel-line-endings.js

@@ -1,105 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Host, Prop, Event } from '@stencil/core';
-let KritzelLineEndings = class KritzelLineEndings {
-    constructor() {
-        /** Available ending styles */
-        this.styles = ['none', 'triangle'];
-    }
-    getStartEnding() {
-        var _a, _b, _c;
-        if (!((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.enabled))
-            return 'none';
-        return (_c = this.value.start.style) !== null && _c !== void 0 ? _c : 'triangle';
-    }
-    getEndEnding() {
-        var _a, _b, _c;
-        if (!((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.end) === null || _b === void 0 ? void 0 : _b.enabled))
-            return 'none';
-        return (_c = this.value.end.style) !== null && _c !== void 0 ? _c : 'triangle';
-    }
-    handleStartChange(type) {
-        const newValue = Object.assign(Object.assign({}, this.value), { start: type === 'none'
-                ? { enabled: false }
-                : { enabled: true, style: type } });
-        this.value = newValue;
-        this.valueChange.emit(newValue);
-    }
-    handleEndChange(type) {
-        const newValue = Object.assign(Object.assign({}, this.value), { end: type === 'none'
-                ? { enabled: false }
-                : { enabled: true, style: type } });
-        this.value = newValue;
-        this.valueChange.emit(newValue);
-    }
-    getEndingPath(type) {
-        switch (type) {
-            case 'triangle':
-                return 'M 0 0 L 10 5 L 0 10 Z';
-            case 'open':
-                return 'M 0 0 L 10 5 L 0 10';
-            case 'diamond':
-                return 'M 0 5 L 5 0 L 10 5 L 5 10 Z';
-            case 'circle':
-                return 'M 10 5 A 5 5 0 1 1 0 5 A 5 5 0 1 1 10 5 Z';
-            default:
-                return '';
-        }
-    }
-    renderEndingIcon(type, isStart) {
-        const color = 'var(--kritzel-global-text-primary)';
-        if (type === 'none') {
-            return (React.createElement("svg", { viewBox: "0 0 24 12", class: "ending-icon" },
-                React.createElement("line", { x1: isStart ? 4 : 2, y1: "6", x2: isStart ? 22 : 20, y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" })));
-        }
-        const path = this.getEndingPath(type);
-        const isOpenStyle = type === 'open';
-        return (React.createElement("svg", { viewBox: "0 0 24 12", class: "ending-icon" }, isStart ? (
-        // Start arrow points left
-        React.createElement("g", null,
-            React.createElement("line", { x1: "12", y1: "6", x2: "22", y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" }),
-            React.createElement("g", { transform: "translate(2, 1) scale(1, 1)" },
-                React.createElement("path", { d: path, fill: isOpenStyle ? 'none' : color, stroke: color, "stroke-width": isOpenStyle ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round", transform: "scale(-1, 1) translate(-10, 0)" })))) : (
-        // End arrow points right
-        React.createElement("g", null,
-            React.createElement("line", { x1: "2", y1: "6", x2: "12", y2: "6", stroke: color, "stroke-width": "2", "stroke-linecap": "round" }),
-            React.createElement("g", { transform: "translate(12, 1)" },
-                React.createElement("path", { d: path, fill: isOpenStyle ? 'none' : color, stroke: color, "stroke-width": isOpenStyle ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
-    }
-    render() {
-        const startEnding = this.getStartEnding();
-        const endEnding = this.getEndEnding();
-        return (React.createElement(Host, null,
-            React.createElement("div", { class: "endings-section" },
-                React.createElement("div", { class: "endings-row" }, this.styles.map(type => (React.createElement("button", { class: {
-                        'ending-option': true,
-                        'selected': startEnding === type,
-                    }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))),
-            React.createElement("div", { class: "endings-section" },
-                React.createElement("div", { class: "endings-row" }, this.styles.map(type => (React.createElement("button", { class: {
-                        'ending-option': true,
-                        'selected': endEnding === type,
-                    }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
-    }
-};
-__decorate([
-    Prop()
-], KritzelLineEndings.prototype, "styles", void 0);
-__decorate([
-    Prop({ mutable: true })
-], KritzelLineEndings.prototype, "value", void 0);
-__decorate([
-    Event()
-], KritzelLineEndings.prototype, "valueChange", void 0);
-KritzelLineEndings = __decorate([
-    Component({
-        tag: 'kritzel-line-endings',
-        styleUrl: 'kritzel-line-endings.css',
-        shadow: true,
-    })
-], KritzelLineEndings);
-export { KritzelLineEndings };

package/dist/kritzel-stencil/src/components/shared/kritzel-shape-fill/kritzel-shape-fill.js

@@ -1,53 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Host, Prop, Event } from '@stencil/core';
-let KritzelShapeFill = class KritzelShapeFill {
-    constructor() {
-        /** Current fill type */
-        this.value = 'transparent';
-    }
-    handleFillChange(type) {
-        this.value = type;
-        this.valueChange.emit(type);
-    }
-    renderFillIcon(type) {
-        const strokeColor = 'var(--kritzel-global-text-primary)';
-        if (type === 'transparent') {
-            return (React.createElement("svg", { viewBox: "0 0 24 24", class: "fill-icon" },
-                React.createElement("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "none", stroke: strokeColor, "stroke-width": "2" })));
-        }
-        // Filled
-        return (React.createElement("svg", { viewBox: "0 0 24 24", class: "fill-icon" },
-            React.createElement("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
-    }
-    render() {
-        return (React.createElement(Host, null,
-            React.createElement("div", { class: "fill-row" },
-                React.createElement("button", { class: {
-                        'fill-option': true,
-                        'selected': this.value === 'transparent',
-                    }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')),
-                React.createElement("button", { class: {
-                        'fill-option': true,
-                        'selected': this.value === 'filled',
-                    }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
-    }
-};
-__decorate([
-    Prop({ mutable: true })
-], KritzelShapeFill.prototype, "value", void 0);
-__decorate([
-    Event()
-], KritzelShapeFill.prototype, "valueChange", void 0);
-KritzelShapeFill = __decorate([
-    Component({
-        tag: 'kritzel-shape-fill',
-        styleUrl: 'kritzel-shape-fill.css',
-        shadow: true,
-    })
-], KritzelShapeFill);
-export { KritzelShapeFill };