@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-checkbox-select-ZEJ6WIQn.js

@@ -0,0 +1,221 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/components/checkbox-select/pk-checkbox-select.styles.ts
+var pkCheckboxSelectStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-sm);
+            line-height: var(--pk-line-height);
+        }
+
+        :host([disabled]) {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        .options {
+            display: flex;
+            flex-direction: column;
+            gap: var(--pk-checkbox-select-gap, 0);
+        }
+
+        .options--horizontal {
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--pk-checkbox-select-gap, 0);
+        }
+
+        ::slotted(pk-checkbox),
+        pk-checkbox {
+            display: block;
+        }
+
+        .options--horizontal pk-checkbox.all-option {
+            width: 100%;
+        }
+    }
+`;
+//#endregion
+//#region src/components/checkbox-select/pk-checkbox-select.ts
+var ALL_VALUE = "*";
+/** JSON array for Craft/Twig + docs HTML; property assignment still preferred in JS. */
+var optionsConverter = {
+	fromAttribute(value) {
+		if (!value) return [];
+		try {
+			const parsed = JSON.parse(value);
+			return Array.isArray(parsed) ? parsed.filter((item) => Boolean(item && typeof item === "object" && "value" in item)).map((item) => ({
+				label: String(item.label ?? item.value),
+				value: String(item.value)
+			})) : [];
+		} catch {
+			return [];
+		}
+	},
+	toAttribute(value) {
+		return JSON.stringify(value ?? []);
+	}
+};
+/** `*` for all-selected, otherwise a JSON string array. */
+var valueConverter = {
+	fromAttribute(value) {
+		if (value == null || value === "") return [];
+		if (value === "*") return "*";
+		try {
+			const parsed = JSON.parse(value);
+			if (parsed === "*") return "*";
+			return Array.isArray(parsed) ? parsed.map(String) : [];
+		} catch {
+			return [];
+		}
+	},
+	toAttribute(value) {
+		return value === "*" ? "*" : JSON.stringify(value ?? []);
+	}
+};
+var PkCheckboxSelect = class PkCheckboxSelect extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.options = [];
+		this.value = [];
+		this.showAllOption = false;
+		this.allLabel = "All";
+		this.disabled = false;
+		this.orientation = "vertical";
+		this.ariaLabel = null;
+		this.optionElements = [];
+		this.allOptionElement = null;
+		this.handleAllChange = (event) => {
+			event.stopPropagation();
+			this.value = event.detail.checked ? "*" : [];
+			this.dispatchValueChange();
+		};
+		this.handleItemChange = (optionValue, event) => {
+			event.stopPropagation();
+			if (this.isAllSelected) return;
+			const checked = event.detail.checked;
+			const current = this.selectedValues;
+			this.value = checked ? [...current, optionValue] : current.filter((value) => value !== optionValue);
+			this.dispatchValueChange();
+		};
+	}
+	static {
+		this.styles = pkCheckboxSelectStyles;
+	}
+	connectedCallback() {
+		if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+		super.connectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("options") || changed.has("showAllOption")) {
+			this.rebuildOptionElements();
+			return;
+		}
+		if (changed.has("value") || changed.has("disabled")) this.updateOptionStates();
+	}
+	firstUpdated() {
+		this.rebuildOptionElements();
+	}
+	focus(options) {
+		this.optionElements.find((element) => !element.disabled)?.focus(options);
+	}
+	get isAllSelected() {
+		return this.value === "*";
+	}
+	get selectedValues() {
+		if (this.isAllSelected) return this.options.map((option) => option.value);
+		return Array.isArray(this.value) ? this.value : [];
+	}
+	dispatchValueChange() {
+		const detailValue = this.isAllSelected ? "*" : [...this.selectedValues];
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { value: detailValue },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	rebuildOptionElements() {
+		const container = this.shadowRoot?.querySelector(".options");
+		if (!container) return;
+		for (const element of this.optionElements) element.remove();
+		this.optionElements = [];
+		this.allOptionElement = null;
+		if (this.showAllOption) {
+			const allCheckbox = document.createElement("pk-checkbox");
+			allCheckbox.classList.add("all-option");
+			allCheckbox.append(this.allLabel);
+			allCheckbox.addEventListener("pk-change", this.handleAllChange);
+			container.append(allCheckbox);
+			this.allOptionElement = allCheckbox;
+			this.optionElements.push(allCheckbox);
+		}
+		for (const option of this.options) {
+			const checkbox = document.createElement("pk-checkbox");
+			checkbox.checkboxValue = option.value;
+			checkbox.append(option.label);
+			checkbox.addEventListener("pk-change", (event) => {
+				this.handleItemChange(option.value, event);
+			});
+			container.append(checkbox);
+			this.optionElements.push(checkbox);
+		}
+		this.updateOptionStates();
+	}
+	updateOptionStates() {
+		if (this.allOptionElement) {
+			this.allOptionElement.checked = this.isAllSelected;
+			this.allOptionElement.disabled = this.disabled;
+		}
+		for (const option of this.options) {
+			const checkbox = this.optionElements.find((element) => element !== this.allOptionElement && element.checkboxValue === option.value);
+			if (!checkbox) continue;
+			checkbox.checked = this.isAllSelected || this.selectedValues.includes(option.value);
+			checkbox.disabled = this.disabled || this.isAllSelected;
+		}
+	}
+	render() {
+		return html`
+            <div
+                part="base"
+                class=${classMap({
+			options: true,
+			"options--horizontal": this.orientation === "horizontal"
+		})}
+            ></div>
+        `;
+	}
+};
+__decorate([property({
+	attribute: "options",
+	converter: optionsConverter
+})], PkCheckboxSelect.prototype, "options", void 0);
+__decorate([property({
+	attribute: "value",
+	converter: valueConverter
+})], PkCheckboxSelect.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-all-option"
+})], PkCheckboxSelect.prototype, "showAllOption", void 0);
+__decorate([property({ attribute: "all-label" })], PkCheckboxSelect.prototype, "allLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkCheckboxSelect.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], PkCheckboxSelect.prototype, "orientation", void 0);
+__decorate([property({ attribute: "aria-label" })], PkCheckboxSelect.prototype, "ariaLabel", void 0);
+__decorate([state()], PkCheckboxSelect.prototype, "optionElements", void 0);
+PkCheckboxSelect = __decorate([customElement("pk-checkbox-select")], PkCheckboxSelect);
+//#endregion
+export { PkCheckboxSelect as n, ALL_VALUE as t };
+
+//# sourceMappingURL=pk-checkbox-select-ZEJ6WIQn.js.map

package/dist/chunks/pk-checkbox-select-ZEJ6WIQn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-checkbox-select-ZEJ6WIQn.js","names":[],"sources":["../../src/components/checkbox-select/pk-checkbox-select.styles.ts","../../src/components/checkbox-select/pk-checkbox-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkCheckboxSelectStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-sm);\n            line-height: var(--pk-line-height);\n        }\n\n        :host([disabled]) {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        .options {\n            display: flex;\n            flex-direction: column;\n            gap: var(--pk-checkbox-select-gap, 0);\n        }\n\n        .options--horizontal {\n            flex-direction: row;\n            flex-wrap: wrap;\n            align-items: center;\n            gap: var(--pk-checkbox-select-gap, 0);\n        }\n\n        ::slotted(pk-checkbox),\n        pk-checkbox {\n            display: block;\n        }\n\n        .options--horizontal pk-checkbox.all-option {\n            width: 100%;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { ComplexAttributeConverter, PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\n// Side-effect import — option rows are created as `pk-checkbox` in the shadow tree.\nimport '../checkbox/pk-checkbox.js';\nimport type { PkCheckbox } from '../checkbox/pk-checkbox.js';\nimport { pkCheckboxSelectStyles } from './pk-checkbox-select.styles.js';\n\nexport const ALL_VALUE = '*' as const;\n\nexport type PkCheckboxSelectOption = {\n    label: string;\n    value: string;\n};\n\nexport type PkCheckboxSelectValue = typeof ALL_VALUE | string[];\n\nexport type PkCheckboxSelectOrientation = 'horizontal' | 'vertical';\n\n/** JSON array for Craft/Twig + docs HTML; property assignment still preferred in JS. */\nconst optionsConverter: ComplexAttributeConverter<PkCheckboxSelectOption[]> = {\n    fromAttribute(value) {\n        if (!value) {\n            return [];\n        }\n\n        try {\n            const parsed = JSON.parse(value);\n\n            return Array.isArray(parsed)\n                ? parsed\n                    .filter((item): item is PkCheckboxSelectOption => Boolean(item && typeof item === 'object' && 'value' in item))\n                    .map((item) => ({\n                        label: String((item as PkCheckboxSelectOption).label ?? (item as PkCheckboxSelectOption).value),\n                        value: String((item as PkCheckboxSelectOption).value),\n                    }))\n                : [];\n        } catch {\n            return [];\n        }\n    },\n    toAttribute(value) {\n        return JSON.stringify(value ?? []);\n    },\n};\n\n/** `*` for all-selected, otherwise a JSON string array. */\nconst valueConverter: ComplexAttributeConverter<PkCheckboxSelectValue> = {\n    fromAttribute(value) {\n        if (value == null || value === '') {\n            return [];\n        }\n\n        if (value === '*') {\n            return ALL_VALUE;\n        }\n\n        try {\n            const parsed = JSON.parse(value);\n\n            if (parsed === '*') {\n                return ALL_VALUE;\n            }\n\n            return Array.isArray(parsed) ? parsed.map(String) : [];\n        } catch {\n            return [];\n        }\n    },\n    toAttribute(value) {\n        return value === ALL_VALUE ? '*' : JSON.stringify(value ?? []);\n    },\n};\n\n/**\n * Multi-select checkbox group — options via the `options` property/attribute (not slotted\n * checkboxes). Wrap in `pk-field` for label/instructions (mirrors React `CheckboxSelect` + `FieldLayout`).\n *\n * @fires pk-change - `{ value: string[] | '*' }`\n *\n * @csspart base - Checkbox options container\n */\n@customElement('pk-checkbox-select')\nexport class PkCheckboxSelect extends PkElement {\n    static override styles = pkCheckboxSelectStyles;\n\n    @property({ attribute: 'options', converter: optionsConverter })\n    options: PkCheckboxSelectOption[] = [];\n\n    /** Selected values, or `*` when the All option is active. */\n    @property({ attribute: 'value', converter: valueConverter })\n    value: PkCheckboxSelectValue = [];\n    @property({ type: Boolean, attribute: 'show-all-option' })\n    showAllOption = false;\n\n    @property({ attribute: 'all-label' })\n    allLabel = 'All';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ reflect: true })\n    orientation: PkCheckboxSelectOrientation = 'vertical';\n\n    @property({ attribute: 'aria-label' })\n    ariaLabel: string | null = null;\n\n    @state()\n    private optionElements: PkCheckbox[] = [];\n\n    private allOptionElement: PkCheckbox | null = null;\n\n    override connectedCallback(): void {\n        if (!this.hasAttribute('role')) {\n            this.setAttribute('role', 'group');\n        }\n\n        super.connectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('options') || changed.has('showAllOption')) {\n            this.rebuildOptionElements();\n            return;\n        }\n\n        if (changed.has('value') || changed.has('disabled')) {\n            this.updateOptionStates();\n        }\n    }\n\n    override firstUpdated(): void {\n        this.rebuildOptionElements();\n    }\n\n    override focus(options?: FocusOptions): void {\n        const first = this.optionElements.find((element) => !element.disabled);\n\n        first?.focus(options);\n    }\n\n    private get isAllSelected(): boolean {\n        return this.value === ALL_VALUE;\n    }\n\n    private get selectedValues(): string[] {\n        if (this.isAllSelected) {\n            return this.options.map((option) => option.value);\n        }\n\n        return Array.isArray(this.value) ? this.value : [];\n    }\n\n    private dispatchValueChange(): void {\n        const detailValue = this.isAllSelected ? ALL_VALUE : [...this.selectedValues];\n\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value: detailValue },\n            bubbles: true,\n            composed: true,\n        }));\n\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    private handleAllChange = (event: CustomEvent<{ checked: boolean }>): void => {\n        event.stopPropagation();\n        this.value = event.detail.checked ? ALL_VALUE : [];\n        this.dispatchValueChange();\n    };\n\n    private handleItemChange = (optionValue: string, event: CustomEvent<{ checked: boolean }>): void => {\n        event.stopPropagation();\n\n        if (this.isAllSelected) {\n            return;\n        }\n\n        const checked = event.detail.checked;\n        const current = this.selectedValues;\n        this.value = checked\n            ? [...current, optionValue]\n            : current.filter((value) => value !== optionValue);\n\n        this.dispatchValueChange();\n    };\n\n    private rebuildOptionElements(): void {\n        const container = this.shadowRoot?.querySelector('.options');\n\n        if (!container) {\n            return;\n        }\n\n        for (const element of this.optionElements) {\n            element.remove();\n        }\n\n        this.optionElements = [];\n        this.allOptionElement = null;\n\n        if (this.showAllOption) {\n            const allCheckbox = document.createElement('pk-checkbox') as PkCheckbox;\n            allCheckbox.classList.add('all-option');\n            allCheckbox.append(this.allLabel);\n            allCheckbox.addEventListener('pk-change', this.handleAllChange as EventListener);\n\n            container.append(allCheckbox);\n            this.allOptionElement = allCheckbox;\n            this.optionElements.push(allCheckbox);\n        }\n\n        for (const option of this.options) {\n            const checkbox = document.createElement('pk-checkbox') as PkCheckbox;\n            checkbox.checkboxValue = option.value;\n            checkbox.append(option.label);\n            checkbox.addEventListener('pk-change', (event) => {\n                this.handleItemChange(option.value, event as CustomEvent<{ checked: boolean }>);\n            });\n\n            container.append(checkbox);\n            this.optionElements.push(checkbox);\n        }\n\n        this.updateOptionStates();\n    }\n\n    private updateOptionStates(): void {\n        if (this.allOptionElement) {\n            this.allOptionElement.checked = this.isAllSelected;\n            this.allOptionElement.disabled = this.disabled;\n        }\n\n        for (const option of this.options) {\n            const checkbox = this.optionElements.find(\n                (element) => element !== this.allOptionElement && element.checkboxValue === option.value,\n            );\n\n            if (!checkbox) {\n                continue;\n            }\n\n            checkbox.checked = this.isAllSelected || this.selectedValues.includes(option.value);\n            checkbox.disabled = this.disabled || this.isAllSelected;\n        }\n    }\n\n    override render() {\n        return html`\n            <div\n                part=\"base\"\n                class=${classMap({\n                    options: true,\n                    'options--horizontal': this.orientation === 'horizontal',\n                })}\n            ></div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-checkbox-select': PkCheckboxSelect;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/pk-clear--mPWZP7H.js

@@ -0,0 +1,15 @@
+//#region src/events/pk-clear.ts
+/** Fired when a form control's value is cleared — mirrors  `pk-clear`. */
+var PkClearEvent = class extends Event {
+	constructor() {
+		super("pk-clear", {
+			bubbles: true,
+			cancelable: false,
+			composed: true
+		});
+	}
+};
+//#endregion
+export { PkClearEvent as t };
+
+//# sourceMappingURL=pk-clear--mPWZP7H.js.map

package/dist/chunks/pk-clear--mPWZP7H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-clear--mPWZP7H.js","names":[],"sources":["../../src/events/pk-clear.ts"],"sourcesContent":["/** Fired when a form control's value is cleared — mirrors  `pk-clear`. */\nexport class PkClearEvent extends Event {\n    constructor() {\n        super('pk-clear', { bubbles: true, cancelable: false, composed: true });\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'pk-clear': PkClearEvent;\n    }\n}\n"],"mappings":";;AACA,IAAa,eAAb,cAAkC,MAAM;CACpC,cAAc;AACV,QAAM,YAAY;GAAE,SAAS;GAAM,YAAY;GAAO,UAAU;GAAM,CAAC"}

package/dist/chunks/pk-code-editor-DSG6AwLV.js

@@ -0,0 +1,213 @@
+import { t as __decorate } from "./decorate-W02hmVTt.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-DmZKgNPL.js";
+import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
+import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
+import { css, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { CodeMirrorHost, computeCodeEditorMinHeight } from "@verbb/plugin-kit-codemirror-core";
+//#region src/components/code-editor/pk-code-editor.styles.ts
+var pkCodeEditorStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            width: 100%;
+            font-family: var(--pk-font-family);
+        }
+
+        .shell {
+            overflow: hidden;
+            border: 1px solid rgba(96, 125, 159, 0.4);
+            border-radius: var(--pk-radius-sm);
+            background: #ffffff;
+        }
+
+        .shell:focus-within {
+            border-color: var(--pk-color-sky-600);
+            box-shadow:
+                0 0 0 1px var(--pk-color-sky-600),
+                0 0 4px 0 color-mix(in srgb, var(--pk-color-sky-600) 70%, transparent);
+        }
+
+        :host([invalid]) .shell,
+        :host(:state(user-invalid)) .shell {
+            border-color: var(--pk-color-rose-600);
+        }
+
+        :host([invalid]) .shell:focus-within,
+        :host(:state(user-invalid)) .shell:focus-within {
+            border-color: var(--pk-color-rose-600);
+            box-shadow:
+                0 0 0 1px var(--pk-color-rose-600),
+                0 0 4px 0 color-mix(in srgb, var(--pk-color-rose-600) 70%, transparent);
+        }
+
+        :host([disabled]),
+        :host([readonly]) {
+            opacity: 0.7;
+        }
+
+        .editor-mount {
+            min-height: var(--pk-code-editor-min-height, 12rem);
+        }
+
+        .editor-mount .cm-editor {
+            min-height: inherit;
+        }
+
+        .mirror-input {
+            display: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/code-editor/pk-code-editor.ts
+var PkCodeEditor = class PkCodeEditor extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["blur", "input"];
+		this.host = new CodeMirrorHost();
+		this.hasInitializedEditor = false;
+		this._value = null;
+		this.language = "html";
+		this.tabSize = 4;
+		this.lineNumbers = true;
+		this.rows = 12;
+		this.readonly = false;
+		this.invalid = false;
+		this.defaultValue = "";
+	}
+	static {
+		this.styles = [formControlStyles, pkCodeEditorStyles];
+	}
+	static get validators() {
+		return [...super.validators, MirrorValidator()];
+	}
+	get value() {
+		if (this.valueHasChanged) return this._value ?? "";
+		return this._value ?? this.defaultValue ?? "";
+	}
+	set value(val) {
+		const next = val ?? "";
+		if (this._value === next) return;
+		this.valueHasChanged = true;
+		this._value = next;
+	}
+	get editorView() {
+		return this.host.view;
+	}
+	syncFormValue() {
+		this.setValue(this.value || "");
+		if (this.input) this.input.value = this.value || "";
+	}
+	resetToDefaultValue() {
+		this.valueHasChanged = false;
+		this._value = null;
+		this.syncEditorContent();
+	}
+	restoreFormState(state) {
+		if (typeof state === "string") {
+			this.value = state;
+			this.syncEditorContent();
+		}
+	}
+	disconnectedCallback() {
+		this.host.destroy();
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("value") && !changed.has("defaultValue") || changed.has("defaultValue") && !this.valueHasChanged) this.syncEditorContent();
+		if (changed.has("disabled") || changed.has("readonly")) this.host.setEditable(!this.disabled && !this.readonly);
+		if (this.hasInitializedEditor && (changed.has("language") || changed.has("tabSize") || changed.has("lineNumbers") || changed.has("rows"))) this.remountEditor();
+		super.updated(changed);
+	}
+	firstUpdated() {
+		this.style.setProperty("--pk-code-editor-min-height", computeCodeEditorMinHeight(this.rows));
+		this.mountEditor();
+		this.hasInitializedEditor = true;
+		this.syncFormValue();
+	}
+	mountEditor() {
+		this.host.mount({
+			parent: this.editorMount,
+			value: this.value,
+			language: this.language,
+			tabSize: this.tabSize,
+			lineNumbers: this.lineNumbers,
+			rows: this.rows,
+			editable: !this.disabled && !this.readonly,
+			onUpdate: (nextValue) => {
+				this.value = nextValue;
+				if (this.input) this.input.value = nextValue;
+				this.syncFormValue();
+				this.emitValueChange(nextValue);
+			},
+			onBlur: () => {
+				this.dispatchEvent(new Event("blur", {
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+	}
+	remountEditor() {
+		this.host.destroy();
+		this.style.setProperty("--pk-code-editor-min-height", computeCodeEditorMinHeight(this.rows));
+		this.mountEditor();
+	}
+	syncEditorContent() {
+		this.host.setValue(this.value);
+	}
+	emitValueChange(value) {
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { value },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+            <div class="shell" part="shell">
+                <div class="editor-mount" part="editor"></div>
+                <input class="mirror-input" type="text" .value=${this.value} readonly tabindex="-1" aria-hidden="true" />
+            </div>
+        `;
+	}
+};
+__decorate([query(".editor-mount")], PkCodeEditor.prototype, "editorMount", void 0);
+__decorate([query(".mirror-input")], PkCodeEditor.prototype, "input", void 0);
+__decorate([property()], PkCodeEditor.prototype, "language", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "tab-size"
+})], PkCodeEditor.prototype, "tabSize", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "line-numbers"
+})], PkCodeEditor.prototype, "lineNumbers", void 0);
+__decorate([property({ type: Number })], PkCodeEditor.prototype, "rows", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkCodeEditor.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkCodeEditor.prototype, "invalid", void 0);
+__decorate([state()], PkCodeEditor.prototype, "value", null);
+__decorate([property({
+	attribute: "value",
+	reflect: true
+})], PkCodeEditor.prototype, "defaultValue", void 0);
+PkCodeEditor = __decorate([customElement("pk-code-editor")], PkCodeEditor);
+//#endregion
+export { PkCodeEditor as t };
+
+//# sourceMappingURL=pk-code-editor-DSG6AwLV.js.map

package/dist/chunks/pk-code-editor-DSG6AwLV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-code-editor-DSG6AwLV.js","names":[],"sources":["../../src/components/code-editor/pk-code-editor.styles.ts","../../src/components/code-editor/pk-code-editor.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkCodeEditorStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\n            font-family: var(--pk-font-family);\n        }\n\n        .shell {\n            overflow: hidden;\n            border: 1px solid rgba(96, 125, 159, 0.4);\n            border-radius: var(--pk-radius-sm);\n            background: #ffffff;\n        }\n\n        .shell:focus-within {\n            border-color: var(--pk-color-sky-600);\n            box-shadow:\n                0 0 0 1px var(--pk-color-sky-600),\n                0 0 4px 0 color-mix(in srgb, var(--pk-color-sky-600) 70%, transparent);\n        }\n\n        :host([invalid]) .shell,\n        :host(:state(user-invalid)) .shell {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([invalid]) .shell:focus-within,\n        :host(:state(user-invalid)) .shell:focus-within {\n            border-color: var(--pk-color-rose-600);\n            box-shadow:\n                0 0 0 1px var(--pk-color-rose-600),\n                0 0 4px 0 color-mix(in srgb, var(--pk-color-rose-600) 70%, transparent);\n        }\n\n        :host([disabled]),\n        :host([readonly]) {\n            opacity: 0.7;\n        }\n\n        .editor-mount {\n            min-height: var(--pk-code-editor-min-height, 12rem);\n        }\n\n        .editor-mount .cm-editor {\n            min-height: inherit;\n        }\n\n        .mirror-input {\n            display: none;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type { PropertyValues } from 'lit';\nimport {\n    CodeMirrorHost,\n    computeCodeEditorMinHeight,\n    type CodeEditorLanguage,\n} from '@verbb/plugin-kit-codemirror-core';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { MirrorValidator } from '../../validators/index.js';\nimport { pkCodeEditorStyles } from './pk-code-editor.styles.js';\n\n@customElement('pk-code-editor')\nexport class PkCodeEditor extends PkFormAssociatedElement {\n    static override styles = [formControlStyles, pkCodeEditorStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    @query('.editor-mount')\n    private editorMount!: HTMLDivElement;\n\n    @query('.mirror-input')\n    override input!: HTMLInputElement;\n\n    private readonly host = new CodeMirrorHost();\n\n    private hasInitializedEditor = false;\n\n    private _value: string | null = null;\n\n    @property()\n    language: CodeEditorLanguage = 'html';\n\n    @property({ type: Number, attribute: 'tab-size' })\n    tabSize = 4;\n\n    @property({ type: Boolean, attribute: 'line-numbers' })\n    lineNumbers = true;\n\n    @property({ type: Number })\n    rows = 12;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    get value(): string {\n        if (this.valueHasChanged) {\n            return this._value ?? '';\n        }\n\n        return this._value ?? this.defaultValue ?? '';\n    }\n\n    @state()\n    set value(val: string | null) {\n        const next = val ?? '';\n\n        if (this._value === next) {\n            return;\n        }\n\n        this.valueHasChanged = true;\n        this._value = next;\n    }\n\n    @property({ attribute: 'value', reflect: true })\n    defaultValue: string | null = '';\n\n    get editorView() {\n        return this.host.view;\n    }\n\n    protected override syncFormValue(): void {\n        this.setValue(this.value || '');\n\n        if (this.input) {\n            this.input.value = this.value || '';\n        }\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n        this.syncEditorContent();\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n            this.syncEditorContent();\n        }\n    }\n\n    override disconnectedCallback(): void {\n        this.host.destroy();\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if ((changed.has('value') && !changed.has('defaultValue')) || (changed.has('defaultValue') && !this.valueHasChanged)) {\n            this.syncEditorContent();\n        }\n\n        if (changed.has('disabled') || changed.has('readonly')) {\n            this.host.setEditable(!this.disabled && !this.readonly);\n        }\n\n        if (\n            this.hasInitializedEditor\n            && (changed.has('language') || changed.has('tabSize') || changed.has('lineNumbers') || changed.has('rows'))\n        ) {\n            this.remountEditor();\n        }\n\n        super.updated(changed);\n    }\n\n    override firstUpdated(): void {\n        this.style.setProperty('--pk-code-editor-min-height', computeCodeEditorMinHeight(this.rows));\n        this.mountEditor();\n        this.hasInitializedEditor = true;\n        this.syncFormValue();\n    }\n\n    private mountEditor(): void {\n        this.host.mount({\n            parent: this.editorMount,\n            value: this.value,\n            language: this.language,\n            tabSize: this.tabSize,\n            lineNumbers: this.lineNumbers,\n            rows: this.rows,\n            editable: !this.disabled && !this.readonly,\n            onUpdate: (nextValue) => {\n                this.value = nextValue;\n\n                if (this.input) {\n                    this.input.value = nextValue;\n                }\n\n                this.syncFormValue();\n                this.emitValueChange(nextValue);\n            },\n            onBlur: () => {\n                this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));\n            },\n        });\n    }\n\n    private remountEditor(): void {\n        this.host.destroy();\n        this.style.setProperty('--pk-code-editor-min-height', computeCodeEditorMinHeight(this.rows));\n        this.mountEditor();\n    }\n\n    private syncEditorContent(): void {\n        this.host.setValue(this.value);\n    }\n\n    private emitValueChange(value: string): void {\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value },\n            bubbles: true,\n            composed: true,\n        }));\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    override render() {\n        return html`\n            <div class=\"shell\" part=\"shell\">\n                <div class=\"editor-mount\" part=\"editor\"></div>\n                <input class=\"mirror-input\" type=\"text\" .value=${this.value} readonly tabindex=\"-1\" aria-hidden=\"true\" />\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-code-editor': PkCodeEditor;\n    }\n}\n"],"mappings":"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"}