kritzel-react 0.1.30 → 0.1.32

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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,312 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,53 @@
+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 };