@duetds/components 8.0.6 → 8.1.0

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -4,133 +4,133 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetCookieConsent {
-  constructor() {
-    this.handleClick = e => {
-      e.preventDefault();
-      this.duetCookieConsent.emit({ component: "duet-cookie-consent" });
-    };
-    this.accessibleLabel = "Hyväksyn evästeiden käytön";
-    this.theme = "";
-  }
-  handleFocusIn(event) {
-    const eventPath = event.composedPath();
-    const actualEventTarget = eventPath[0];
-    if (actualEventTarget !== this.element) {
-      this.element.classList.add("descendant-focused");
+    constructor() {
+        this.handleClick = e => {
+            e.preventDefault();
+            this.duetCookieConsent.emit({ component: "duet-cookie-consent" });
+        };
+        this.accessibleLabel = "Hyväksyn evästeiden käytön";
+        this.theme = "";
     }
-  }
-  handleFocusOut() {
-    this.element.classList.remove("descendant-focused");
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   * render() function.
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: "duet-cookie-consent-content" }, h("div", { class: "expand" }, h("slot", null)), h("duet-spacer", { size: "large", direction: "horizontal" }), h("div", null, h("duet-button", { variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
-  }
-  static get is() { return "duet-cookie-consent"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-cookie-consent.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-cookie-consent.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "accessibleLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds accessible label for the cookie consent ok button."
-        },
-        "attribute": "accessible-label",
-        "reflect": false,
-        "defaultValue": "\"Hyv\u00E4ksyn ev\u00E4steiden k\u00E4yt\u00F6n\""
-      },
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the cookie consent banner."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetCookieConsent",
-        "name": "duetCookieConsent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the consent button has been clicked."
-        },
-        "complexType": {
-          "original": "DuetCookieConsentEvent",
-          "resolved": "{ component: \"duet-cookie-consent\"; }",
-          "references": {
-            "DuetCookieConsentEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
-              "id": "src/components/duet-cookie-consent/duet-cookie-consent.tsx::DuetCookieConsentEvent"
-            }
-          }
+    handleFocusIn(event) {
+        const eventPath = event.composedPath();
+        const actualEventTarget = eventPath[0];
+        if (actualEventTarget !== this.element) {
+            this.element.classList.add("descendant-focused");
         }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get listeners() {
-    return [{
-        "name": "focusin",
-        "method": "handleFocusIn",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focusout",
-        "method": "handleFocusOut",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    handleFocusOut() {
+        this.element.classList.remove("descendant-focused");
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * render() function.
+     * Always the last one in the class.
+     */
+    render() {
+        return (h(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: "duet-cookie-consent-content" }, h("div", { class: "expand" }, h("slot", null)), h("duet-spacer", { size: "large", direction: "horizontal" }), h("div", null, h("duet-button", { variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+    }
+    static get is() { return "duet-cookie-consent"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-cookie-consent.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-cookie-consent.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the cookie consent ok button."
+                },
+                "attribute": "accessible-label",
+                "reflect": false,
+                "defaultValue": "\"Hyv\u00E4ksyn ev\u00E4steiden k\u00E4yt\u00F6n\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the cookie consent banner."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetCookieConsent",
+                "name": "duetCookieConsent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the consent button has been clicked."
+                },
+                "complexType": {
+                    "original": "DuetCookieConsentEvent",
+                    "resolved": "{ component: \"duet-cookie-consent\"; }",
+                    "references": {
+                        "DuetCookieConsentEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
+                            "id": "src/components/duet-cookie-consent/duet-cookie-consent.tsx::DuetCookieConsentEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/lib/collection/components/duet-date-picker/date-i18n.js

@@ -4,102 +4,102 @@
 const formatOptionsShort = { day: "numeric", month: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
 const i18n = {
-  fi: {
-    buttonLabel: "Valitse päivämäärä",
-    prevMonthLabel: "Edellinen kuukausi",
-    nextMonthLabel: "Seuraava kuukausi",
-    monthSelectLabel: "Kuukausi",
-    yearSelectLabel: "Vuosi",
-    closeLabel: "Sulje ikkuna",
-    selected: "Valittu päivämäärä on",
-    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
-    dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
-    monthLabels: [
-      "Tammikuu",
-      "Helmikuu",
-      "Maaliskuu",
-      "Huhtikuu",
-      "Toukokuu",
-      "Kesäkuu",
-      "Heinäkuu",
-      "Elokuu",
-      "Syyskuu",
-      "Lokakuu",
-      "Marraskuu",
-      "Joulukuu",
-    ],
-    monthLabelsShort: [
-      "Tammi",
-      "Helmi",
-      "Maalis",
-      "Huhti",
-      "Touko",
-      "Kesä",
-      "Heinä",
-      "Elo",
-      "Syys",
-      "Loka",
-      "Marras",
-      "Joulu",
-    ],
-    formatterShort: new Intl.DateTimeFormat("fi-FI", formatOptionsShort),
-    formatterLong: new Intl.DateTimeFormat("fi-FI", formatOptionsLong),
-  },
-  en: {
-    buttonLabel: "Choose date",
-    prevMonthLabel: "Previous month",
-    nextMonthLabel: "Next month",
-    monthSelectLabel: "Month",
-    yearSelectLabel: "Year",
-    closeLabel: "Close window",
-    selected: "Selected date is",
-    keyboardInstruction: "You can use arrow keys to navigate dates",
-    dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
-    monthLabels: [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December",
-    ],
-    monthLabelsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-    formatterShort: new Intl.DateTimeFormat("en-GB", formatOptionsShort),
-    formatterLong: new Intl.DateTimeFormat("en-GB", formatOptionsLong),
-  },
-  sv: {
-    buttonLabel: "Välj datum",
-    prevMonthLabel: "Föregående månad",
-    nextMonthLabel: "Nästa månad",
-    monthSelectLabel: "Månad",
-    yearSelectLabel: "År",
-    closeLabel: "Stäng fönstret",
-    selected: "Valt datum är",
-    keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
-    dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
-    monthLabels: [
-      "Januari",
-      "Februari",
-      "Mars",
-      "April",
-      "Maj",
-      "Juni",
-      "Juli",
-      "Augusti",
-      "September",
-      "Oktober",
-      "November",
-      "December",
-    ],
-    monthLabelsShort: ["Jan", "Feb", "Mars", "April", "Maj", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dec"],
-    formatterShort: new Intl.DateTimeFormat("sv-SE", formatOptionsShort),
-    formatterLong: new Intl.DateTimeFormat("sv-SE", formatOptionsLong),
-  },
+    fi: {
+        buttonLabel: "Valitse päivämäärä",
+        prevMonthLabel: "Edellinen kuukausi",
+        nextMonthLabel: "Seuraava kuukausi",
+        monthSelectLabel: "Kuukausi",
+        yearSelectLabel: "Vuosi",
+        closeLabel: "Sulje ikkuna",
+        selected: "Valittu päivämäärä on",
+        keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
+        dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
+        monthLabels: [
+            "Tammikuu",
+            "Helmikuu",
+            "Maaliskuu",
+            "Huhtikuu",
+            "Toukokuu",
+            "Kesäkuu",
+            "Heinäkuu",
+            "Elokuu",
+            "Syyskuu",
+            "Lokakuu",
+            "Marraskuu",
+            "Joulukuu",
+        ],
+        monthLabelsShort: [
+            "Tammi",
+            "Helmi",
+            "Maalis",
+            "Huhti",
+            "Touko",
+            "Kesä",
+            "Heinä",
+            "Elo",
+            "Syys",
+            "Loka",
+            "Marras",
+            "Joulu",
+        ],
+        formatterShort: new Intl.DateTimeFormat("fi-FI", formatOptionsShort),
+        formatterLong: new Intl.DateTimeFormat("fi-FI", formatOptionsLong),
+    },
+    en: {
+        buttonLabel: "Choose date",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        monthSelectLabel: "Month",
+        yearSelectLabel: "Year",
+        closeLabel: "Close window",
+        selected: "Selected date is",
+        keyboardInstruction: "You can use arrow keys to navigate dates",
+        dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+        monthLabels: [
+            "January",
+            "February",
+            "March",
+            "April",
+            "May",
+            "June",
+            "July",
+            "August",
+            "September",
+            "October",
+            "November",
+            "December",
+        ],
+        monthLabelsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        formatterShort: new Intl.DateTimeFormat("en-GB", formatOptionsShort),
+        formatterLong: new Intl.DateTimeFormat("en-GB", formatOptionsLong),
+    },
+    sv: {
+        buttonLabel: "Välj datum",
+        prevMonthLabel: "Föregående månad",
+        nextMonthLabel: "Nästa månad",
+        monthSelectLabel: "Månad",
+        yearSelectLabel: "År",
+        closeLabel: "Stäng fönstret",
+        selected: "Valt datum är",
+        keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
+        dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
+        monthLabels: [
+            "Januari",
+            "Februari",
+            "Mars",
+            "April",
+            "Maj",
+            "Juni",
+            "Juli",
+            "Augusti",
+            "September",
+            "Oktober",
+            "November",
+            "December",
+        ],
+        monthLabelsShort: ["Jan", "Feb", "Mars", "April", "Maj", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dec"],
+        formatterShort: new Intl.DateTimeFormat("sv-SE", formatOptionsShort),
+        formatterLong: new Intl.DateTimeFormat("sv-SE", formatOptionsLong),
+    },
 };
 export default i18n;

package/lib/collection/components/duet-date-picker/date-picker-day.js

@@ -5,13 +5,13 @@ import { h } from "@stencil/core";
 import i18n from "./date-i18n";
 import { isEqual } from "./date-utils";
 export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
-  const isToday = isEqual(day, today);
-  const isFocused = isEqual(day, focusedDay);
-  const isDisabled = day.getMonth() !== focusedDay.getMonth();
-  const isOutsideRange = !inRange;
-  const { formatterShort } = i18n[language];
-  function handleClick(e) {
-    onDaySelect(e, day);
-  }
-  return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref }, h("span", { "aria-hidden": "true" }, day.getDate()), h("duet-visually-hidden", null, formatterShort.format(day))));
+    const isToday = isEqual(day, today);
+    const isFocused = isEqual(day, focusedDay);
+    const isDisabled = day.getMonth() !== focusedDay.getMonth();
+    const isOutsideRange = !inRange;
+    const { formatterShort } = i18n[language];
+    function handleClick(e) {
+        onDaySelect(e, day);
+    }
+    return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref }, h("span", { "aria-hidden": "true" }, day.getDate()), h("duet-visually-hidden", null, formatterShort.format(day))));
 };

package/lib/collection/components/duet-date-picker/date-picker-input.js

@@ -5,9 +5,9 @@ import formDateIcon from "@duetds/icons/lib/assets/form-date";
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
 export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, echoPlaceholder, caption, }) => {
-  const { buttonLabel, selected, formatterLong } = i18n[language];
-  return (h("div", { class: {
-      "duet-theme-turva": theme === "turva",
-      "duet-date-input": true,
-    } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption }, h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
+    const { buttonLabel, selected, formatterLong } = i18n[language];
+    return (h("div", { class: {
+            "duet-theme-turva": theme === "turva",
+            "duet-date-input": true,
+        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption }, h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
 };

package/lib/collection/components/duet-date-picker/date-picker-month.js

@@ -7,21 +7,21 @@ import { DatePickerDay } from "./date-picker-day";
 import { getViewOfMonth, inRange, isEqual } from "./date-utils";
 import { chunk } from "./utils";
 export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
-  const { dayLabels } = i18n[language];
-  const today = new Date();
-  const days = getViewOfMonth(focusedDate);
-  function handleFocusOut(e) {
-    const table = e.currentTarget;
-    const relatedTarget = e.relatedTarget;
-    if (relatedTarget && !table.contains(relatedTarget)) {
-      onFocusExit(e);
+    const { dayLabels } = i18n[language];
+    const today = new Date();
+    const days = getViewOfMonth(focusedDate);
+    function handleFocusOut(e) {
+        const table = e.currentTarget;
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget && !table.contains(relatedTarget)) {
+            onFocusExit(e);
+        }
     }
-  }
-  return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
-    // @ts-ignore
-    onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2)), h("duet-visually-hidden", null, label)))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" }, h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
-      if (el && isEqual(day, focusedDate)) {
-        focusedDayRef(el);
-      }
-    } }))))))))));
+    return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
+        // @ts-ignore
+        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2)), h("duet-visually-hidden", null, label)))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" }, h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+            if (el && isEqual(day, focusedDate)) {
+                focusedDayRef(el);
+            }
+        } }))))))))));
 };