@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
342 lines (338 loc) • 13.5 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component } from '@angular/core';
import '@synergy-design-system/components/components/file/file.js';
// ---------------------------------------------------------------------
// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
// Please do not edit this file directly!
// It will get recreated when running pnpm build.
// ---------------------------------------------------------------------
/**
* @summary File controls allow selecting an arbitrary number of files for uploading.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs
* @status stable
*
* @dependency syn-button
* @dependency syn-icon
*
* @slot label - The file control's label. Alternatively, you can use the `label` attribute.
* @slot help-text - Text that describes how to use the file control.
* Alternatively, you can use the `help-text` attribute.
* @slot droparea-icon - Optional droparea icon to use instead of the default.
* Works best with `<syn-icon>`.
* @slot trigger - Optional content to be used as trigger instead of the default content.
* Opening the file dialog on click and as well as drag and drop will work for this content.
* Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
* *hide-value*. Also if using the disabled attribute, the disabled styling will not be
* applied and must be taken care of yourself.
*
* @event syn-blur - Emitted when the control loses focus.
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
* @event syn-error - Emitted when multiple files are selected via drag and drop, without
* the `multiple` property being set.
* @event syn-focus - Emitted when the control gains focus.
* @event syn-input - Emitted when the control receives input.
*
* @csspart form-control - The form control that wraps the label, input, and help text.
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The input's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart button-wrapper - The wrapper around the button and text value.
* @csspart button - The syn-button acting as a file input.
* @csspart button__base - The syn-button's exported `base` part.
* @csspart value - The chosen files or placeholder text for the file input.
* @csspart droparea - The element wrapping the drop zone.
* @csspart droparea-background - The background of the drop zone.
* @csspart droparea-icon - The container that wraps the icon for the drop zone.
* @csspart droparea-value - The text for the drop zone.
* @csspart trigger - The container that wraps the trigger.
*
* @animation file.iconDrop - The animation to use for the file icon
* when a file is dropped
* @animation file.text.disappear - The disappear animation to use for the file placeholder text
* when a file is dropped
* @animation file.text.appear - The appear animation to use for the file placeholder text
* when a file is dropped
*/
class SynFileComponent {
nativeElement;
_ngZone;
modelSignal = new AbortController();
constructor(e, ngZone) {
this.nativeElement = e.nativeElement;
this._ngZone = ngZone;
this.nativeElement.addEventListener('syn-blur', (e) => {
this.synBlurEvent.emit(e);
});
this.nativeElement.addEventListener('syn-change', (e) => {
this.synChangeEvent.emit(e);
});
this.nativeElement.addEventListener('syn-error', (e) => {
this.synErrorEvent.emit(e);
});
this.nativeElement.addEventListener('syn-focus', (e) => {
this.synFocusEvent.emit(e);
});
this.nativeElement.addEventListener('syn-input', (e) => {
this.synInputEvent.emit(e);
});
this.ngModelUpdateOn = 'syn-input';
}
/**
* The event that will trigger the ngModel update.
* By default, this is set to "syn-input".
*/
set ngModelUpdateOn(v) {
this.modelSignal.abort();
this.modelSignal = new AbortController();
const option = v || 'syn-input';
this.nativeElement.addEventListener(option, () => {
this.filesChange.emit(this.files);
}, {
signal: this.modelSignal.signal,
});
}
get ngModelUpdateOn() {
return this.ngModelUpdateOn;
}
/**
* The selected files as a FileList object containing a list of File objects.
The FileList behaves like an array, so you can get the number of selected files
via its length property.
[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)
*/
set files(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.files = v));
}
get files() {
return this.nativeElement.files;
}
/**
* The name of the file control, submitted as a name/value pair with form data.
*/
set name(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
}
get name() {
return this.nativeElement.name;
}
/**
* The value of the file control contains a string that represents the path of the selected file.
If multiple files are selected, the value represents the first file in the list.
If no file is selected, the value is an empty string.
Beware that the only valid value when setting a file control is an empty string!
[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)
*/
set value(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
}
get value() {
return this.nativeElement.value;
}
/**
* The file control's size.
*/
set size(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
}
get size() {
return this.nativeElement.size;
}
/**
* The file control's label.
* If you need to display HTML, use the `label` slot instead.
*/
set label(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
}
get label() {
return this.nativeElement.label;
}
/**
* The file control's help text.
If you need to display HTML, use the `help-text` slot instead.
*/
set helpText(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.helpText = v));
}
get helpText() {
return this.nativeElement.helpText;
}
/**
* Disables the file control.
*/
set disabled(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.disabled = v === '' || v));
}
get disabled() {
return this.nativeElement.disabled;
}
/**
* Draw the file control as a drop area
*/
set droparea(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.droparea = v === '' || v));
}
get droparea() {
return this.nativeElement.droparea;
}
/**
* Comma separated list of supported file types
[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
*/
set accept(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.accept = v));
}
get accept() {
return this.nativeElement.accept;
}
/**
* Specifies the types of files that the server accepts.
Can be set either to user or environment.
Works only when not using a droparea!
[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
*/
set capture(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.capture = v));
}
get capture() {
return this.nativeElement.capture;
}
/**
* Indicates whether the user can select more than one file.
Has no effect if webkitdirectory is set.
[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
*/
set multiple(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.multiple = v === '' || v));
}
get multiple() {
return this.nativeElement.multiple;
}
/**
* Indicates that the file control should let the user select directories instead of files.
When a directory is selected, the directory and its entire hierarchy of contents are included
in the set of selected items.
Note: This is a non-standard attribute but is supported in the major browsers.
[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
*/
set webkitdirectory(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.webkitdirectory = v === '' || v));
}
get webkitdirectory() {
return this.nativeElement.webkitdirectory;
}
/**
* By default, form controls are associated with the nearest containing `<form>` element.
This attribute allows you to place the form control outside of a form and associate it
with the form that has this `id`.
* The form must be in the same document
or shadow root for this to work.
*/
set form(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
}
get form() {
return this.nativeElement.form;
}
/**
* Makes the input a required field.
*/
set required(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.required = v === '' || v));
}
get required() {
return this.nativeElement.required;
}
/**
* Suppress the value from being displayed in the file control
*/
set hideValue(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.hideValue = v === '' || v));
}
get hideValue() {
return this.nativeElement.hideValue;
}
/**
* Emitted when the control loses focus.
*/
synBlurEvent = new EventEmitter();
/**
* Emitted when an alteration to the control's value is committed by the user.
*/
synChangeEvent = new EventEmitter();
/**
* Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.
*/
synErrorEvent = new EventEmitter();
/**
* Emitted when the control gains focus.
*/
synFocusEvent = new EventEmitter();
/**
* Emitted when the control receives input.
*/
synInputEvent = new EventEmitter();
/**
* Support for two way data binding
*/
filesChange = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SynFileComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", type: SynFileComponent, isStandalone: true, selector: "syn-file", inputs: { ngModelUpdateOn: "ngModelUpdateOn", files: "files", name: "name", value: "value", size: "size", label: "label", helpText: "helpText", disabled: "disabled", droparea: "droparea", accept: "accept", capture: "capture", multiple: "multiple", webkitdirectory: "webkitdirectory", form: "form", required: "required", hideValue: "hideValue" }, outputs: { synBlurEvent: "synBlurEvent", synChangeEvent: "synChangeEvent", synErrorEvent: "synErrorEvent", synFocusEvent: "synFocusEvent", synInputEvent: "synInputEvent", filesChange: "filesChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SynFileComponent, decorators: [{
type: Component,
args: [{
selector: 'syn-file',
standalone: true,
template: '<ng-content></ng-content>',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { ngModelUpdateOn: [{
type: Input
}], files: [{
type: Input
}], name: [{
type: Input
}], value: [{
type: Input
}], size: [{
type: Input
}], label: [{
type: Input
}], helpText: [{
type: Input
}], disabled: [{
type: Input
}], droparea: [{
type: Input
}], accept: [{
type: Input
}], capture: [{
type: Input
}], multiple: [{
type: Input
}], webkitdirectory: [{
type: Input
}], form: [{
type: Input
}], required: [{
type: Input
}], hideValue: [{
type: Input
}], synBlurEvent: [{
type: Output
}], synChangeEvent: [{
type: Output
}], synErrorEvent: [{
type: Output
}], synFocusEvent: [{
type: Output
}], synInputEvent: [{
type: Output
}], filesChange: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { SynFileComponent };
//# sourceMappingURL=synergy-design-system-angular-components-file.mjs.map