@aquera/nile-elements 0.1.67-beta-1.7 → 0.1.67-beta-1.9

package/dist/src/nile-option-group/nile-option-group.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-option-group.css';
+import NileElement from '../internal/nile-element';
+let NileOptionGroup = class NileOptionGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.data = null;
+    }
+    static get styles() {
+        return [styles];
+    }
+    checkForImageOrIcon() {
+        return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;
+    }
+    normalizeImageDimension(value) {
+        if (value === undefined || value === null || value === "") {
+            return "20";
+        }
+        const dimension = Number(value);
+        if (isNaN(dimension) || dimension <= 0) {
+            return "20";
+        }
+        return dimension > 40 ? "25" : dimension.toString();
+    }
+    render() {
+        return html `
+			<div part="option-group-header" class="option-group-header">
+				<div part="content-container" class="content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}">
+					<!-- prefix content -->
+					${this.data?.prefix?.icon?.name
+            ? html `<nile-icon name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}"></nile-icon>`
+            : this.data?.prefix?.prefixText
+                ? html `<span>${this.data?.prefix?.prefixText}</span>`
+                : this.data?.prefix?.image?.src
+                    ? html `<img src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`
+                    : html `<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`}
+
+					<!-- main content -->
+					${this.data?.textContent
+            ? html `<span>${this.data?.textContent}</span>`
+            : html `<slot part="content"></slot>`}
+				</div>
+
+				<!-- suffix content -->
+				${this.data?.suffix?.icon?.name
+            ? html `<nile-icon name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size || "16"}" color="${this.data?.suffix?.icon?.color || "var(--nile-colors-dark-500)"}"></nile-icon>`
+            : this.data?.suffix?.suffixText
+                ? html `<span>${this.data?.suffix?.suffixText}</span>`
+                : this.data?.suffix?.image?.src
+                    ? html `<img src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`
+                    : html `<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`}
+			</div>
+			`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileOptionGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: Object, attribute: true })
+], NileOptionGroup.prototype, "data", void 0);
+NileOptionGroup = __decorate([
+    customElement('nile-option-group')
+], NileOptionGroup);
+export { NileOptionGroup };
+export default NileOptionGroup;
+//# sourceMappingURL=nile-option-group.js.map

package/dist/src/nile-option-group/nile-option-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-option-group.js","sourceRoot":"","sources":["../../../src/nile-option-group/nile-option-group.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-option-group.css';\nimport NileElement from '../internal/nile-element';\nimport { OptionGroupData } from './nile-option-group.interface';\n\n@customElement('nile-option-group')\nexport class NileOptionGroup extends NileElement {\n\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t@property({type: String, reflect: true, attribute: true}) name: string = \"\";\n\t@property({type: Object, attribute: true}) data: OptionGroupData | null = null;\n\n\tprivate checkForImageOrIcon() {\n\t\treturn this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;\n\t}\n\n\tprivate normalizeImageDimension(value?: string | number): string {\n\t\tif (value === undefined || value === null || value === \"\") {\n\t\t\treturn \"20\";\n\t\t}\n\t\t\n\t\tconst dimension = Number(value);\n\t\tif (isNaN(dimension) || dimension <= 0) {\n\t\t\treturn \"20\";\n\t\t}\t\n\t\treturn dimension > 40 ? \"25\" : dimension.toString();\n\t}\t\n\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div part=\"option-group-header\" class=\"option-group-header\">\n\t\t\t\t<div part=\"content-container\" class=\"content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}\">\n\t\t\t\t\t<!-- prefix content -->\n\t\t\t\t\t${\n\t\t\t\t\t\tthis.data?.prefix?.icon?.name\n\t\t\t\t\t\t? html`<nile-icon name=\"${this.data?.prefix?.icon?.name}\" size=\"${this.data?.prefix?.icon?.size || \"16\"}\" color=\"${this.data?.prefix?.icon?.color || \"var(--nile-colors-dark-500)\"}\"></nile-icon>`\n\t\t\t\t\t\t: this.data?.prefix?.prefixText\n\t\t\t\t\t\t\t? html`<span>${this.data?.prefix?.prefixText}</span>`\n\t\t\t\t\t\t\t: this.data?.prefix?.image?.src\n\t\t\t\t\t\t\t\t? html`<img src=\"${this.data?.prefix?.image?.src}\" width=\"${this.normalizeImageDimension(this.data?.prefix?.image?.width)}\" height=\"${this.normalizeImageDimension(this.data?.prefix?.image?.height)}\">`\n\t\t\t\t\t\t\t\t: html`<slot part=\"prefix\" name=\"prefix\" class=\"option-group-prefix\"></slot>`\n\t\t\t\t\t}\n\n\t\t\t\t\t<!-- main content -->\n\t\t\t\t\t${\n\t\t\t\t\t\tthis.data?.textContent\n\t\t\t\t\t\t? html`<span>${this.data?.textContent}</span>`\n\t\t\t\t\t\t: html`<slot part=\"content\"></slot>`\n\t\t\t\t\t}\n\t\t\t\t</div>\n\n\t\t\t\t<!-- suffix content -->\n\t\t\t\t${\n\t\t\t\t\tthis.data?.suffix?.icon?.name\n\t\t\t\t\t? html`<nile-icon name=\"${this.data?.suffix?.icon?.name}\" size=\"${this.data?.suffix?.icon?.size || \"16\"}\" color=\"${this.data?.suffix?.icon?.color || \"var(--nile-colors-dark-500)\"}\"></nile-icon>`\n\t\t\t\t\t: this.data?.suffix?.suffixText\n\t\t\t\t\t\t? html`<span>${this.data?.suffix?.suffixText}</span>`\n\t\t\t\t\t\t: this.data?.suffix?.image?.src\n\t\t\t\t\t\t\t? html`<img src=\"${this.data?.prefix?.image?.src}\" width=\"${this.normalizeImageDimension(this.data?.suffix?.image?.width)}\" height=\"${this.normalizeImageDimension(this.data?.suffix?.image?.height)}\">`\n\t\t\t\t\t\t\t: html`<slot part=\"suffix\" name=\"suffix\" class=\"option-group-suffix\"></slot>`\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t`;\n\t}\n}\n\nexport default NileOptionGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option-group': NileOptionGroup;\n  }\n}"]}

package/dist/src/nile-option-header/index.d.ts

@@ -0,0 +1 @@
+export { NileOptionHeader } from './nile-option-header';

package/dist/src/nile-option-header/index.js

@@ -0,0 +1,2 @@
+export { NileOptionHeader } from './nile-option-header';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-option-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-option-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { NileOptionHeader } from './nile-option-header';"]}

package/dist/src/nile-option-header/nile-option-header.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * OptionHeader CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-option-header/nile-option-header.css.js

@@ -0,0 +1,30 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * OptionHeader CSS
+ */
+export const styles = css `
+	:host {
+
+	}
+
+	.option-header {
+		height: 40px;
+		display: flex;
+		align-items: center;
+		padding: 0px 12px;
+		background-color: var(--nile-colors-dark-200);
+		color: var(--nile-colors-dark-900);
+		font-feature-settings: 'liga' off, 'clig' off;
+		font-family: colfax-medium;
+		font-size: 14px;
+		font-weight: 400;
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-option-header.css.js.map

package/dist/src/nile-option-header/nile-option-header.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-option-header.css.js","sourceRoot":"","sources":["../../../src/nile-option-header/nile-option-header.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * OptionHeader CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n\n\t.option-header {\n\t\theight: 40px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: 0px 12px;\n\t\tbackground-color: var(--nile-colors-dark-200);\n\t\tcolor: var(--nile-colors-dark-900);\n\t\tfont-feature-settings: 'liga' off, 'clig' off;\n\t\tfont-family: colfax-medium;\n\t\tfont-size: 14px;\n\t\tfont-weight: 400;\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-option-header/nile-option-header.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile option-header component.
+ *
+ * @tag nile-option-header
+ *
+ */
+export declare class NileOptionHeader extends NileElement {
+    /**
+     * The styles for nile-option-header
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    group: string;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileOptionHeader;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-option-header': NileOptionHeader;
+    }
+}

package/dist/src/nile-option-header/nile-option-header.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-option-header.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile option-header component.
+ *
+ * @tag nile-option-header
+ *
+ */
+let NileOptionHeader = class NileOptionHeader extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.group = '';
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-option-header
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<div class="option-header" part="option-header">
+				<slot></slot>
+			</div>
+			`;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileOptionHeader.prototype, "group", void 0);
+NileOptionHeader = __decorate([
+    customElement('nile-option-header')
+], NileOptionHeader);
+export { NileOptionHeader };
+export default NileOptionHeader;
+//# sourceMappingURL=nile-option-header.js.map

package/dist/src/nile-option-header/nile-option-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-option-header.js","sourceRoot":"","sources":["../../../src/nile-option-header/nile-option-header.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAUoB,UAAK,GAAW,EAAE,CAAC;QAc7C,gBAAgB;IACjB,CAAC;IAvBA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAID;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;;;;IAIT,CAAC;IACJ,CAAC;CAGD,CAAA;AAf0B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAoB;AAVjC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAyB5B;;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, property} from 'lit/decorators.js';\nimport {styles} from './nile-option-header.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile option-header component.\n *\n * @tag nile-option-header\n *\n */\n@customElement('nile-option-header')\nexport class NileOptionHeader extends NileElement {\n\n\t/**\n\t * The styles for nile-option-header\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t@property({type: String}) group: string = '';\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=\"option-header\" part=\"option-header\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileOptionHeader;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option-header': NileOptionHeader;\n  }\n}"]}

package/dist/src/nile-select/nile-select.d.ts

@@ -159,6 +159,8 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     renderItemConfig?: RenderItemConfig;
     data: any;
     enableVirtualScroll: boolean;
+    /** To enable the group header in the select */
+    enableGroupHeader: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -214,6 +216,10 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     handleDisabledChange(): void;
     handleValueChange(): void;
     handleOpenChange(): Promise<void>;
+    private getAllGroupAttributes;
+    getUniqueGroupNames(arr: NileOption[]): string[];
+    handleGroupSearchChange(): void;
+    handleGroupShowSelected(): void;
     /** Shows the listbox. */
     show(): Promise<void>;
     /** Hides the listbox. */

package/dist/src/nile-select/nile-select.interface.d.ts

@@ -0,0 +1,5 @@
+export interface GroupAttributes {
+    name: string;
+    data: any;
+    element: HTMLElement;
+}

package/dist/src/nile-select/nile-select.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nile-select.interface.js.map

package/dist/src/nile-select/nile-select.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-select.interface.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface GroupAttributes {\n  name: string;\n  data: any;\n  element: HTMLElement;\n}"]}

package/dist/src/nile-select/nile-select.js

@@ -169,6 +169,8 @@ let NileSelect = class NileSelect extends NileElement {
         this.noResultsMessage = 'No results found';
         this.data = [];
         this.enableVirtualScroll = false;
+        /** To enable the group header in the select */
+        this.enableGroupHeader = false;
         this.options = [];
     }
     connectedCallback() {
@@ -196,6 +198,9 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     firstUpdated(_changedProperties) {
+        if (this.enableGroupHeader) {
+            this.handleGroupSearchChange();
+        }
         if (_changedProperties.has('multiple')) {
             this.setCheckBoxInOption(this.multiple);
         }
@@ -262,6 +267,9 @@ let NileSelect = class NileSelect extends NileElement {
                 el.hidden = this.showSelected;
             }
         });
+        if (this.enableGroupHeader) {
+            this.handleGroupShowSelected();
+        }
         // this.requestUpdate();
     }
     /**
@@ -274,6 +282,9 @@ let NileSelect = class NileSelect extends NileElement {
             el.selected = false;
             el.hidden = false;
         });
+        if (this.enableGroupHeader) {
+            this.handleGroupShowSelected();
+        }
         this.value = '';
         this.selectionChanged();
         this.emit('nile-change', { value: this.value, name: this.name });
@@ -391,6 +402,9 @@ let NileSelect = class NileSelect extends NileElement {
             this.showSelected = false;
             this.value = '';
             this.displayInput.focus({ preventScroll: true });
+            if (this.enableGroupHeader) {
+                this.handleGroupShowSelected();
+            }
             // Emit after update
             this.updateComplete.then(() => {
                 const val = { value: this.multiple ? this.value : '', name: this.name };
@@ -443,6 +457,9 @@ let NileSelect = class NileSelect extends NileElement {
                     el.hidden = this.showSelected;
                 }
             });
+            if (this.enableGroupHeader) {
+                this.handleGroupShowSelected();
+            }
             this.requestUpdate();
         }
     }
@@ -473,6 +490,9 @@ let NileSelect = class NileSelect extends NileElement {
                     el.hidden = this.showSelected;
                 }
             });
+            if (this.enableGroupHeader) {
+                this.handleGroupShowSelected();
+            }
             // Emit after updating
             this.updateComplete.then(() => {
                 this.nileInput({ value: this.value, name: this.name });
@@ -616,6 +636,9 @@ let NileSelect = class NileSelect extends NileElement {
     }
     handleSearchChange(e) {
         this.searchValue = e.detail.value;
+        if (this.enableGroupHeader) {
+            this.handleGroupSearchChange();
+        }
         if (!this.disableLocalSearch) {
             let filteredOptions = this.filterOptions(this.searchValue);
             if (filteredOptions.length === 0) {
@@ -666,8 +689,12 @@ let NileSelect = class NileSelect extends NileElement {
         if (this.open && !this.disabled) {
             // Reset the current option
             this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
-            // Show
             this.emit('nile-show', { value: this.value, name: this.name });
+            if (this.enableGroupHeader) {
+                this.getAllGroupAttributes().forEach((el) => {
+                    el.element.classList.remove('nile-group-hidden');
+                });
+            }
             this.addOpenListeners();
             this.showNoResults = !this.getAllOptions()?.length;
             await stopAnimations(this);
@@ -705,6 +732,34 @@ let NileSelect = class NileSelect extends NileElement {
             this.emit('nile-after-hide', { value: this.value, name: this.name });
         }
     }
+    getAllGroupAttributes() {
+        return Array.from(this.querySelectorAll('nile-option-group[name]')).map((el) => ({
+            name: el?.getAttribute('name') || '',
+            data: el?.getAttribute('data'),
+            element: el
+        }));
+    }
+    getUniqueGroupNames(arr) {
+        return Array.from(new Set(arr.map(obj => obj?.groupName)));
+    }
+    handleGroupSearchChange() {
+        const filtered = new Set(this.getUniqueGroupNames(this.filterOptions(this.searchValue)));
+        this.getAllGroupAttributes().forEach(({ name, element }) => {
+            element?.classList.toggle('nile-group-hidden', !filtered.has(name));
+        });
+    }
+    handleGroupShowSelected() {
+        const visibleGroups = new Set();
+        if (this.showSelected) {
+            this.getAllOptions().forEach((option) => {
+                if (!option.hidden)
+                    visibleGroups.add(option.groupName);
+            });
+        }
+        this.getAllGroupAttributes().forEach(({ name, element }) => {
+            element?.classList.toggle('nile-group-hidden', this.showSelected && !visibleGroups.has(name));
+        });
+    }
     /** Shows the listbox. */
     async show() {
         if (this.open || this.disabled) {
@@ -1282,6 +1337,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileSelect.prototype, "enableVirtualScroll", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSelect.prototype, "enableGroupHeader", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleDisabledChange", null);