@breadstone/mosaik-elements-foundation 0.0.268 → 0.0.270

package/Controls/Components/Inputs/FileBox/FileBoxElement.js

@@ -0,0 +1,577 @@
+// #region Imports
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
+import { DomServiceLocator } from '../../../../Dom/Dom';
+import { Emit } from '../../../../events/Decorators/EmitDecorator';
+import { Appearanceable } from '../../../Behaviors/Appearanceable';
+import { Clearable } from '../../../Behaviors/Clearable';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Invalidable } from '../../../Behaviors/Invalidable';
+import { Labelable } from '../../../Behaviors/Labelable';
+import { Slottable } from '../../../Behaviors/Slottable';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { Valueable } from '../../../Behaviors/Valueable';
+import { Variantable } from '../../../Behaviors/Variantable';
+import { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { ButtonElement } from '../../Buttons/Button/ButtonElement';
+import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
+import { InputBaseElement } from '../Abstracts/InputBase';
+import { fileBoxElementTemplate } from './FileBoxElementTemplate';
+import { fileBoxElementCosmopolitanStyle } from './Themes/FileBoxElement.Cosmopolitan';
+import { fileBoxElementJoyStyle } from './Themes/FileBoxElement.Joy';
+import { fileBoxElementMemphisStyle } from './Themes/FileBoxElement.Memphis';
+// #endregion
+/**
+ * File Box - A text-box-styled file input control with a trailing browse button.
+ *
+ * @description
+ * The File Box component provides a familiar text-box appearance for file selection.
+ * It displays the selected file name(s) in a readonly text input and offers a trailing
+ * browse button to open the native file picker dialog. Supports single and multiple file
+ * selection, directory selection, file type filtering via accept attribute, clearable state,
+ * and form integration through value accessors. Bridges the gap between the primitive
+ * FilePicker and the complex FileUpload component.
+ *
+ * @name File Box
+ * @element mosaik-filebox
+ * @category Inputs
+ *
+ * @slot prefix - Content placed before the input field.
+ * @slot suffix - Content placed after the input field.
+ *
+ * @csspart browse - The browse button.
+ * @csspart clear - The clear button.
+ * @csspart fileInput - The fileInput part.
+ * @csspart focusRing - The focus ring indicator.
+ * @csspart inner - The inner container wrapper.
+ * @csspart input - The readonly text input showing file names.
+ * @csspart label - The floating label element.
+ * @csspart prefix - The prefix content container.
+ * @csspart suffix - The suffix content container.
+ *
+ * @cssprop {String} --file-box-background-color - The box background color CSS custom property.
+ * @cssprop {String} --file-box-border-color - The box border color CSS custom property.
+ * @cssprop {String} --file-box-border-radius - The box border radius CSS custom property.
+ * @cssprop {String} --file-box-border-style - The box border style CSS custom property.
+ * @cssprop {String} --file-box-border-width - The box border width CSS custom property.
+ * @cssprop {String} --file-box-focus-ring-width - The box focus ring width CSS custom property.
+ * @cssprop {String} --file-box-font-family - The box font family CSS custom property.
+ * @cssprop {String} --file-box-font-letter-spacing - The box font letter spacing CSS custom property.
+ * @cssprop {String} --file-box-font-line-height - The box font line height CSS custom property.
+ * @cssprop {String} --file-box-font-size - The box font size CSS custom property.
+ * @cssprop {String} --file-box-font-text-decoration - The box font text decoration CSS custom property.
+ * @cssprop {String} --file-box-font-text-transform - The box font text transform CSS custom property.
+ * @cssprop {String} --file-box-font-weight - The box font weight CSS custom property.
+ * @cssprop {String} --file-box-foreground-color - The box foreground color CSS custom property.
+ * @cssprop {String} --file-box-gap - The box gap CSS custom property.
+ * @cssprop {String} --file-box-height - The box height CSS custom property.
+ * @cssprop {String} --file-box-padding-bottom - The box padding bottom CSS custom property.
+ * @cssprop {String} --file-box-padding-left - The box padding left CSS custom property.
+ * @cssprop {String} --file-box-padding-right - The box padding right CSS custom property.
+ * @cssprop {String} --file-box-padding-top - The box padding top CSS custom property.
+ * @cssprop {String} --file-box-shadow - The box shadow CSS custom property.
+ * @cssprop {String} --file-box-shadow-blur - The box shadow blur CSS custom property.
+ * @cssprop {String} --file-box-shadow-color - The box shadow color CSS custom property.
+ * @cssprop {String} --file-box-shadow-offset-x - The box shadow offset x CSS custom property.
+ * @cssprop {String} --file-box-shadow-offset-y - The box shadow offset y CSS custom property.
+ * @cssprop {String} --file-box-shadow-spread - The box shadow spread CSS custom property.
+ * @cssprop {String} --file-box-transition-duration - The box transition duration CSS custom property.
+ * @cssprop {String} --file-box-transition-mode - The box transition mode CSS custom property.
+ * @cssprop {String} --file-box-transition-property - The box transition property CSS custom property.
+ * @cssprop {String} --file-box-translate - The box translate CSS custom property.
+ *
+ * @fires cleared {ClearedEvent} - Fired when the file selection is cleared.
+ * @fires filesSelected {FilesSelectedEvent} - Fired when files are selected.
+ *
+ * @dependency mosaik-button - Used for the browse button.
+ * @dependency mosaik-focus-ring - Used for focus indication.
+ *
+ * @example
+ * ```html
+ * <mosaik-filebox
+ *   placeholder="Choose a file..."
+ *   accept=".pdf,.doc,.docx">
+ * </mosaik-filebox>
+ * ```
+ *
+ * @public
+ */
+let FileBoxElement = class FileBoxElement extends Themeable(Slottable(Clearable(Disableable(Invalidable(Valueable(Variantable(Labelable(Appearanceable(InputBaseElement))))))))) {
+    // #region Fields
+    _filesSelected;
+    _fileInputElement;
+    _value;
+    _readonly;
+    _required;
+    _autofocus;
+    _name;
+    _placeholder;
+    _multiple;
+    _accept;
+    _directory;
+    _files;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._value = '';
+        this._readonly = false;
+        this._required = false;
+        this._autofocus = false;
+        this._name = '';
+        this._placeholder = '';
+        this._multiple = false;
+        this._accept = [];
+        this._directory = false;
+        this._files = [];
+        this._filesSelected = new HTMLElementEventEmitter(this, 'filesSelected');
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `is` property.
+     * The `is` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is() {
+        return 'mosaik-filebox';
+    }
+    /**
+     * Gets or sets the `value` property.
+     * The value represents the display text of the selected file(s).
+     *
+     * @public
+     * @override
+     */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this.requestUpdate('value');
+        }
+    }
+    /**
+     * Gets or sets the `readonly` property.
+     *
+     * @public
+     * @attr
+     */
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        if (this._readonly !== value) {
+            this._readonly = value;
+            this.requestUpdate('readonly');
+        }
+    }
+    /**
+     * Gets or sets the `required` property.
+     *
+     * @public
+     * @attr
+     */
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        if (this._required !== value) {
+            this._required = value;
+            this.requestUpdate('required');
+        }
+    }
+    /**
+     * Gets or sets the `autofocus` property.
+     *
+     * @public
+     * @override
+     */
+    get autofocus() {
+        return this._autofocus;
+    }
+    set autofocus(value) {
+        if (this._autofocus !== value) {
+            this._autofocus = value;
+            this.requestUpdate('autofocus');
+        }
+    }
+    /**
+     * Gets or sets the `name` property.
+     *
+     * @public
+     * @attr
+     */
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        if (this._name !== value) {
+            this._name = value;
+            this.requestUpdate('name');
+        }
+    }
+    /**
+     * Gets or sets the `placeholder` property.
+     *
+     * @public
+     * @attr
+     */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        if (this._placeholder !== value) {
+            this._placeholder = value;
+            this.requestUpdate('placeholder');
+        }
+    }
+    /**
+     * Gets or sets the `multiple` property.
+     * When true, allows selecting multiple files.
+     *
+     * @public
+     * @attr
+     */
+    get multiple() {
+        return this._multiple;
+    }
+    set multiple(value) {
+        if (this._multiple !== value) {
+            this._multiple = value;
+            this.requestUpdate('multiple');
+        }
+    }
+    /**
+     * Gets or sets the `accept` property.
+     * Specifies the file types that the file input should accept.
+     *
+     * @public
+     * @attr
+     */
+    get accept() {
+        return this._accept;
+    }
+    set accept(value) {
+        if (this._accept !== value) {
+            this._accept = value;
+            this.requestUpdate('accept');
+        }
+    }
+    /**
+     * Gets or sets the `directory` property.
+     * When true, allows selecting directories instead of files.
+     *
+     * @public
+     * @attr
+     */
+    get directory() {
+        return this._directory;
+    }
+    set directory(value) {
+        if (this._directory !== value) {
+            this._directory = value;
+            this.requestUpdate('directory');
+        }
+    }
+    /**
+     * Gets or sets the selected files.
+     *
+     * @public
+     * @readonly
+     */
+    get files() {
+        return this._files;
+    }
+    set files(value) {
+        if (this._files !== value) {
+            this._files = value;
+            this.requestUpdate('files');
+        }
+    }
+    /**
+     * Determines whether the element has a prefix or not.
+     *
+     * @private
+     * @readonly
+     * @attr
+     */
+    get hasPrefix() {
+        return this.hasSlotContent('prefix');
+    }
+    /**
+     * Determines whether the element has a suffix or not.
+     *
+     * @private
+     * @readonly
+     * @attr
+     */
+    get hasSuffix() {
+        return this.hasSlotContent('suffix');
+    }
+    /**
+     * Called when files are selected.
+     * Provides reference to `IFilesSelectedEventDetail` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get filesSelected() {
+        return this._filesSelected;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    focus() {
+        if (this.shadowRoot) {
+            DomServiceLocator.current.findDescendant(this.shadowRoot, 'input')?.focus();
+        }
+    }
+    /**
+     * @public
+     * @override
+     */
+    blur() {
+        if (this.shadowRoot) {
+            DomServiceLocator.current.findDescendant(this.shadowRoot, 'input')?.blur();
+        }
+    }
+    /**
+     * Opens the native file picker dialog.
+     *
+     * @public
+     */
+    browse() {
+        if (!this.disabled && !this.readonly) {
+            this._fileInputElement.click();
+        }
+    }
+    /**
+     * Clears the selected files and value.
+     *
+     * @public
+     * @override
+     */
+    clear(force) {
+        const isCleared = super.clear(force);
+        if (isCleared) {
+            this._files = [];
+            this._fileInputElement.value = '';
+            this.emit('change', {
+                bubbles: true,
+                composed: true
+            });
+        }
+        return isCleared;
+    }
+    /**
+     * Resets the value, all kinds of validation and errors.
+     *
+     * @public
+     * @override
+     */
+    reset() {
+        super.reset();
+        this.clear();
+        this.invalid = false;
+    }
+    /**
+     * Checks the validity of the element.
+     *
+     * @public
+     * @override
+     */
+    checkValidity() {
+        if (this.required && this._files.length === 0) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Handles file input change events.
+     *
+     * @public
+     */
+    onFileChange(event) {
+        const input = event.target;
+        const fileList = input.files;
+        if (fileList && fileList.length > 0) {
+            const selectedFiles = Array.from(fileList);
+            this._files = selectedFiles;
+            this.value = selectedFiles.map((file) => file.name).join(', ');
+            this.onFilesSelected({ files: selectedFiles });
+            this.emit('change', {
+                bubbles: true,
+                composed: true
+            });
+        }
+        // Reset file input to allow re-selecting the same file
+        input.value = '';
+    }
+    /**
+     * @template
+     * @protected
+     * @override
+     */
+    onFocus(event) {
+        super.onFocus(event);
+        this.emit('focus', { detail: event });
+    }
+    /**
+     * @template
+     * @protected
+     * @override
+     */
+    onBlur(event) {
+        super.onBlur(event);
+        this.emit('blur', { detail: event });
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        super.onApplyTemplate();
+        this._fileInputElement = this.getTemplatePart('fileInput');
+    }
+    /**
+     * Emits the `filesSelected` event.
+     *
+     * @protected
+     */
+    onFilesSelected(args) {
+        this._filesSelected.emit(args);
+    }
+};
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], FileBoxElement.prototype, "value", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], FileBoxElement.prototype, "readonly", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], FileBoxElement.prototype, "required", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], FileBoxElement.prototype, "autofocus", null);
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], FileBoxElement.prototype, "name", null);
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], FileBoxElement.prototype, "placeholder", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], FileBoxElement.prototype, "multiple", null);
+__decorate([
+    Property({ type: Array }),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], FileBoxElement.prototype, "accept", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], FileBoxElement.prototype, "directory", null);
+__decorate([
+    Property({ type: Array }),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], FileBoxElement.prototype, "files", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FileBoxElement.prototype, "hasPrefix", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FileBoxElement.prototype, "hasSuffix", null);
+__decorate([
+    Emit({ eventName: 'filesSelected' }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], FileBoxElement.prototype, "filesSelected", null);
+FileBoxElement = __decorate([
+    Component({
+        selector: 'mosaik-filebox',
+        template: fileBoxElementTemplate,
+        themes: {
+            joy: fileBoxElementJoyStyle,
+            memphis: fileBoxElementMemphisStyle,
+            cosmopolitan: fileBoxElementCosmopolitanStyle
+        },
+        host: {
+            tabIndex: '0'
+        },
+        options: {
+            mode: 'open',
+            delegatesFocus: true
+        },
+        imports: [
+            FocusRingElement,
+            ButtonElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], FileBoxElement);
+export { FileBoxElement };
+//# sourceMappingURL=FileBoxElement.js.map

package/Controls/Components/Inputs/FileBox/FileBoxElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileBoxElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/FileBox/FileBoxElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Inputs/FileBox/FileBoxElementTemplate.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../../../Dom/Html';
+import type { FileBoxElement } from './FileBoxElement';
+/**
+ * The template of the `FileBoxElement`.
+ *
+ * @public
+ */
+export declare function fileBoxElementTemplate<T extends FileBoxElement>(e: T): TemplateResult;
+//# sourceMappingURL=FileBoxElementTemplate.d.ts.map

package/Controls/Components/Inputs/FileBox/FileBoxElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileBoxElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/FileBox/FileBoxElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,sBAAsB,CAAC;AAQjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAgErF"}

package/Controls/Components/Inputs/FileBox/FileBoxElementTemplate.js

@@ -0,0 +1,80 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { Icons } from '../../../../Resources/Icons';
+import { classMap, when } from '../../../Directives/Directives';
+import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
+import { Appearance } from '../../../Types/Appearance';
+import { Size } from '../../../Types/Size';
+import { Variant } from '../../../Types/Variant';
+// #endregion
+/**
+ * The template of the `FileBoxElement`.
+ *
+ * @public
+ */
+export function fileBoxElementTemplate(e) {
+    return html `
+        ${when(!e.disabled, () => html `
+        <mosaik-focus-ring part="focusRing"
+                           .variant="${e.invalid ? Variant.Danger : e.variant}"
+                           .visible="${e.isFocused}"
+                           .controlled="${'manual'}"
+                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
+        `)}
+        <div part="prefix"
+             ?hidden="${!e.hasSlotContent('prefix')}">
+            <slot name="prefix"></slot>
+        </div>
+        <div part="inner"
+             class="${classMap({ prefix: e.hasPrefix, suffix: e.hasSuffix })}">
+            ${when(e.label, () => html `
+            <label part="label"
+                   for="input"
+                   class="${classMap({ floating: e.value || e.isFocused })}">${e.label}</label>
+            `)}
+            <input part="input"
+                   .value="${e.value}"
+                   readonly
+                   ?disabled="${e.disabled}"
+                   ?required="${e.required}"
+                   id="input"
+                   name="${ifNonEmpty(e.name)}"
+                   type="text"
+                   placeholder="${ifNonEmpty(e.isFocused || !e.label ? e.placeholder : '')}"
+                   tabindex="${e.tabIndex}"
+                   aria-invalid="${e.invalid ? 'true' : 'false'}"
+                   @focus="${(x) => e.onFocus(x)}"
+                   @blur="${(x) => e.onBlur(x)}"
+                   @click="${() => e.browse()}"/>
+        </div>
+        <input part="fileInput"
+               type="file"
+               ?multiple="${e.multiple}"
+               accept="${ifNonEmpty(e.accept.join(','))}"
+               ?webkitdirectory="${e.directory}"
+               style="display: none;"
+               tabindex="-1"
+               @change="${(x) => e.onFileChange(x)}"/>
+        ${when(!e.disabled && !e.readonly && e.value && e.isClearable, () => html `
+        <mosaik-button part="clear"
+                       .appearance="${Appearance.Plain}"
+                       .icon="${Icons.clear}"
+                       .size="${Size.Small}"
+                       .iconSize="${Size.Medium}"
+                       @click="${() => e.clear()}"></mosaik-button>
+        `)}
+        ${when(!e.disabled && !e.readonly, () => html `
+        <mosaik-button part="browse"
+                       .appearance="${Appearance.Plain}"
+                       .icon="${Icons.folderOpen}"
+                       .size="${Size.Small}"
+                       .iconSize="${Size.Medium}"
+                       @click="${() => e.browse()}"></mosaik-button>
+        `)}
+        <div part="suffix"
+             ?hidden="${!e.hasSlotContent('suffix')}">
+            <slot name="suffix"></slot>
+        </div>
+    `;
+}
+//# sourceMappingURL=FileBoxElementTemplate.js.map

package/Controls/Components/Inputs/FileBox/FileBoxElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileBoxElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/FileBox/FileBoxElementTemplate.ts"],"names":[],"mappings":"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"}