@shoper/phoenix_design_system 1.2.3-4 → 1.2.3-5

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js

@@ -1,160 +0,0 @@
-import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import classnames from '../../../../external/classnames/index.js';
-import { createRef, ref } from 'lit-html/directives/ref.js';
-import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
-import { FILE_PICKER_CONTROL_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_LABEL_EVENT_NAMES } from './file_picker_constants.js';
-import { FileItem } from './file/file_model.js';
-import { ifDefined } from 'lit/directives/if-defined';
-
-let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this._$fileInputRef = createRef();
-        this._handleChangeEvent = (event) => {
-            const filesList = this._getFiles(event);
-            if (filesList && filesList.length > 0) {
-                this.file = FileItem.create({
-                    name: this._getFileName(filesList),
-                    id: `file-${v4()}`
-                });
-                this.classList.add(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
-                this._dispatchChangeEvent();
-            }
-        };
-        this._getFiles = (event) => {
-            const targetElement = event.currentTarget;
-            return targetElement.files;
-        };
-        this._getFileName = (fileList) => {
-            return fileList[0].name;
-        };
-        this._getInputRefValue = () => {
-            return this._$fileInputRef.value;
-        };
-        this._removeFileItem = () => {
-            const $fileInput = this._getInputRefValue();
-            if ($fileInput) {
-                $fileInput.value = '';
-                $fileInput.files = null;
-            }
-            this.file = null;
-            this.classList.remove(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
-            this._dispatchChangeEvent();
-        };
-        this._triggerClickOnLabel = () => {
-            const $fileInput = this._getInputRefValue();
-            if ($fileInput)
-                $fileInput.click();
-        };
-        this._dispatchChangeEvent = () => {
-            this.dispatchEvent(new Event('change'));
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._addEventListeners();
-        const cssClasses = classnames({
-            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
-            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
-            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
-        });
-        if (cssClasses)
-            this.classList.add(cssClasses);
-    }
-    render() {
-        var _a, _b;
-        super.render();
-        return html `
-            <input
-                ${ref(this._$fileInputRef)}
-                type="file"
-                class="${FILE_PICKER_CONTROL_CSS_CLASSES.filePickerInput}"
-                id="${ifDefined(this.controlId)}"
-                name="${ifDefined(this.controlName)}"
-                ?disabled="${this.disabled}"
-                ?required="${this.required}"
-                accept="${ifDefined(this.accept)}"
-                @change="${this._handleChangeEvent}"
-                hidden
-            />
-
-            ${!((_a = this.file) === null || _a === void 0 ? void 0 : _a.name)
-            ? html ` <h-file-picker-label
-                      control-id="${this.controlId}"
-                      label-text="${this.labelText}"
-                      label-icon-name="${ifDefined(this.labelIconName)}"
-                  />`
-            : nothing}
-            ${((_b = this.file) === null || _b === void 0 ? void 0 : _b.name)
-            ? html `<h-file
-                      name="${this.file.name}"
-                      id="${this.file.id}"
-                      remove-button-text="${this.removeButtonText}"
-                      remove-button-icon-name="${ifDefined(this.removeButtonIconName)}"
-                  />`
-            : nothing}
-        `;
-    }
-    get files() {
-        const $fileInput = this._getInputRefValue();
-        return $fileInput.files;
-    }
-    _addEventListeners() {
-        this.addEventListener(FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
-        this.addEventListener(FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey, this._triggerClickOnLabel);
-    }
-};
-__decorate([
-    property({ type: String, attribute: 'control-id', reflect: true }),
-    __metadata("design:type", String)
-], HFilePicker.prototype, "controlId", void 0);
-__decorate([
-    property({ type: String, attribute: 'control-name' }),
-    __metadata("design:type", String)
-], HFilePicker.prototype, "controlName", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HFilePicker.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HFilePicker.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HFilePicker.prototype, "error", void 0);
-__decorate([
-    property({ type: String, attribute: 'label-text' }),
-    __metadata("design:type", String)
-], HFilePicker.prototype, "labelText", void 0);
-__decorate([
-    property({ type: String, attribute: 'label-icon-name' }),
-    __metadata("design:type", String)
-], HFilePicker.prototype, "labelIconName", void 0);
-__decorate([
-    property({ type: String, attribute: 'remove-button-text' }),
-    __metadata("design:type", String)
-], HFilePicker.prototype, "removeButtonText", void 0);
-__decorate([
-    property({ type: String, attribute: 'remove-button-icon-name' }),
-    __metadata("design:type", String)
-], HFilePicker.prototype, "removeButtonIconName", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], HFilePicker.prototype, "accept", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HFilePicker.prototype, "file", void 0);
-HFilePicker = __decorate([
-    phoenixCustomElement('h-file-picker')
-], HFilePicker);
-
-export { HFilePicker };
-//# sourceMappingURL=file_picker.js.map

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.d.ts

@@ -1,27 +0,0 @@
-export declare const FILE_ITEM_CSS_CLASSES: {
-    readonly file: "file";
-    readonly fileName: "file__name";
-    readonly fileRemoveButton: "file__remove-button";
-};
-export declare const FILE_ITEM_EVENT_NAMES: {
-    readonly removed: "fileItemRemoved";
-};
-export declare type TFileItemConstructorOptions = {
-    name: string;
-    id: string;
-};
-export declare const FILE_PICKER_CONTROL_CSS_CLASSES: {
-    readonly filePicker: "file-picker";
-    readonly filePickerDisabled: "file-picker_disabled";
-    readonly filePickerRequired: "file-picker_required";
-    readonly filePickerError: "file-picker_error";
-    readonly filePickerHasValue: "file-picker_has-value";
-    readonly filePickerInput: "file-picker__input";
-    readonly filePickerLabel: "file-picker__label";
-};
-export declare const FILE_PICKER_LABEL_EVENT_NAMES: {
-    readonly filePickerLabelClickedByEnterKey: "filePickerLabelClickedByEnterKey";
-};
-export declare const FILE_PICKER_ICON_CSS_CLASSES: {
-    readonly filePickerIcon: "file-picker-icon";
-};

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.js

@@ -1,29 +0,0 @@
-const baseFileItemClass = 'file';
-const FILE_ITEM_CSS_CLASSES = {
-    file: baseFileItemClass,
-    fileName: `${baseFileItemClass}__name`,
-    fileRemoveButton: `${baseFileItemClass}__remove-button`
-};
-const FILE_ITEM_EVENT_NAMES = {
-    removed: 'fileItemRemoved'
-};
-const baseFilePickerControlClass = 'file-picker';
-const FILE_PICKER_CONTROL_CSS_CLASSES = {
-    filePicker: baseFilePickerControlClass,
-    filePickerDisabled: `${baseFilePickerControlClass}_disabled`,
-    filePickerRequired: `${baseFilePickerControlClass}_required`,
-    filePickerError: `${baseFilePickerControlClass}_error`,
-    filePickerHasValue: `${baseFilePickerControlClass}_has-value`,
-    filePickerInput: `${baseFilePickerControlClass}__input`,
-    filePickerLabel: `${baseFilePickerControlClass}__label`
-};
-const FILE_PICKER_LABEL_EVENT_NAMES = {
-    filePickerLabelClickedByEnterKey: 'filePickerLabelClickedByEnterKey'
-};
-const baseFilePickerIconClass = 'file-picker-icon';
-const FILE_PICKER_ICON_CSS_CLASSES = {
-    filePickerIcon: baseFilePickerIconClass
-};
-
-export { FILE_ITEM_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES, FILE_PICKER_LABEL_EVENT_NAMES };
-//# sourceMappingURL=file_picker_constants.js.map

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.d.ts

@@ -1,11 +0,0 @@
-import { TemplateResult } from 'lit';
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-export declare class HFilePickerLabel extends PhoenixLightLitElement {
-    controlId: string;
-    labelText: string;
-    labelIconName: string;
-    private _btnController;
-    constructor();
-    protected render(): TemplateResult;
-    private _dispatchClickEvent;
-}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js

@@ -1,51 +0,0 @@
-import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
-import { ICON_CSS_CLASSES } from '../../icon/icon_constants.js';
-import { FILE_PICKER_LABEL_EVENT_NAMES, FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES } from './file_picker_constants.js';
-
-let HFilePickerLabel = class HFilePickerLabel extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this._dispatchClickEvent = () => {
-            this.dispatchEvent(new CustomEvent(FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey, {
-                bubbles: true
-            }));
-        };
-        this._btnController = new BtnController(this, this._dispatchClickEvent);
-    }
-    render() {
-        super.render();
-        return html `<label class="${FILE_PICKER_CONTROL_CSS_CLASSES.filePickerLabel}" for="${this.controlId}">
-            ${this.labelIconName
-            ? html `<h-icon
-                      class="${ICON_CSS_CLASSES.icon} ${FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
-                      icon-name=${this.labelIconName}
-                  />`
-            : nothing}
-            ${this.labelText}
-        </label>`;
-    }
-};
-__decorate([
-    property({ type: String, attribute: 'control-id', reflect: true }),
-    __metadata("design:type", String)
-], HFilePickerLabel.prototype, "controlId", void 0);
-__decorate([
-    property({ type: String, attribute: 'label-text' }),
-    __metadata("design:type", String)
-], HFilePickerLabel.prototype, "labelText", void 0);
-__decorate([
-    property({ type: String, attribute: 'label-icon-name' }),
-    __metadata("design:type", String)
-], HFilePickerLabel.prototype, "labelIconName", void 0);
-HFilePickerLabel = __decorate([
-    phoenixCustomElement('h-file-picker-label'),
-    __metadata("design:paramtypes", [])
-], HFilePickerLabel);
-
-export { HFilePickerLabel };
-//# sourceMappingURL=file_picker_label.js.map

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_types.d.ts

@@ -1,6 +0,0 @@
-import { HFilePicker } from "./file_picker";
-declare global {
-    interface HTMLElementTagNameMap {
-        'h-file-picker': HFilePicker;
-    }
-}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_types.js

@@ -1,2 +0,0 @@
-import '@phoenixRoot/components/form/file_picker/file_picker';
-//# sourceMappingURL=file_picker_types.js.map

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"file_picker_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/file_picker/file_picker_types.ts"],"names":[],"mappings":"AAAA,OAA4B,sDAAsD,CAAC"}