@blueprintui/cli 0.12.0 → 0.13.0

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprint/main/projects/components/dist/forms/mixins/form-control.mixin.js

@@ -0,0 +1,580 @@
+import { getFlattenedFocusableItems, toggleState } from '@blueprintui/components/internals';
+import { isObjectLiteral } from '../utils/utils.js';
+import { badInput, patternMismatch, rangeOverflow, rangeUnderflow, stepMismatch, tooLong, tooShort, typeMismatch, valueMissing } from '../utils/validity.js';
+export function FormControlMixin(SuperClass) {
+    return class Base extends SuperClass {
+        static { this.formAssociated = true; }
+        #value = '';
+        #customValidityMessage = '';
+        #selectionStart = null;
+        #selectionEnd = null;
+        #selectionDirection = 'none';
+        get defaultValue() {
+            return this.getAttribute('value') ?? '';
+        }
+        set defaultValue(value) {
+            this.setAttribute('value', value);
+        }
+        get name() {
+            return this.getAttribute('name') ?? '';
+        }
+        set name(value) {
+            this.setAttribute('name', value);
+            this.#requestUpdate();
+        }
+        get value() {
+            return this.#value;
+        }
+        set value(value) {
+            this.updateValue(value);
+            this.#requestUpdate();
+        }
+        get form() {
+            return this._internals.form;
+        }
+        get willValidate() {
+            return this._internals.willValidate;
+        }
+        get validity() {
+            return this._internals.validity;
+        }
+        get validationMessage() {
+            return this._internals.validationMessage;
+        }
+        get noValidate() {
+            const hasAttr = this.hasAttribute('novalidate');
+            const hasFormNoValidate = this._internals.form?.noValidate;
+            return !!(hasAttr || hasFormNoValidate);
+        }
+        set noValidate(value) {
+            this.toggleAttribute('novalidate', value);
+        }
+        get valueAsString() {
+            return this.#value?.toString() ?? '';
+        }
+        get valueAsNumber() {
+            return Number(this.#value);
+        }
+        set valueAsNumber(value) {
+            if (typeof value === 'number') {
+                this.updateValue(`${value}`);
+            }
+            else {
+                throw new Error('value must be of type number');
+            }
+        }
+        get valueAsDate() {
+            return new Date(this.#value);
+        }
+        get type() {
+            return this.getAttribute('type') ?? 'text';
+        }
+        set type(value) {
+            this.setAttribute('type', value);
+            this.#requestUpdate();
+        }
+        get required() {
+            return this.hasAttribute('required');
+        }
+        set required(value) {
+            this.toggleAttribute('required', value);
+            toggleState(this._internals, 'required', value);
+            this.#requestUpdate();
+        }
+        get disabled() {
+            return this.hasAttribute('disabled');
+        }
+        set disabled(value) {
+            this.toggleAttribute('disabled', value);
+            this._internals.ariaDisabled = value ? 'true' : 'false';
+            toggleState(this._internals, 'disabled', value);
+            this.#requestUpdate();
+        }
+        get readOnly() {
+            return this.hasAttribute('readonly');
+        }
+        set readOnly(value) {
+            this.toggleAttribute('readonly', value);
+            toggleState(this._internals, 'readonly', value);
+            this.#requestUpdate();
+        }
+        get min() {
+            return this.getAttribute('min') ? Number(this.getAttribute('min')) : null;
+        }
+        set min(value) {
+            this.setAttribute('min', value.toString());
+            toggleState(this._internals, 'min', value !== null);
+            this._internals.ariaValueMin = value !== undefined ? value.toString() : null;
+            this.#requestUpdate();
+        }
+        get max() {
+            return this.getAttribute('max') ? Number(this.getAttribute('max')) : null;
+        }
+        set max(value) {
+            this.setAttribute('max', value.toString());
+            toggleState(this._internals, 'max', value !== null);
+            this._internals.ariaValueMax = value !== undefined ? value.toString() : null;
+            this.#requestUpdate();
+        }
+        get pattern() {
+            return this.getAttribute('pattern') ?? '';
+        }
+        set pattern(value) {
+            this.setAttribute('pattern', value);
+            toggleState(this._internals, 'pattern', !!value);
+            this.#requestUpdate();
+        }
+        get placeholder() {
+            return this.getAttribute('placeholder') ?? '';
+        }
+        set placeholder(value) {
+            this.setAttribute('placeholder', value);
+            toggleState(this._internals, 'placeholder', !!value);
+            this.#requestUpdate();
+        }
+        get minLength() {
+            return this.hasAttribute('minlength') ? Number(this.getAttribute('minlength')) : -1;
+        }
+        set minLength(value) {
+            if (value === -1) {
+                this.removeAttribute('minlength');
+            }
+            else {
+                this.setAttribute('minlength', value.toString());
+            }
+            toggleState(this._internals, 'minlength', value !== -1);
+            this.#requestUpdate();
+        }
+        get maxLength() {
+            return this.hasAttribute('maxlength') ? Number(this.getAttribute('maxlength')) : -1;
+        }
+        set maxLength(value) {
+            if (value === -1) {
+                this.removeAttribute('maxlength');
+            }
+            else {
+                this.setAttribute('maxlength', value.toString());
+            }
+            toggleState(this._internals, 'maxlength', value !== -1);
+            this.#requestUpdate();
+        }
+        get step() {
+            return this.getAttribute('step') ? Number(this.getAttribute('step')) : null;
+        }
+        set step(value) {
+            this.setAttribute('step', value.toString());
+            toggleState(this._internals, 'step', value !== null);
+            this.#requestUpdate();
+        }
+        get multiple() {
+            return this.hasAttribute('multiple');
+        }
+        set multiple(value) {
+            this.toggleAttribute('multiple', value);
+            toggleState(this._internals, 'multiple', value);
+            this.#requestUpdate();
+        }
+        get autocomplete() {
+            return this.getAttribute('autocomplete') ?? '';
+        }
+        set autocomplete(value) {
+            this.setAttribute('autocomplete', value);
+            toggleState(this._internals, 'autocomplete', value === 'on');
+            this.#requestUpdate();
+        }
+        get size() {
+            return this.hasAttribute('size') ? Number(this.getAttribute('size')) : 20;
+        }
+        set size(value) {
+            if (value !== null && value > 0) {
+                this.setAttribute('size', value.toString());
+                toggleState(this._internals, 'size', true);
+            }
+            else {
+                this.removeAttribute('size');
+                toggleState(this._internals, 'size', false);
+            }
+            this.#requestUpdate();
+        }
+        get formNoValidate() {
+            return this.hasAttribute('formnovalidate');
+        }
+        set formNoValidate(value) {
+            this.toggleAttribute('formnovalidate', value);
+            toggleState(this._internals, 'formnovalidate', value);
+            this.#requestUpdate();
+        }
+        get formAction() {
+            const attr = this.getAttribute('formaction');
+            if (attr) {
+                return new URL(attr, window.location.href).href;
+            }
+            return '';
+        }
+        set formAction(value) {
+            this.setAttribute('formaction', value);
+            this.#requestUpdate();
+        }
+        get formMethod() {
+            return this.getAttribute('formmethod') ?? '';
+        }
+        set formMethod(value) {
+            this.setAttribute('formmethod', value);
+            this.#requestUpdate();
+        }
+        get formTarget() {
+            return this.getAttribute('formtarget') ?? '';
+        }
+        set formTarget(value) {
+            this.setAttribute('formtarget', value);
+            this.#requestUpdate();
+        }
+        get dirName() {
+            return this.getAttribute('dirname') ?? '';
+        }
+        set dirName(value) {
+            this.setAttribute('dirname', value);
+            this.#requestUpdate();
+        }
+        get list() {
+            const listId = this.getAttribute('list');
+            if (listId) {
+                return this.ownerDocument.getElementById(listId);
+            }
+            return null;
+        }
+        get selectionStart() {
+            return this.#selectionStart ?? this.#value?.length ?? 0;
+        }
+        set selectionStart(value) {
+            const max = this.#value?.length ?? 0;
+            this.#selectionStart = value !== null ? Math.min(Math.max(0, value), max) : null;
+        }
+        get selectionEnd() {
+            return this.#selectionEnd ?? this.#value?.length ?? 0;
+        }
+        set selectionEnd(value) {
+            const max = this.#value?.length ?? 0;
+            this.#selectionEnd = value !== null ? Math.min(Math.max(0, value), max) : null;
+        }
+        get selectionDirection() {
+            return this.#selectionDirection;
+        }
+        set selectionDirection(value) {
+            this.#selectionDirection = value;
+        }
+        get labels() {
+            return this._internals.labels;
+        }
+        get composedLabel() {
+            return Array.from(this._internals.labels)
+                .reduce((prev, label) => `${prev} ${label.textContent}`, '')
+                .trim();
+        }
+        static get observedAttributes() {
+            return super.observedAttributes.concat([
+                'name',
+                'value',
+                'type',
+                'disabled',
+                'readonly',
+                'novalidate',
+                'required',
+                'pattern',
+                'placeholder',
+                'minlength',
+                'maxlength',
+                'min',
+                'max',
+                'step',
+                'multiple',
+                'autocomplete',
+                'size',
+                'formnovalidate',
+                'formaction',
+                'formenctype',
+                'formmethod',
+                'formtarget',
+                'dirname',
+                'list'
+            ]);
+        }
+        constructor(...args) {
+            super(...args);
+            this._internals = this.attachInternals();
+        }
+        connectedCallback() {
+            if (super.connectedCallback) {
+                super.connectedCallback();
+            }
+            if (!this._internals.role) {
+                this._internals.role = 'presentation';
+            }
+            this._internals.states.add('bp-layer');
+            this.tabIndex = 0;
+            this.#updateFormState();
+            this.#updateValidityState();
+            // input events are composed, change events are not (https://github.com/whatwg/html/issues/5453)
+            this.shadowRoot?.addEventListener('input', e => e.stopPropagation());
+            this.shadowRoot?.addEventListener('change', e => e.stopPropagation());
+            this.form?.addEventListener('reset', () => this.reset());
+            this.addEventListener('focus', () => {
+                this._internals.states.add('focused');
+                this.#updateValidityState();
+            });
+            this.addEventListener('blur', () => {
+                this._internals.states.add('touched');
+                this._internals.states.delete('focused');
+                this.#updateValidityState();
+            });
+            this.addEventListener('input', () => {
+                this._internals.states.add('dirty');
+                this.#updateValidityState();
+            });
+            this.addEventListener('invalid', () => {
+                this._internals.states.add('user-invalid');
+            });
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (super.attributeChangedCallback) {
+                super.attributeChangedCallback(name, oldValue, newValue);
+            }
+            if (name === 'value' && newValue !== oldValue) {
+                this.updateValue(newValue);
+            }
+            if (name === 'disabled' && newValue !== oldValue) {
+                this.disabled = newValue !== null;
+            }
+            if (name === 'readonly' && newValue !== oldValue) {
+                this.readOnly = newValue !== null;
+            }
+            if (name === 'novalidate' && newValue !== oldValue) {
+                this.noValidate = newValue !== null;
+            }
+            if (name === 'required' && newValue !== oldValue) {
+                this.required = newValue !== null;
+            }
+            if (name === 'multiple' && newValue !== oldValue) {
+                this.multiple = newValue !== null;
+            }
+            if (name === 'size' && newValue !== oldValue) {
+                toggleState(this._internals, 'size', newValue !== null);
+            }
+        }
+        disconnectedCallback() {
+            if (super.disconnectedCallback) {
+                super.disconnectedCallback();
+            }
+        }
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+        formStateRestoreCallback(state, _reason) {
+            this.value = state;
+            this.checkValidity();
+        }
+        // https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/
+        formAssociatedCallback(_form) { }
+        formResetCallback() {
+            this.value = this.defaultValue;
+            this.checkValidity();
+        }
+        checkValidity() {
+            if (this.noValidate) {
+                this._internals.setValidity({});
+                return true;
+            }
+            else {
+                this.#updateValidityState();
+                return this._internals.checkValidity();
+            }
+        }
+        setValidity(validity, message) {
+            this._internals.setValidity(validity, message);
+        }
+        /**
+         * Sets a custom validity message for the element.
+         * If the message is non-empty, the element is considered invalid with customError.
+         * If the message is empty, the custom error is cleared.
+         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
+         */
+        setCustomValidity(message) {
+            this.#customValidityMessage = message;
+            this.#updateValidityState();
+        }
+        reportValidity() {
+            this.#updateValidityState();
+            return this._internals.reportValidity();
+        }
+        updateValue(value) {
+            this.#value = value;
+            this._internals.ariaValueNow = value !== undefined ? `${value}` : null;
+            this.#updateValidityState();
+            this.#updateFormState();
+        }
+        focus() {
+            super.focus();
+            if (this._internals.role === 'presentation') {
+                getFlattenedFocusableItems(this)[0]?.focus();
+            }
+        }
+        select() {
+            this.#selectionStart = 0;
+            this.#selectionEnd = this.#value?.length ?? 0;
+            this.#selectionDirection = 'none';
+        }
+        setSelectionRange(start, end, direction) {
+            const max = this.#value?.length ?? 0;
+            this.#selectionStart = Math.min(Math.max(0, start), max);
+            this.#selectionEnd = Math.min(Math.max(0, end), max);
+            this.#selectionDirection = direction ?? 'none';
+        }
+        setRangeText(replacement, start, end, selectMode = 'preserve') {
+            const value = this.#value ?? '';
+            const selStart = start ?? this.#selectionStart ?? 0;
+            const selEnd = end ?? this.#selectionEnd ?? value.length;
+            const before = value.substring(0, selStart);
+            const after = value.substring(selEnd);
+            const newValue = before + replacement + after;
+            this.updateValue(newValue);
+            switch (selectMode) {
+                case 'select':
+                    this.#selectionStart = selStart;
+                    this.#selectionEnd = selStart + replacement.length;
+                    break;
+                case 'start':
+                    this.#selectionStart = selStart;
+                    this.#selectionEnd = selStart;
+                    break;
+                case 'end':
+                    this.#selectionStart = selStart + replacement.length;
+                    this.#selectionEnd = selStart + replacement.length;
+                    break;
+                case 'preserve':
+                default:
+                    // Adjust selection based on the replacement
+                    const delta = replacement.length - (selEnd - selStart);
+                    if (this.#selectionEnd !== null) {
+                        this.#selectionEnd = Math.max(selStart, this.#selectionEnd + delta);
+                    }
+                    break;
+            }
+        }
+        reset() {
+            this.value = this.defaultValue;
+            this.#resetValidity();
+            this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+            this.dispatchEvent(new Event('reset', { bubbles: true, cancelable: true }));
+        }
+        /**
+         * @protected
+         */
+        _onChange(e, config) {
+            this.#setValue(e, config);
+            e?.preventDefault();
+            e?.stopPropagation();
+            if (!this.disabled) {
+                this.#updateValidityState();
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            }
+        }
+        /**
+         * @protected
+         */
+        _onInput(e, config) {
+            this.#setValue(e, config);
+            e?.preventDefault();
+            e?.stopPropagation();
+            if (!this.disabled) {
+                this.#updateValidityState();
+                this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true, data: e.data }));
+            }
+        }
+        #setValue(e, config = { valueType: 'string' }) {
+            this.value = config.valueType === 'number' ? e.target.valueAsNumber : e.target.value;
+        }
+        #requestUpdate() {
+            // base reactive components (Lit Reactive Element)
+            if (this.requestUpdate) {
+                this.requestUpdate();
+            }
+        }
+        #updateFormState() {
+            if (this.name) {
+                if (typeof this.value === 'number') {
+                    this._internals.setFormValue(`${this.value}`);
+                }
+                else if (isObjectLiteral(this.value)) {
+                    const formData = new FormData();
+                    Object.entries(this.value)
+                        .filter(([key]) => key !== 'value')
+                        .forEach(([key, value]) => formData.set(`${this.name}-${key}`, `${value}`));
+                    this._internals.setFormValue(formData);
+                }
+                else {
+                    this._internals.setFormValue(this.value);
+                }
+            }
+        }
+        #resetValidity() {
+            this._internals.states.delete('dirty');
+            this._internals.states.delete('focused');
+            this._internals.states.delete('touched');
+            this._internals.states.delete('valid');
+            this._internals.states.delete('invalid');
+            this._internals.states.delete('user-invalid');
+        }
+        #updateValidityState() {
+            if (!this.noValidate) {
+                const element = this;
+                if (this.#customValidityMessage) {
+                    this._internals.setValidity({ customError: true, valid: false }, this.#customValidityMessage);
+                }
+                else if (valueMissing(this)) {
+                    this._internals.setValidity({ valueMissing: true, valid: false }, 'value required');
+                }
+                else if (typeMismatch(element)) {
+                    this._internals.setValidity({ typeMismatch: true, valid: false }, 'type mismatch');
+                }
+                else if (patternMismatch(element)) {
+                    this._internals.setValidity({ patternMismatch: true, valid: false }, 'pattern mismatch');
+                }
+                else if (tooShort(element)) {
+                    this._internals.setValidity({ tooShort: true, valid: false }, 'value too short');
+                }
+                else if (tooLong(element)) {
+                    this._internals.setValidity({ tooLong: true, valid: false }, 'value too long');
+                }
+                else if (rangeUnderflow(element)) {
+                    this._internals.setValidity({ rangeUnderflow: true, valid: false }, 'value too low');
+                }
+                else if (rangeOverflow(element)) {
+                    this._internals.setValidity({ rangeOverflow: true, valid: false }, 'value too high');
+                }
+                else if (stepMismatch(element)) {
+                    this._internals.setValidity({ stepMismatch: true, valid: false }, 'step mismatch');
+                }
+                else if (badInput(element)) {
+                    this._internals.setValidity({ badInput: true, valid: false }, 'bad input');
+                }
+                else {
+                    this._internals.setValidity({ valid: true });
+                }
+                if (this.validity.valid) {
+                    this._internals.states.delete('user-invalid');
+                    this._internals.states.delete('invalid');
+                    this._internals.states.add('valid');
+                }
+                else {
+                    this._internals.states.delete('valid');
+                    this._internals.states.add('invalid');
+                    if (this._internals.states.has('touched')) {
+                        this._internals.states.add('user-invalid');
+                        this.dispatchEvent(new CustomEvent('user-invalid', { bubbles: true, composed: true }));
+                    }
+                }
+                this.requestUpdate();
+            }
+        }
+    };
+}

package/src/.rollup.cache/@blueprintui/components/Users/coryrylan/Repos/blueprint/blueprint/main/projects/components/dist/forms/mixins/radio.mixin.d.ts

@@ -0,0 +1,32 @@
+import { FormControlInstance, FormControlValue } from './form-control.mixin.js';
+interface FormControlRadioInstance extends FormControlInstance {
+    checked: boolean;
+    updateCheckedState(): void;
+}
+export interface RadioFormControlMixin {
+    new (...args: any[]): FormControlRadioInstance;
+    formAssociated: boolean;
+    readonly observedAttributes: string[];
+}
+type Constructor = new (...args: any[]) => HTMLElement & {
+    connectedCallback?(): void;
+    disconnectedCallback?(): void;
+    attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;
+    requestUpdate?(name?: string, oldValue?: unknown): void;
+} & {
+    observedAttributes?: string[];
+};
+/**
+ * Mixin that extends FormControlMixin with radio-specific functionality.
+ * Provides native HTMLInputElement[type=radio]-like behavior for custom radio components.
+ *
+ * Features:
+ * - checked: Get/set the checked state of the radio
+ * - value: Defaults to 'on' (native radio behavior)
+ * - type: Returns 'radio'
+ * - CSS state management for :state(checked)
+ * - Form value handling based on checked state
+ * - Radio group exclusivity (only one radio with same name can be checked)
+ */
+export declare function RadioFormControlMixin<TBase extends Constructor, T extends FormControlValue>(SuperClass: TBase): TBase & RadioFormControlMixin;
+export {};