npm - q2-tecton-elements - Versions diffs - 1.63.2 → 1.64.0 - Mend

q2-tecton-elements 1.63.2 → 1.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (390) hide show

package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n State,\n Element,\n Event,\n Listen,\n Watch,\n h,\n EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n // #region Own Properties\n\n dropdownItemBtn: HTMLButtonElement;\n removeBtn: HTMLButtonElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n q2LocValue: string;\n\n // #endregion\n // #region Public Property API\n\n /*\n Used by q2-option-list to indicate the option is active\n * @private\n /\n @Prop({ reflect: true })\n active: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* Disables interaction with the item and blocks its click event. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n The text that appears within the dropdown item.\n \n @info\n * This will be used as the `aria-label` for this item.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Renders an icon button in the item.\n * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n /\n @Prop({ reflect: true })\n removable: boolean;\n\n /\n Renders a line in the item instead of text.\n * Click events from these items will not have details provided.\n * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n /\n @Prop({ reflect: true })\n separator: boolean;\n\n /* A static reference value for the item. This value is returned in the click event detail. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Is emitted when the item is clicked.\n * @deprecated\n /\n @Event()\n click: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n /\n Is emitted when the item is clicked.\n */\n @Event()\n tctClick: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.q2LocValue = this.handleQ2LocValue();\n }\n\n componentDidLoad() {\n if (this.separator) return;\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.focusItem();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n get innerLabel(): string {\n return this.label \|\| this.hostElement.textContent.trim() \|\| this.q2LocValue;\n }\n\n get removeLabel(): string {\n return loc('tecton.element.dropdownItem.remove', [this.innerLabel \|\| '']);\n }\n\n focusItem() {\n this.dropdownItemBtn.focus();\n }\n\n focusRemoveBtn() {\n this.removeBtn && this.removeBtn.focus();\n }\n\n handleQ2LocValue = (): string => {\n const locElement = this.hostElement.querySelector('q2-loc');\n if (!locElement) return '';\n\n return locElement.value\n ? loc(locElement.value, locElement.substitutions)\n : loc(locElement.innerText, locElement.substitutions);\n };\n\n onItemClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n mirrorEmit(this, ['click', 'tctClick'], {\n type: 'select',\n value: this.value \|\| '',\n });\n };\n\n onItemFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onItemKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowRight') this.focusRemoveBtn();\n };\n\n onRemoveBtnClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n mirrorEmit(this, ['click', 'tctClick'], {\n type: 'remove',\n value: this.value \|\| '',\n });\n };\n\n onRemoveBtnFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onRemoveBtnKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') this.focusItem();\n };\n\n // #endregion\n // #region Render Methods\n\n renderItemDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-item-wrapper\"\n role=\"presentation\"\n >\n <button\n ref={el => (this.dropdownItemBtn = el)}\n aria-label={loc(this.innerLabel)}\n class=\"dropdown-item-button dropdown-item\"\n tabindex=\"-1\"\n disabled={this.disabled}\n role=\"menuitem\"\n onClick={this.onItemClick}\n onKeyDown={this.onItemKeydown}\n onFocus={this.onItemFocus}\n test-id=\"dropdownItem\"\n >\n <slot>{loc(this.innerLabel)}</slot>\n </button>\n {this.removable && (\n <button\n ref={el => (this.removeBtn = el)}\n class=\"dropdown-item-button remove-dropdown-item\"\n tabindex=\"-1\"\n aria-label={this.removeLabel}\n disabled={this.disabled}\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </button>\n )}\n </div>\n );\n }\n\n renderSeparatorDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-separator\"\n role=\"separator\"\n test-id=\"dropdownItemSeparator\"\n />\n );\n }\n\n render() {\n if (this.separator) {\n return this.renderSeparatorDOM();\n }\n\n return this.renderItemDOM();\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Prop,\n State,\n Element,\n Event,\n Listen,\n Watch,\n h,\n EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n // #region Own Properties\n\n dropdownItemBtn: HTMLButtonElement;\n removeBtn: HTMLButtonElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n q2LocValue: string;\n\n // #endregion\n // #region Public Property API\n\n /*\n Used by q2-option-list to indicate the option is active\n * @private\n /\n @Prop({ reflect: true })\n active: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* Disables interaction with the item and blocks its click event. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n The text that appears within the dropdown item.\n \n @info\n * This will be used as the `aria-label` for this item.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Renders an icon button in the item.\n * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n /\n @Prop({ reflect: true })\n removable: boolean;\n\n /\n Renders a line in the item instead of text.\n * Click events from these items will not have details provided.\n * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n /\n @Prop({ reflect: true })\n separator: boolean;\n\n /* A static reference value for the item. This value is returned in the click event detail. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Is emitted when the item is clicked.\n * @deprecated\n /\n @Event()\n click: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n /\n Is emitted when the item is clicked.\n /\n @Event()\n tctClick: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.q2LocValue = this.handleQ2LocValue();\n }\n\n componentDidLoad() {\n if (this.separator) return;\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event: FocusEvent) {\n if (event.target === this.hostElement) {\n this.focusItem();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n get innerLabel(): string {\n return this.label \|\| this.hostElement.textContent.trim() \|\| this.q2LocValue;\n }\n\n get removeLabel(): string {\n return loc('tecton.element.dropdownItem.remove', [this.innerLabel \|\| '']);\n }\n\n focusItem() {\n this.dropdownItemBtn.focus();\n }\n\n focusRemoveBtn() {\n this.removeBtn && this.removeBtn.focus();\n }\n\n handleQ2LocValue = (): string => {\n const locElement = this.hostElement.querySelector('q2-loc');\n if (!locElement) return '';\n\n return locElement.value\n ? loc(locElement.value, locElement.substitutions)\n : loc(locElement.innerText, locElement.substitutions);\n };\n\n onItemClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n mirrorEmit(this, ['click', 'tctClick'], {\n type: 'select',\n value: this.value \|\| '',\n });\n };\n\n onItemFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onItemKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowRight') this.focusRemoveBtn();\n };\n\n onRemoveBtnClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n mirrorEmit(this, ['click', 'tctClick'], {\n type: 'remove',\n value: this.value \|\| '',\n });\n };\n\n onRemoveBtnFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onRemoveBtnKeydown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') this.focusItem();\n };\n\n // #endregion\n // #region Render Methods\n\n renderItemDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-item-wrapper\"\n role=\"presentation\"\n >\n <button\n ref={el => (this.dropdownItemBtn = el)}\n aria-label={loc(this.innerLabel)}\n class=\"dropdown-item-button dropdown-item\"\n tabindex=\"-1\"\n disabled={this.disabled}\n role=\"menuitem\"\n onClick={this.onItemClick}\n onKeyDown={this.onItemKeydown}\n onFocus={this.onItemFocus}\n test-id=\"dropdownItem\"\n >\n {/ .icon is a placeholder to make the dd-item match the structure of option */}\n <div class=\"icon\"></div>\n <slot>{loc(this.innerLabel)}</slot>\n </button>\n {this.removable && (\n <button\n ref={el => (this.removeBtn = el)}\n class=\"dropdown-item-button remove-dropdown-item\"\n tabindex=\"-1\"\n aria-label={this.removeLabel}\n disabled={this.disabled}\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </button>\n )}\n </div>\n );\n }\n\n renderSeparatorDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"separator\"\n test-id=\"dropdownItemSeparator\"\n role=\"separator\"\n ></div>\n );\n }\n\n render() {\n if (this.separator) {\n return this.renderSeparatorDOM();\n }\n\n return this.renderItemDOM();\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-file-picker/q2-file-picker.js CHANGED Viewed

@@ -6,6 +6,8 @@ import { hasSlotContent, loc } from "../../utils/index";
  */
 export class Q2FilePicker {
     constructor() {
+        // #region Own Properties
+        this._value = { invalidFiles: [], validFiles: [] };
         this.queuedFiles = [];
         // #endregion
         // #region State Properties
@@ -47,21 +49,6 @@ export class Q2FilePicker {
          * @localizable
          */
         this.status = [];
-        /**
-         * Returns an object representing the selected files with two properties:
-         * - `invalidFiles`: An array of `InvalidFileStatus` objects representing
-         *   files that failed validation.
-         * - `validFiles`: An array of `File` objects representing files that passed
-         *   validation.
-         *
-         * Each `InvalidFileStatus` object includes the following properties:
-         * - `file`: The `File` object.
-         * - `status`: The validation status, which can be `"invalid-type"` (invalid file
-         *   type), `"over-size-limit"` (file exceeds the size limit), or
-         *   `"over-max-files-limit"` (total exceeds the max files limit).
-         * @readonly
-         */
-        this.value = { invalidFiles: [], validFiles: [] };
         /**
          * Determines if the file picker is a browse button or a drop zone with a
          * browse link.
@@ -79,7 +66,7 @@ export class Q2FilePicker {
             const droppedFiles = Array.from(e.dataTransfer.files);
             const filesObject = this.buildFilesObject(droppedFiles);
             this.emitChange(filesObject);
-            this.value = filesObject;
+            this._value = filesObject;
         };
         this.grabSelectedFiles = (e) => {
             const selectedFiles = Array.from(e.target.files);
@@ -87,7 +74,7 @@ export class Q2FilePicker {
             // Reset the input value to allow re-selection of the same file
             this.browseButtonInput.value = '';
             this.emitChange(filesObject);
-            this.value = filesObject;
+            this._value = filesObject;
         };
         this.highlightDropZone = (e) => {
             if (this.disabled)
@@ -105,6 +92,26 @@ export class Q2FilePicker {
                 file.status === 'over-max-files-limit' ? (h("q2-icon", { class: "icon-error", type: "error" })) : file.status === 'in-progress' ? (h("q2-loading", { class: "file-item-loading", "hide-from-screen-readers": true })) : (h("q2-icon", { class: "icon-success", type: "success" }))), h("div", { slot: "header" }, file.file.name), h("div", { class: "file-item-info", slot: "body" }, this.getFileItemStatusMessage(file)), h("div", { slot: "action" }, h("q2-btn", { class: "dismiss-button", intent: "neutral-text", "hide-label": "true", label: this.getFileItemButtonLabel(file), onClick: this.getClickHandlerToRemoveFileItem(file.file.name), disabled: disabled }, h("q2-icon", { type: "close" }))))))))));
         };
     }
+    /**
+     * Returns an object representing the selected files with two properties:
+     * - `invalidFiles`: An array of `InvalidFileStatus` objects representing
+     *   files that failed validation.
+     * - `validFiles`: An array of `File` objects representing files that passed
+     *   validation.
+     *
+     * Each `InvalidFileStatus` object includes the following properties:
+     * - `file`: The `File` object.
+     * - `status`: The validation status, which can be `"invalid-type"` (invalid file
+     *   type), `"over-size-limit"` (file exceeds the size limit), or
+     *   `"over-max-files-limit"` (total exceeds the max files limit).
+     * @readonly
+     */
+    get value() {
+        return this._value;
+    }
+    set value(_) {
+        console.error('Setting the value of this component directly is not allowed.');
+    }
     // #endregion
     // #region Watchers
     updateFileList(newValue) {
@@ -457,7 +464,7 @@ export class Q2FilePicker {
                     "references": {
                         "ValidFileStatus": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
                             "id": "src/components/q2-file-picker/q2-file-picker.tsx::ValidFileStatus"
                         }
                     }
@@ -478,14 +485,14 @@ export class Q2FilePicker {
             "value": {
                 "type": "unknown",
                 "attribute": "value",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "FilesObject",
                     "resolved": "{ invalidFiles: InvalidFileStatus[]; validFiles: File[]; }",
                     "references": {
                         "FilesObject": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
                             "id": "src/components/q2-file-picker/q2-file-picker.tsx::FilesObject"
                         }
                     }
@@ -499,8 +506,8 @@ export class Q2FilePicker {
                         }],
                     "text": "Returns an object representing the selected files with two properties:\n- `invalidFiles`: An array of `InvalidFileStatus` objects representing\n  files that failed validation.\n- `validFiles`: An array of `File` objects representing files that passed\n  validation.\n\nEach `InvalidFileStatus` object includes the following properties:\n- `file`: The `File` object.\n- `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n  type), `\"over-size-limit\"` (file exceeds the size limit), or\n  `\"over-max-files-limit\"` (total exceeds the max files limit)."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "defaultValue": "{ invalidFiles: [], validFiles: [] }"
             },
             "variant": {
@@ -550,7 +557,7 @@ export class Q2FilePicker {
                     "references": {
                         "FilesObject": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
                             "id": "src/components/q2-file-picker/q2-file-picker.tsx::FilesObject"
                         }
                     }

package/dist/collection/components/q2-file-picker/q2-file-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-file-picker.js","sourceRoot":"","sources":["../../../../src/components/q2-file-picker/q2-file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype DisplayedFile = {\n file: File;\n message?: string;\n status: ValidFileStatusType \| InvalidFileStatusType;\n toBeRemoved?: boolean;\n};\ntype ValidFileStatusType = 'in-progress' \| 'failed' \| 'uploaded';\ntype InvalidFileStatusType = 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit';\nexport type ValidFileStatus = {\n name: string;\n status: ValidFileStatusType;\n message?: string;\n};\nexport type InvalidFileStatus = {\n file: File;\n status: InvalidFileStatusType;\n};\nexport type FilesObject = {\n invalidFiles: InvalidFileStatus[];\n validFiles: File[];\n};\n\n/*\n @slot label - An optional slot to display a custom label.\n * @slot description - An optional slot to display a custom description.\n /\n@Component({\n tag: 'q2-file-picker',\n styleUrl: 'q2-file-picker.scss',\n shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n // #region Own Properties\n\n browseButtonInput: HTMLElement;\n dropZone: HTMLElement;\n fileItemsToBeDeleted;\n queuedFiles: File[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n el: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n areFilesUploading: boolean = false;\n\n @State()\n displayedFiles: DisplayedFile[] = [];\n\n @State()\n isDropZoneHighlighted: boolean = false;\n\n @State()\n refreshCounter = 0;\n\n // #endregion\n // #region Public Property API\n\n /\n The size of the browse button.\n /\n @Prop({ reflect: true })\n buttonSize: 'none' \| 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n A description of the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Disables the file picker, preventing user interaction.\n /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n * via JavaScript.\n /\n @Prop({ reflect: true })\n fileTypes: string[] \| string = [];\n\n /\n The label for the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of files that can be selected.\n /\n @Prop({ reflect: true })\n // maxFiles: number \| string = Infinity;\n maxFiles: number = Infinity;\n\n /\n The maximum size (in bytes) of any file that can be selected.\n /\n @Prop({ reflect: true })\n maxFileSize: number = Infinity;\n\n /\n An array of `ValidFileStatus` objects representing the upload status of\n * files. Each `ValidFileStatus` object contains the following properties:\n * - `name`: The file name.\n * - `status`: The upload status, either `\"failed\"` or `\"uploaded\"`.\n * - `message`: (Optional) A custom status message, used only when `status`\n * is `\"failed\"`. This allows developers to provide more detail about\n * upload failures while ensuring all other file status messages remain\n * consistent with approved design/UX standards. Custom failure messages\n * are limited to a single line.\n * @localizable\n /\n @Prop({ reflect: true })\n status: ValidFileStatus[] = [];\n\n /\n Returns an object representing the selected files with two properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n * @readonly\n /\n @Prop({ mutable: true })\n value: FilesObject = { invalidFiles: [], validFiles: [] };\n\n /\n Determines if the file picker is a browse button or a drop zone with a\n * browse link.\n /\n @Prop({ reflect: true })\n variant: 'browse' \| 'browse-drop' = 'browse';\n\n // #endregion\n // #region Events\n\n /\n Custom event dispatched when the user selects files. The event detail\n * contains an object representing the selected files with two\n * properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n /\n @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: ValidFileStatus[]) {\n newValue.forEach(statusItem => {\n const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n if (matchingQueuedFileIndex > -1) {\n const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n } else {\n const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n file => file.file.name === statusItem.name\n );\n if (matchingDisplayedFileIndex > -1) {\n this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n if (statusItem.status === 'failed' && statusItem.message) {\n this.displayedFiles[matchingDisplayedFileIndex].message = statusItem.message;\n }\n this.disableLoaderIfAllFilesUploaded();\n }\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get actualButtonSize() {\n return this.buttonSize === 'none' ? undefined : this.buttonSize;\n }\n\n get dropZoneClasses() {\n const classes = ['drop-zone'];\n if (this.isDropZoneHighlighted) {\n classes.push('drop-zone-highlighted');\n }\n\n if (this.disabled) {\n classes.push('drop-zone-disabled');\n }\n\n return classes.join(' ');\n }\n\n get fileTypesArray() {\n return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n }\n\n get hasDescription() {\n return !!this.description \|\| this.hasDescriptionSlotContent;\n }\n\n get hasDescriptionSlotContent() {\n return hasSlotContent(this.el, 'description');\n }\n\n get hasLabel() {\n return !!this.label \|\| this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.el, 'label');\n }\n\n buildFilesObject(filesToUpload: File[]): FilesObject {\n const invalidFiles = [];\n invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n this.displayedFiles = [...invalidFiles];\n\n if (filesToUpload.length === 0) {\n this.areFilesUploading = false;\n } else {\n this.queuedFiles = filesToUpload;\n }\n\n return { invalidFiles, validFiles: filesToUpload };\n }\n\n dimDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n };\n\n disableEvent(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n disableLoaderIfAllFilesUploaded() {\n if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n this.areFilesUploading = false;\n }\n }\n\n emitChange(filesObject: FilesObject) {\n this.areFilesUploading = filesObject.validFiles.length > 0;\n this.tctChange.emit(filesObject);\n }\n\n extractFilesOfInvalidTypes(files: File[]) {\n const invalidFiles = [];\n\n if (this.fileTypesArray.length === 0) return invalidFiles;\n\n files.forEach(file => {\n const fileExtension = file.name.split('.').pop().toLowerCase();\n if (!this.fileTypesArray.includes(fileExtension)) {\n invalidFiles.push({ file, status: 'invalid-type' });\n }\n });\n\n // Remove invalid files from the files array\n invalidFiles.forEach(invalidFile => {\n const index = files.indexOf(invalidFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return invalidFiles;\n }\n\n extractFilesOverMaxFilesLimit(files: File[]) {\n const filesOverMaxFilesLimit = [];\n\n if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n if (files.length > this.maxFiles) {\n const excessFiles = files.splice(this.maxFiles);\n excessFiles.forEach(file => {\n filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n });\n }\n\n return filesOverMaxFilesLimit;\n }\n\n extractFilesOverSizeLimit(files: File[]) {\n const filesOverSizeLimit = [];\n\n if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n files.forEach(file => {\n if (file.size > this.maxFileSize) {\n filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n }\n });\n\n // Remove files over size limit from the files array\n filesOverSizeLimit.forEach(overSizeFile => {\n const index = files.indexOf(overSizeFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return filesOverSizeLimit;\n }\n\n forceRerender() {\n this.refreshCounter += 1; // Triggers re-render\n }\n\n getAnimationendHandlerToRemoveFileItem(fileName: string) {\n return (e: AnimationEvent) => {\n if (e.animationName === 'shrinkToCenterFadeOut') {\n this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n }\n };\n }\n\n getClickHandlerToRemoveFileItem(fileName: string) {\n return () => {\n const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n if (fileToDelete) {\n fileToDelete.toBeRemoved = true;\n this.forceRerender();\n }\n };\n }\n\n getFileItemButtonLabel(displayedFile: DisplayedFile) {\n const statusMessage = `Status, ${displayedFile.status === 'uploaded' ? 'uploaded. ' : ''}${this.getFileItemStatusMessage(displayedFile)}`;\n return `Dismiss file item for ${displayedFile.file.name}. ${statusMessage}.`;\n }\n\n getFileItemClasses(fileName: string) {\n const classes = ['file-item'];\n const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n if (matchingFile?.toBeRemoved) {\n classes.push('fade-out');\n } else {\n classes.push('fade-in');\n }\n return classes.join(' ');\n }\n\n getFileItemStatusMessage(displayedFile: DisplayedFile) {\n switch (displayedFile.status) {\n case 'invalid-type':\n return loc('tecton.element.filePicker.unsupportedFileType');\n case 'over-size-limit':\n return loc('tecton.element.filePicker.sizeExceedsLimit');\n case 'over-max-files-limit':\n return loc('tecton.element.filePicker.overMaxFilesLimit');\n case 'in-progress':\n return loc('tecton.element.filePicker.uploadingEllipsis');\n case 'failed':\n if (displayedFile.message) return loc(displayedFile.message);\n return loc('tecton.element.filePicker.uploadFailed');\n case 'uploaded':\n default:\n return loc('tecton.element.filePicker.fileSize', [\n (displayedFile.file.size / (1000 1000)).toFixed(2),\n ]);\n }\n }\n\n grabDroppedFiles = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n const droppedFiles = Array.from(e.dataTransfer.files);\n const filesObject = this.buildFilesObject(droppedFiles);\n\n this.emitChange(filesObject);\n this.value = filesObject;\n };\n\n grabSelectedFiles = (e: Event) => {\n const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n const filesObject = this.buildFilesObject(selectedFiles);\n // Reset the input value to allow re-selection of the same file\n (this.browseButtonInput as HTMLInputElement).value = '';\n\n this.emitChange(filesObject);\n this.value = filesObject;\n };\n\n highlightDropZone = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = true;\n };\n\n launchFileBrowser() {\n this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n }\n\n // #endregion\n // #region Render Methods\n\n render = () => {\n const { disabled } = this;\n return (\n <div class=\"file-picker\">\n {(this.hasLabel \|\| this.hasDescription) && (\n <div class=\"heading\">\n {this.hasLabel && (\n <label\n class=\"label\"\n htmlFor=\"file-field\"\n test-id=\"label\"\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </label>\n )}\n {this.hasDescription && (\n <div\n class=\"description\"\n id=\"description\"\n test-id=\"description\"\n >\n {!!this.description ? (\n loc(this.description)\n ) : this.hasDescriptionSlotContent ? (\n <slot name=\"description\" />\n ) : (\n ''\n )}\n </div>\n )}\n </div>\n )}\n\n {(this.variant === 'browse-drop' && (\n <div\n class={this.dropZoneClasses}\n onDragEnter={this.disableEvent}\n onDragLeave={this.dimDropZone}\n onDragOver={this.highlightDropZone}\n onDrop={this.grabDroppedFiles}\n ref={el => (this.dropZone = el ?? this.dropZone)}\n test-id=\"drop-zone\"\n >\n {(this.areFilesUploading && (\n <Fragment>\n <q2-loading class=\"loading\"></q2-loading>\n <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n </Fragment>\n )) \|\| (\n <Fragment>\n <q2-icon type=\"upload\"></q2-icon>\n <p class=\"drop-zone-text\">\n <q2-link\n label={loc('tecton.element.filePicker.browse')}\n onTctClick={() => this.launchFileBrowser()}\n variant=\"inline\"\n test-id=\"browse-link\"\n disabled={disabled}\n href=\"javascript:void(0)\"\n />\n {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n </p>\n </Fragment>\n )}\n </div>\n )) \|\| (\n <div\n class=\"browse\"\n test-id=\"browse\"\n >\n <q2-btn\n disabled={disabled \|\| this.areFilesUploading}\n intent=\"workflow-primary\"\n loading={this.areFilesUploading}\n onClick={() => this.launchFileBrowser()}\n size={this.actualButtonSize}\n test-id=\"browse-button\"\n >\n <q2-icon type=\"paperclip\"></q2-icon>\n <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n </q2-btn>\n </div>\n )}\n <input\n aria-describedby={(!!this.description && 'description') \|\| undefined}\n class=\"sr\"\n id=\"file-field\"\n onChange={this.grabSelectedFiles}\n ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n type=\"file\"\n test-id=\"file-input\"\n disabled={disabled}\n multiple\n tabIndex={-1}\n />\n <div class=\"file-list-container\">\n <q2-list class=\"file-list\">\n {this.displayedFiles.map(file => (\n <q2-item\n class={this.getFileItemClasses(file.file.name)}\n key={file.file.name}\n onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n >\n <div slot=\"bullet\">\n {file.status === 'invalid-type' \|\|\n file.status === 'over-size-limit' \|\|\n file.status === 'failed' \|\|\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading\n class=\"file-item-loading\"\n hide-from-screen-readers\n ></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div\n class=\"file-item-info\"\n slot=\"body\"\n >\n {this.getFileItemStatusMessage(file)}\n </div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n hide-label=\"true\"\n label={this.getFileItemButtonLabel(file)}\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n disabled={disabled}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-file-picker.js","sourceRoot":"","sources":["../../../../src/components/q2-file-picker/q2-file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype DisplayedFile = {\n file: File;\n message?: string;\n status: ValidFileStatusType \| InvalidFileStatusType;\n toBeRemoved?: boolean;\n};\ntype ValidFileStatusType = 'in-progress' \| 'failed' \| 'uploaded';\ntype InvalidFileStatusType = 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit';\nexport type ValidFileStatus = {\n name: string;\n status: ValidFileStatusType;\n message?: string;\n};\nexport type InvalidFileStatus = {\n file: File;\n status: InvalidFileStatusType;\n};\nexport type FilesObject = {\n invalidFiles: InvalidFileStatus[];\n validFiles: File[];\n};\n\n/*\n @slot label - An optional slot to display a custom label.\n * @slot description - An optional slot to display a custom description.\n /\n@Component({\n tag: 'q2-file-picker',\n styleUrl: 'q2-file-picker.scss',\n shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n // #region Own Properties\n\n private _value: FilesObject = { invalidFiles: [], validFiles: [] };\n browseButtonInput: HTMLElement;\n dropZone: HTMLElement;\n fileItemsToBeDeleted;\n queuedFiles: File[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n el: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n areFilesUploading: boolean = false;\n\n @State()\n displayedFiles: DisplayedFile[] = [];\n\n @State()\n isDropZoneHighlighted: boolean = false;\n\n @State()\n refreshCounter = 0;\n\n // #endregion\n // #region Public Property API\n\n /\n The size of the browse button.\n /\n @Prop({ reflect: true })\n buttonSize: 'none' \| 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n A description of the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Disables the file picker, preventing user interaction.\n /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n * via JavaScript.\n /\n @Prop({ reflect: true })\n fileTypes: string[] \| string = [];\n\n /\n The label for the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of files that can be selected.\n /\n @Prop({ reflect: true })\n // maxFiles: number \| string = Infinity;\n maxFiles: number = Infinity;\n\n /\n The maximum size (in bytes) of any file that can be selected.\n /\n @Prop({ reflect: true })\n maxFileSize: number = Infinity;\n\n /\n An array of `ValidFileStatus` objects representing the upload status of\n * files. Each `ValidFileStatus` object contains the following properties:\n * - `name`: The file name.\n * - `status`: The upload status, either `\"failed\"` or `\"uploaded\"`.\n * - `message`: (Optional) A custom status message, used only when `status`\n * is `\"failed\"`. This allows developers to provide more detail about\n * upload failures while ensuring all other file status messages remain\n * consistent with approved design/UX standards. Custom failure messages\n * are limited to a single line.\n * @localizable\n /\n @Prop({ reflect: true })\n status: ValidFileStatus[] = [];\n\n /\n Returns an object representing the selected files with two properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n * @readonly\n /\n @Prop()\n get value() {\n return this._value;\n }\n\n set value(_) {\n console.error('Setting the value of this component directly is not allowed.');\n }\n\n /\n Determines if the file picker is a browse button or a drop zone with a\n * browse link.\n /\n @Prop({ reflect: true })\n variant: 'browse' \| 'browse-drop' = 'browse';\n\n // #endregion\n // #region Events\n\n /\n Custom event dispatched when the user selects files. The event detail\n * contains an object representing the selected files with two\n * properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n /\n @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: ValidFileStatus[]) {\n newValue.forEach(statusItem => {\n const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n if (matchingQueuedFileIndex > -1) {\n const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n } else {\n const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n file => file.file.name === statusItem.name\n );\n if (matchingDisplayedFileIndex > -1) {\n this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n if (statusItem.status === 'failed' && statusItem.message) {\n this.displayedFiles[matchingDisplayedFileIndex].message = statusItem.message;\n }\n this.disableLoaderIfAllFilesUploaded();\n }\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get actualButtonSize() {\n return this.buttonSize === 'none' ? undefined : this.buttonSize;\n }\n\n get dropZoneClasses() {\n const classes = ['drop-zone'];\n if (this.isDropZoneHighlighted) {\n classes.push('drop-zone-highlighted');\n }\n\n if (this.disabled) {\n classes.push('drop-zone-disabled');\n }\n\n return classes.join(' ');\n }\n\n get fileTypesArray() {\n return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n }\n\n get hasDescription() {\n return !!this.description \|\| this.hasDescriptionSlotContent;\n }\n\n get hasDescriptionSlotContent() {\n return hasSlotContent(this.el, 'description');\n }\n\n get hasLabel() {\n return !!this.label \|\| this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.el, 'label');\n }\n\n buildFilesObject(filesToUpload: File[]): FilesObject {\n const invalidFiles = [];\n invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n this.displayedFiles = [...invalidFiles];\n\n if (filesToUpload.length === 0) {\n this.areFilesUploading = false;\n } else {\n this.queuedFiles = filesToUpload;\n }\n\n return { invalidFiles, validFiles: filesToUpload };\n }\n\n dimDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n };\n\n disableEvent(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n disableLoaderIfAllFilesUploaded() {\n if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n this.areFilesUploading = false;\n }\n }\n\n emitChange(filesObject: FilesObject) {\n this.areFilesUploading = filesObject.validFiles.length > 0;\n this.tctChange.emit(filesObject);\n }\n\n extractFilesOfInvalidTypes(files: File[]) {\n const invalidFiles = [];\n\n if (this.fileTypesArray.length === 0) return invalidFiles;\n\n files.forEach(file => {\n const fileExtension = file.name.split('.').pop().toLowerCase();\n if (!this.fileTypesArray.includes(fileExtension)) {\n invalidFiles.push({ file, status: 'invalid-type' });\n }\n });\n\n // Remove invalid files from the files array\n invalidFiles.forEach(invalidFile => {\n const index = files.indexOf(invalidFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return invalidFiles;\n }\n\n extractFilesOverMaxFilesLimit(files: File[]) {\n const filesOverMaxFilesLimit = [];\n\n if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n if (files.length > this.maxFiles) {\n const excessFiles = files.splice(this.maxFiles);\n excessFiles.forEach(file => {\n filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n });\n }\n\n return filesOverMaxFilesLimit;\n }\n\n extractFilesOverSizeLimit(files: File[]) {\n const filesOverSizeLimit = [];\n\n if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n files.forEach(file => {\n if (file.size > this.maxFileSize) {\n filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n }\n });\n\n // Remove files over size limit from the files array\n filesOverSizeLimit.forEach(overSizeFile => {\n const index = files.indexOf(overSizeFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return filesOverSizeLimit;\n }\n\n forceRerender() {\n this.refreshCounter += 1; // Triggers re-render\n }\n\n getAnimationendHandlerToRemoveFileItem(fileName: string) {\n return (e: AnimationEvent) => {\n if (e.animationName === 'shrinkToCenterFadeOut') {\n this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n }\n };\n }\n\n getClickHandlerToRemoveFileItem(fileName: string) {\n return () => {\n const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n if (fileToDelete) {\n fileToDelete.toBeRemoved = true;\n this.forceRerender();\n }\n };\n }\n\n getFileItemButtonLabel(displayedFile: DisplayedFile) {\n const statusMessage = `Status, ${displayedFile.status === 'uploaded' ? 'uploaded. ' : ''}${this.getFileItemStatusMessage(displayedFile)}`;\n return `Dismiss file item for ${displayedFile.file.name}. ${statusMessage}.`;\n }\n\n getFileItemClasses(fileName: string) {\n const classes = ['file-item'];\n const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n if (matchingFile?.toBeRemoved) {\n classes.push('fade-out');\n } else {\n classes.push('fade-in');\n }\n return classes.join(' ');\n }\n\n getFileItemStatusMessage(displayedFile: DisplayedFile) {\n switch (displayedFile.status) {\n case 'invalid-type':\n return loc('tecton.element.filePicker.unsupportedFileType');\n case 'over-size-limit':\n return loc('tecton.element.filePicker.sizeExceedsLimit');\n case 'over-max-files-limit':\n return loc('tecton.element.filePicker.overMaxFilesLimit');\n case 'in-progress':\n return loc('tecton.element.filePicker.uploadingEllipsis');\n case 'failed':\n if (displayedFile.message) return loc(displayedFile.message);\n return loc('tecton.element.filePicker.uploadFailed');\n case 'uploaded':\n default:\n return loc('tecton.element.filePicker.fileSize', [\n (displayedFile.file.size / (1000 1000)).toFixed(2),\n ]);\n }\n }\n\n grabDroppedFiles = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n const droppedFiles = Array.from(e.dataTransfer.files);\n const filesObject = this.buildFilesObject(droppedFiles);\n\n this.emitChange(filesObject);\n this._value = filesObject;\n };\n\n grabSelectedFiles = (e: Event) => {\n const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n const filesObject = this.buildFilesObject(selectedFiles);\n // Reset the input value to allow re-selection of the same file\n (this.browseButtonInput as HTMLInputElement).value = '';\n\n this.emitChange(filesObject);\n this._value = filesObject;\n };\n\n highlightDropZone = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = true;\n };\n\n launchFileBrowser() {\n this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n }\n\n // #endregion\n // #region Render Methods\n\n render = () => {\n const { disabled } = this;\n return (\n <div class=\"file-picker\">\n {(this.hasLabel \|\| this.hasDescription) && (\n <div class=\"heading\">\n {this.hasLabel && (\n <label\n class=\"label\"\n htmlFor=\"file-field\"\n test-id=\"label\"\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </label>\n )}\n {this.hasDescription && (\n <div\n class=\"description\"\n id=\"description\"\n test-id=\"description\"\n >\n {!!this.description ? (\n loc(this.description)\n ) : this.hasDescriptionSlotContent ? (\n <slot name=\"description\" />\n ) : (\n ''\n )}\n </div>\n )}\n </div>\n )}\n\n {(this.variant === 'browse-drop' && (\n <div\n class={this.dropZoneClasses}\n onDragEnter={this.disableEvent}\n onDragLeave={this.dimDropZone}\n onDragOver={this.highlightDropZone}\n onDrop={this.grabDroppedFiles}\n ref={el => (this.dropZone = el ?? this.dropZone)}\n test-id=\"drop-zone\"\n >\n {(this.areFilesUploading && (\n <Fragment>\n <q2-loading class=\"loading\"></q2-loading>\n <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n </Fragment>\n )) \|\| (\n <Fragment>\n <q2-icon type=\"upload\"></q2-icon>\n <p class=\"drop-zone-text\">\n <q2-link\n label={loc('tecton.element.filePicker.browse')}\n onTctClick={() => this.launchFileBrowser()}\n variant=\"inline\"\n test-id=\"browse-link\"\n disabled={disabled}\n href=\"javascript:void(0)\"\n />\n {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n </p>\n </Fragment>\n )}\n </div>\n )) \|\| (\n <div\n class=\"browse\"\n test-id=\"browse\"\n >\n <q2-btn\n disabled={disabled \|\| this.areFilesUploading}\n intent=\"workflow-primary\"\n loading={this.areFilesUploading}\n onClick={() => this.launchFileBrowser()}\n size={this.actualButtonSize}\n test-id=\"browse-button\"\n >\n <q2-icon type=\"paperclip\"></q2-icon>\n <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n </q2-btn>\n </div>\n )}\n <input\n aria-describedby={(!!this.description && 'description') \|\| undefined}\n class=\"sr\"\n id=\"file-field\"\n onChange={this.grabSelectedFiles}\n ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n type=\"file\"\n test-id=\"file-input\"\n disabled={disabled}\n multiple\n tabIndex={-1}\n />\n <div class=\"file-list-container\">\n <q2-list class=\"file-list\">\n {this.displayedFiles.map(file => (\n <q2-item\n class={this.getFileItemClasses(file.file.name)}\n key={file.file.name}\n onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n >\n <div slot=\"bullet\">\n {file.status === 'invalid-type' \|\|\n file.status === 'over-size-limit' \|\|\n file.status === 'failed' \|\|\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading\n class=\"file-item-loading\"\n hide-from-screen-readers\n ></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div\n class=\"file-item-info\"\n slot=\"body\"\n >\n {this.getFileItemStatusMessage(file)}\n </div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n hide-label=\"true\"\n label={this.getFileItemButtonLabel(file)}\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n disabled={disabled}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js CHANGED Viewed

@@ -3,6 +3,12 @@ export class Q2FormattedText {
     constructor() {
         // #endregion
         // #region Public Property API
+        /**
+         * The format style for the number.
+         * - `decimal`: Standard number formatting, locale-aware (default).
+         * - `percent`: Percentage formatting, locale-aware.
+         */
+        this.format = 'decimal';
         /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */
         this.locale = document.documentElement.lang || 'en-US';
         /** The maximum number of fraction digits to use.  */
@@ -21,12 +27,6 @@ export class Q2FormattedText {
          * - `never`: Never display the sign.
          */
         this.signDisplay = 'auto';
-        /**
-         * The format style for the number.
-         * - `decimal`: Standard number formatting, locale-aware (default).
-         * - `percent`: Percentage formatting, locale-aware.
-         */
-        this.format = 'decimal';
     }
     // #endregion
     // #region Component Lifecycle Events
@@ -66,7 +66,7 @@ export class Q2FormattedText {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '1274a8a0dd15b93bb1748ea17b12a3dbe148a0ca', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '6fe7e20ecf26a5b1e24966360646aeb6f6526f1e' }, this.formattedValue)));
+        return (h("div", { key: 'b63b5b968494e1a5eb11cb9c3dbfb7827bceef63', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '38c1bc1955c771046d71504a82a6a4e6ab532274' }, this.formattedValue)));
     }
     static get is() { return "q2-formatted-text"; }
     static get encapsulation() { return "shadow"; }
@@ -82,6 +82,26 @@ export class Q2FormattedText {
     }
     static get properties() {
         return {
+            "format": {
+                "type": "string",
+                "attribute": "format",
+                "mutable": false,
+                "complexType": {
+                    "original": "'decimal' | 'percent'",
+                    "resolved": "\"decimal\" | \"percent\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The format style for the number.\n- `decimal`: Standard number formatting, locale-aware (default).\n- `percent`: Percentage formatting, locale-aware."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'decimal'"
+            },
             "locale": {
                 "type": "string",
                 "attribute": "locale",
@@ -241,26 +261,6 @@ export class Q2FormattedText {
                 "getter": false,
                 "setter": false,
                 "reflect": true
-            },
-            "format": {
-                "type": "string",
-                "attribute": "format",
-                "mutable": false,
-                "complexType": {
-                    "original": "'decimal' | 'percent'",
-                    "resolved": "\"decimal\" | \"percent\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The format style for the number.\n- `decimal`: Standard number formatting, locale-aware (default).\n- `percent`: Percentage formatting, locale-aware."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'decimal'"
             }
         };
     }

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-formatted-text.js","sourceRoot":"","sources":["../../../../src/components/q2-formatted-text/q2-formatted-text.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AAE9E,MAAM,OAAO,eAAe;IAD5B;QAOI,aAAa;QACb,8BAA8B;QAE9B,sGAAsG;QAEtG,WAAM,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO,CAAC;QAErE,qDAAqD;QAErD,0BAAqB,GAAW,CAAC,CAAC;QAElC,qDAAqD;QAErD,0BAAqB,GAAW,CAAC,CAAC;QAElC,oDAAoD;QAEpD,yBAAoB,GAAW,CAAC,CAAC;QAEjC;;;;;;;;WAQG;QAEH,gBAAW,GAA+C,MAAM,CAAC;~~QAcjE;;;;WAIG~~;~~QAEH,WAAM,GAA0B,SAAS,CAAC;KA+D7C;~~IA7DG,aAAa;IACb,qCAAqC;IAErC,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IACb,mBAAmB;IAQnB,YAAY;QACR,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,oBAAoB;QACpB,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxD,IAAI,CAAC,CAAC,SAAS;YAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC;QAC7D,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED,WAAW;QACP,MAAM,OAAO,~~GAAe~~;~~YACxB~~,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;YAAE,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAChG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;YAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;QACnG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;YAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;QAEnG,gHAAgH;QAChH,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAChF,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE,CAAC;IACnG,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;QAEtC,OAAO,CACH,4DACI,KAAK,EAAE,oBAAoB,gBACf,IAAI,CAAC,cAAc;YAE/B,+DAAO,IAAI,CAAC,cAAc,CAAQ,CAChC,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { ~~IDict } from '@/util';\nimport {~~ Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /** @private The formatted text to display /\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /* The maximum number of fraction digits to use. /\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /* The minimum number of fraction digits to use. /\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /* The minimum number of integer digits to use. /\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'never' \| 'auto' \| 'always' \| 'exceptZero' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' \| undefined;\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /* The value you want formatted. /\n @Prop({ reflect: true })\n value: number;\n\n /\n The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n */\n @Prop({ reflect: true })\n format: 'decimal' \| 'percent' = 'decimal';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: ~~IDict~~<any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-formatted-text.js","sourceRoot":"","sources":["../../../../src/components/q2-formatted-text/q2-formatted-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AAE9E,MAAM,OAAO,eAAe;IAD5B;QAOI,aAAa;QACb,8BAA8B;QAE9B;;;;WAIG;QAEH,WAAM,GAA0B,SAAS,CAAC;QAE1C,sGAAsG;QAEtG,WAAM,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO,CAAC;QAErE,qDAAqD;QAErD,0BAAqB,GAAW,CAAC,CAAC;QAElC,qDAAqD;QAErD,0BAAqB,GAAW,CAAC,CAAC;QAElC,oDAAoD;QAEpD,yBAAoB,GAAW,CAAC,CAAC;QAEjC;;;;;;;;WAQG;QAEH,gBAAW,GAA+C,MAAM,CAAC;KA2EpE;IA7DG,aAAa;IACb,qCAAqC;IAErC,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IACb,mBAAmB;IAQnB,YAAY;QACR,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,oBAAoB;QACpB,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxD,IAAI,CAAC,CAAC,SAAS;YAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC;QAC7D,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED,WAAW;QACP,MAAM,OAAO,GAAwB;YACjC,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;YAAE,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAChG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;YAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;QACnG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;YAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;QAEnG,gHAAgH;QAChH,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAChF,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE,CAAC;IACnG,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;QAEtC,OAAO,CACH,4DACI,KAAK,EAAE,oBAAoB,gBACf,IAAI,CAAC,cAAc;YAE/B,+DAAO,IAAI,CAAC,cAAc,CAAQ,CAChC,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /** @private The formatted text to display /\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /\n The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n /\n @Prop({ reflect: true })\n format: 'decimal' \| 'percent' = 'decimal';\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /* The maximum number of fraction digits to use. /\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /* The minimum number of fraction digits to use. /\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /* The minimum number of integer digits to use. /\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'never' \| 'auto' \| 'always' \| 'exceptZero' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' \| undefined;\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /* The value you want formatted. */\n @Prop({ reflect: true })\n value: number;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: Record<string, any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"]}