/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, coerceBoolean, coerceNumber, customElement, coreProperty } from '@tylertech/forge-core';
import { ButtonComponent } from '../button';
import { BaseComponent } from '../core/base/base-component';
import { FilePickerAdapter } from './file-picker-adapter';
import { FILE_PICKER_CONSTANTS } from './file-picker-constants';
import { FilePickerCore } from './file-picker-core';
const template = '<template><form class=\"forge-file-picker\" id=\"container\" part=\"form\"><div class=\"primary\" id=\"primary\" part=\"primary\"><slot name=\"primary\"></slot></div><slot id=\"button-slot\"></slot><div class=\"secondary\" id=\"secondary\" part=\"secondary\"><slot name=\"secondary\"></slot></div><input type=\"file\" class=\"input\" id=\"input\" part=\"input\"></form><div class=\"helper-text\" part=\"helper-text-container\"><slot name=\"helper-text\"></slot></div></template>';
const styles = ':host{--_file-picker-background:var(--forge-file-picker-background, var(--forge-theme-surface-dim, #fafafa));--_file-picker-width:var(--forge-file-picker-width, auto);--_file-picker-height:var(--forge-file-picker-height, auto);--_file-picker-max-width:var(--forge-file-picker-max-width, auto);--_file-picker-border-width:var(--forge-file-picker-border-width, var(--forge-border-thin, 1px));--_file-picker-border-style:var(--forge-file-picker-border-style, dashed);--_file-picker-border-color:var(--forge-file-picker-border-color, var(--forge-theme-outline-low, #9e9e9e));--_file-picker-gap:var(--forge-file-picker-gap, var(--forge-spacing-medium, 16px));--_file-picker-padding:var(--forge-file-picker-padding, var(--forge-spacing-medium, 16px));--_file-picker-padding-block:var(--forge-file-picker-padding-block, 0);--_file-picker-padding-inline:var(--forge-file-picker-padding-inline, var(--_file-picker-padding));--_file-picker-disabled-opacity:var(--forge-file-picker-disabled-opacity, 0.38);--_file-picker-highlight-background:var(--forge-file-picker-highlight-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_file-picker-highlight-border-color:var(--forge-file-picker-highlight-border-color, var(--forge-theme-primary, #3f51b5))}:host{display:block;height:100%;width:100%}:host([hidden]){display:none}:host([compact]){display:inline-block}.forge-file-picker{--_file-picker-background:var(--forge-file-picker-background, var(--forge-theme-surface-dim, #fafafa));--_file-picker-width:var(--forge-file-picker-width, auto);--_file-picker-height:var(--forge-file-picker-height, auto);--_file-picker-max-width:var(--forge-file-picker-max-width, auto);--_file-picker-border-width:var(--forge-file-picker-border-width, var(--forge-border-thin, 1px));--_file-picker-border-style:var(--forge-file-picker-border-style, dashed);--_file-picker-border-color:var(--forge-file-picker-border-color, var(--forge-theme-outline-low, #9e9e9e));--_file-picker-gap:var(--forge-file-picker-gap, var(--forge-spacing-medium, 16px));--_file-picker-padding:var(--forge-file-picker-padding, var(--forge-spacing-medium, 16px));--_file-picker-padding-block:var(--forge-file-picker-padding-block, 0);--_file-picker-padding-inline:var(--forge-file-picker-padding-inline, var(--_file-picker-padding));--_file-picker-disabled-opacity:var(--forge-file-picker-disabled-opacity, 0.38);--_file-picker-highlight-background:var(--forge-file-picker-highlight-background, var(--forge-theme-primary-container-minimum, #f7f8fc));--_file-picker-highlight-border-color:var(--forge-file-picker-highlight-border-color, var(--forge-theme-primary, #3f51b5))}.forge-file-picker{display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:var(--_file-picker-gap);-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--_file-picker-padding);height:var(--_file-picker-height);width:var(--_file-picker-width);max-width:var(--_file-picker-max-width);text-align:center;background:var(--_file-picker-background);cursor:pointer;border-width:var(--_file-picker-border-width);border-style:var(--_file-picker-border-style);border-color:var(--_file-picker-border-color)}.forge-file-picker[disabled]{opacity:var(--_file-picker-disabled-opacity);cursor:unset}.forge-file-picker:not(.compact).highlight{--_file-picker-border-color:var(--_file-picker-highlight-border-color);--_file-picker-background:var(--_file-picker-highlight-background)}.primary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);color:var(--forge-theme-text-high,rgba(0,0,0,.87));max-width:var(--_file-picker-max-width)}.secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);color:var(--forge-theme-text-high,rgba(0,0,0,.87));max-width:var(--_file-picker-max-width)}.input{display:none}.helper-text ::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-align:start}.borderless{--_file-picker-width:var(--forge-file-picker-width, 100%);border:none}.borderless:not(.compact).highlight{border:none}.borderless+.helper-text{display:none}.compact{--_file-picker-height:var(--forge-file-picker-height, fit-content);--_file-picker-width:var(--forge-file-picker-width, fit-content);--_file-picker-background-color:var(--forge-file-picker-background-color, transparent);--_file-picker-padding:var(--forge-file-picker-padding, 0);border:none}.compact .primary,.compact .secondary{display:none}.compact .button{--_file-picker-width:var(--forge-file-picker-width, auto);background-color:transparent}';
/**
 * @tag forge-file-picker
 *
 * @summary
 * The file-picker component allows for a user to upload files of their own to the system. The component provides a slot for a
 * button, as well as drag-and-drop functionality to launch the system file chooser dialog. There are visual queues to let the
 * user know when files they are dragging can be dropped, as well as events that are relayed to the developer to handle files
 * that are legal and/or illegal based on the parameters set on the component.
 *
 * The expectation of this component is that it will be used as a familiar element on the page that will let users upload files,
 * while providing that visual and functional consistency.
 *
 * @property {string | null} [accept=null] - Gets/sets the allowed file types.
 * @property {string | null} [maxSize=null] - Gets/sets the maximum allowed file size.
 * @property {string | null} [capture=null] - Gets/sets the camera to use when capturing video or images.
 * @property {boolean} [multiple=false] - Gets/sets whether multiple files are allowed.
 * @property {boolean} [disabled=false] - Gets/sets whether the file picker is disabled.
 * @property {boolean} [compact=false] - Gets/sets whether the file picker uses the compact variant.
 * @property {boolean} [borderless=false] - Gets and sets whether the file picker is borderless.
 *
 * @attribute {string | null} [accept=null] - Gets/sets the allowed file types.
 * @attribute {string | null} [maxSize=null] - Gets/sets the maximum allowed file size.
 * @attribute {string | null} [capture=null] - Gets/sets the camera to use when capturing video or images.
 * @attribute {boolean} [multiple=false] - Gets/sets whether multiple files are allowed.
 * @attribute {boolean} [disabled=false] - Gets/sets whether the file picker is disabled.
 * @attribute {boolean} [compact=false] - Gets/sets whether the file picker uses the compact variant.
 * @attribute {boolean} [borderless=false] - Gets and sets whether the file picker is borderless.
 *
 * @cssproperty --forge-file-picker-background - Controls the background color.
 * @cssproperty --forge-file-picker-width - Controls the width.
 * @cssproperty --forge-file-picker-height - Controls the height.
 * @cssproperty --forge-file-picker-max-width - Controls the maximum width.
 * @cssproperty --forge-file-picker-border-width - Controls the border width.
 * @cssproperty --forge-file-picker-border-style - Controls the border style.
 * @cssproperty --forge-file-picker-border-color - Controls the border color.
 * @cssproperty --forge-file-picker-gap - Controls gap between each element.
 * @cssproperty --forge-file-picker-padding - Controls the padding.
 * @cssproperty --forge-file-picker-padding-block - Controls the top and bottom padding.
 * @cssproperty --forge-file-picker-padding-inline - Controls the left and right padding.
 * @cssproperty --forge-file-picker-disabled-opacity - Controls the opacity value of the file picker when it's disabled.
 * @cssproperty --forge-file-picker-highlight-background - Controls the background color of the file picker when dragging files into the form.
 * @cssproperty --forge-file-picker-highlight-border-color - Controls the border color of the file picker when dragging files into the form.
 *
 * @event {CustomEvent<IFilePickerChangeEventData>} forge-file-picker-change - Dispatched when a file is chosen.
 *
 * @csspart form - The `<form>` element at the root.
 * @csspart primary - The container element around the primary slot.
 * @csspart secondary - The container element around the secondary slot.
 * @csspart input - The `<input type="file">` element.
 * @csspart helper-text-container - The container around the helper-text slot.
 */
let FilePickerComponent = class FilePickerComponent extends BaseComponent {
    static get observedAttributes() {
        return [
            FILE_PICKER_CONSTANTS.attributes.ACCEPT,
            FILE_PICKER_CONSTANTS.attributes.MAX_SIZE,
            FILE_PICKER_CONSTANTS.attributes.CAPTURE,
            FILE_PICKER_CONSTANTS.attributes.MULTIPLE,
            FILE_PICKER_CONSTANTS.attributes.DISABLED,
            FILE_PICKER_CONSTANTS.attributes.COMPACT,
            FILE_PICKER_CONSTANTS.attributes.BORDERLESS
        ];
    }
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
        this._core = new FilePickerCore(new FilePickerAdapter(this));
    }
    connectedCallback() {
        this._core.initialize();
    }
    disconnectedCallback() {
        this._core.destroy();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case FILE_PICKER_CONSTANTS.attributes.ACCEPT:
                this.accept = newValue;
                break;
            case FILE_PICKER_CONSTANTS.attributes.MAX_SIZE:
                this.maxSize = coerceNumber(newValue);
                break;
            case FILE_PICKER_CONSTANTS.attributes.CAPTURE:
                this.capture = newValue;
                break;
            case FILE_PICKER_CONSTANTS.attributes.MULTIPLE:
                this.multiple = coerceBoolean(newValue);
                break;
            case FILE_PICKER_CONSTANTS.attributes.DISABLED:
                this.disabled = coerceBoolean(newValue);
                break;
            case FILE_PICKER_CONSTANTS.attributes.COMPACT:
                this.compact = coerceBoolean(newValue);
                break;
            case FILE_PICKER_CONSTANTS.attributes.BORDERLESS:
                this.borderless = coerceBoolean(newValue);
                break;
        }
    }
};
__decorate([
    coreProperty()
], FilePickerComponent.prototype, "accept", void 0);
__decorate([
    coreProperty()
], FilePickerComponent.prototype, "maxSize", void 0);
__decorate([
    coreProperty()
], FilePickerComponent.prototype, "capture", void 0);
__decorate([
    coreProperty()
], FilePickerComponent.prototype, "multiple", void 0);
__decorate([
    coreProperty()
], FilePickerComponent.prototype, "disabled", void 0);
__decorate([
    coreProperty()
], FilePickerComponent.prototype, "compact", void 0);
__decorate([
    coreProperty()
], FilePickerComponent.prototype, "borderless", void 0);
FilePickerComponent = __decorate([
    customElement({
        name: FILE_PICKER_CONSTANTS.elementName,
        dependencies: [ButtonComponent]
    })
], FilePickerComponent);
export { FilePickerComponent };
