@daoyi/nmtl-ui 2.0.1-beta.105 → 2.0.1-beta.107

package/lib/components/{Autocomplete-9e392b0c.js → Autocomplete-8aa5b893.js}

@@ -13,7 +13,7 @@ import { _ as _toConsumableArray } from './toConsumableArray-dbe8af76.js';
 import { styled as styled$1 } from '@material-ui/styles';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { E as Empty } from './Empty-bf77164f.js';
+import { E as Empty } from './Empty-c6a44967.js';
 
 var ArrowDropDown = {};
 

package/lib/components/Autocomplete.js

@@ -1,4 +1,4 @@
-export { A as default } from './Autocomplete-9e392b0c.js';
+export { A as default } from './Autocomplete-8aa5b893.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
@@ -17,4 +17,4 @@ import 'react-dom';
 import './toConsumableArray-dbe8af76.js';
 import './globalConfig';
 import './style-inject.es-1f59c1d0.js';
-import './Empty-bf77164f.js';
+import './Empty-c6a44967.js';

package/lib/components/{ContactModal-90b95c63.js → ContactModal-b3761fb6.js}

@@ -12,7 +12,7 @@ import 'react-is';
 import '@material-ui/styles';
 import { u as useTheme } from './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import { S as Select } from './Select-e0790135.js';
+import { S as Select } from './Select-52ab5299.js';
 import { VolumeUp } from '@material-ui/icons';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/ContactModal.js

@@ -1,4 +1,4 @@
-export { C as default } from './ContactModal-90b95c63.js';
+export { C as default } from './ContactModal-b3761fb6.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
@@ -18,7 +18,7 @@ import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Select-e0790135.js';
-import './Empty-bf77164f.js';
+import './Select-52ab5299.js';
+import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';
 import 'react-dom';

package/lib/components/{Drawer-2cbcec04.js → Drawer-b2edc79b.js}

@@ -3,7 +3,7 @@ import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { List, ListItem, ListItemIcon, ListItemText, IconButton, Drawer as Drawer$1, Divider } from '@material-ui/core';
 import { DehazeRounded } from '@material-ui/icons';
-import { S as Select } from './Select-e0790135.js';
+import { S as Select } from './Select-52ab5299.js';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/Drawer.js

@@ -1,17 +1,17 @@
-export { D as default } from './Drawer-2cbcec04.js';
+export { D as default } from './Drawer-b2edc79b.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Select-e0790135.js';
+import './Select-52ab5299.js';
 import './index-b76a85f4.js';
 import './defaultTheme-ed7746fe.js';
 import 'react-is';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Empty-bf77164f.js';
+import './Empty-c6a44967.js';
 import './style-inject.es-1f59c1d0.js';
 import 'react-router-dom';
 import './globalConfig';

package/lib/components/{Empty-bf77164f.js → Empty-c6a44967.js}

@@ -19,7 +19,8 @@ var Empty = function Empty(_ref) {
     className: "ant-empty-image"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: emptySrc || img,
-    alt: description,
+    alt: "",
+    "aria-hidden": "true",
     style: imageStyle
   }), description && /*#__PURE__*/React__default.createElement("div", {
     className: "ant-empty-description"

package/lib/components/Empty.js

@@ -1,4 +1,4 @@
-export { E as default } from './Empty-bf77164f.js';
+export { E as default } from './Empty-c6a44967.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';

package/lib/components/Filter.js

@@ -739,12 +739,19 @@ var Filter = function Filter(_ref) {
     setLiveMessage = _useState2[1];
   var urlSearch = queryString.parse(search);
   var FilterItem = He.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\tcolor: ", ";\n\t\t.filter__item--active {\n\t\t\tcolor: ", ";\n\t\t}\n\t\t:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\t::after {\n\t\t\tcolor: ", ";\n\t\t}\n\t"])), textColor, textHoverColor || textColor, textHoverColor || textColor, textColor);
-  var handleClick = useCallback(function (key, title) {
+  var handleClick = useCallback(function (key, title, count) {
     if (disabled) return;
     if (onClick && typeof onClick === 'function') onClick(key);else historyAppendSearch(_defineProperty({
       history: history
     }, filterKey, key));
-    setLiveMessage(getIntl().formatMessage({
+    /* WCAG 4.1.3 篩選後播報結果筆數（實測回饋 R28）：筆數是篩選效果最直接的回饋，
+       尤其結果為 0 筆時；各分類筆數已在各 chip 可及名稱中（隨選可得），不逐一播報 */
+    setLiveMessage(typeof count === 'number' ? getIntl().formatMessage({
+      id: 'aria.filter.appliedCount'
+    }, {
+      title: title,
+      count: count
+    }) : getIntl().formatMessage({
       id: 'aria.filter.applied'
     }, {
       title: title
@@ -781,12 +788,12 @@ var Filter = function Filter(_ref) {
         id: 'aria.filter.hint'
       })),
       onClick: function onClick() {
-        return handleClick(key, title);
+        return handleClick(key, title, count);
       },
       onKeyDown: function onKeyDown(event) {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
-          handleClick(key, title);
+          handleClick(key, title, count);
         }
       }
     }, "".concat(title, "(").concat(count, ")"));

package/lib/components/Footer.js

@@ -3,7 +3,7 @@ import React__default, { useState, useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { C as ContactModal } from './ContactModal-90b95c63.js';
+import { C as ContactModal } from './ContactModal-b3761fb6.js';
 import { S as Spin } from './Spin-8dc60bfe.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
@@ -18,8 +18,8 @@ import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Select-e0790135.js';
-import './Empty-bf77164f.js';
+import './Select-52ab5299.js';
+import './Empty-c6a44967.js';
 import './createSvgIcon-e3803ee1.js';
 import 'react-dom';
 

package/lib/components/Header.js

@@ -6,15 +6,15 @@ import { d as debounce_1 } from './debounce-127da66c.js';
 import { useHistory, useRouteMatch, NavLink } from 'react-router-dom';
 import { Typography, IconButton } from '@material-ui/core';
 import { SearchOutlined } from '@material-ui/icons';
-import { K as KeywordSearch } from './KeywordSearch-c0be0348.js';
-import { S as Select } from './Select-e0790135.js';
-import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-2cbcec04.js';
+import { K as KeywordSearch } from './KeywordSearch-0640ae9a.js';
+import { S as Select } from './Select-52ab5299.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-b2edc79b.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';
 import 'axios';
-import './Autocomplete-9e392b0c.js';
+import './Autocomplete-8aa5b893.js';
 import '@material-ui/lab';
 import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
@@ -22,7 +22,7 @@ import 'react-is';
 import '@material-ui/styles';
 import 'react-dom';
 import './toConsumableArray-dbe8af76.js';
-import './Empty-bf77164f.js';
+import './Empty-c6a44967.js';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
 

package/lib/components/{KeywordSearch-c0be0348.js → KeywordSearch-0640ae9a.js}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import axios from 'axios';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { A as Autocomplete } from './Autocomplete-9e392b0c.js';
+import { A as Autocomplete } from './Autocomplete-8aa5b893.js';
 
 var css_248z = ".keywordSearch {\n  border-radius: 4px;\n  width: 100%;\n  margin-right: 14px;\n}\n.keywordSearch--animation .autocomplete {\n  transition: max-width 0.3s ease-out;\n  max-width: 240px;\n}\n.keywordSearch--focus {\n  flex: 1;\n}\n.keywordSearch--focus .autocomplete {\n  max-width: 100%;\n}\n.keywordSearch .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  border-radius: 10px;\n  background-color: #ffffff66;\n}";
 styleInject(css_248z);

package/lib/components/KeywordSearch.js

@@ -1,11 +1,11 @@
-export { K as default } from './KeywordSearch-c0be0348.js';
+export { K as default } from './KeywordSearch-0640ae9a.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import 'axios';
 import './style-inject.es-1f59c1d0.js';
-import './Autocomplete-9e392b0c.js';
+import './Autocomplete-8aa5b893.js';
 import './debounce-127da66c.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';
@@ -19,4 +19,4 @@ import '@material-ui/styles';
 import 'react-dom';
 import './toConsumableArray-dbe8af76.js';
 import './globalConfig';
-import './Empty-bf77164f.js';
+import './Empty-c6a44967.js';

package/lib/components/Pagination.js

@@ -1,6 +1,6 @@
-import { c as _objectWithoutProperties$1 } from './_rollupPluginBabelHelpers-a52356f6.js';
+import { c as _objectWithoutProperties$1, a as _slicedToArray$1 } from './_rollupPluginBabelHelpers-a52356f6.js';
 import * as React$2 from 'react';
-import React__default, { Children, isValidElement, cloneElement } from 'react';
+import React__default, { Children, isValidElement, cloneElement, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { k as _objectWithoutProperties, o as _slicedToArray, _ as _extends, q as _objectWithoutPropertiesLoose, r as alpha, j as formatMuiErrorMessage } from './defaultTheme-ed7746fe.js';
 import { u as useControlled, c as clsx, b as useEventCallback, w as withStyles, d as useIsFocusVisible, e as useForkRef, f as createSvgIcon, g as capitalize, h as debounce, r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
@@ -13,6 +13,7 @@ import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { c as classNames } from './index-b76a85f4.js';
 import { IconButton } from '@material-ui/core';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_commonjsHelpers-70de2c37.js';
 
@@ -3551,58 +3552,127 @@ var Pagination = function Pagination(_ref) {
   var current = Number.parseInt(props.current, 10) || 1;
   // eslint-disable-next-line react/destructuring-assignment
   var defaultCurrent = Number.parseInt(props.defaultCurrent, 10) || 1;
+
+  /* WCAG 4.1.3 換頁後清單於原頁面更新，aria-live 播報（實測回饋 R29） */
+  var _useState = useState(''),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    liveMessage = _useState2[0],
+    setLiveMessage = _useState2[1];
+  var didMountRef = useRef(false);
+  useEffect(function () {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return undefined;
+    }
+    setLiveMessage(getIntl().formatMessage({
+      id: 'aria.pagination.changed'
+    }, {
+      page: current
+    }));
+    var timer = setTimeout(function () {
+      return setLiveMessage('');
+    }, 3000);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [current]);
   var handlePageSelected = function handlePageSelected(event) {
     var page = Number.parseInt(event.target.value, 10);
     _onChange(page);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('ntml-pagination', className)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "ntml-pagination__center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    disabled: current === 1,
-    onClick: function onClick() {
-      return _onChange(current - 1);
-    }
-  }, /*#__PURE__*/React__default.createElement(default_1$1, {
-    color: "secondary"
-  })), /*#__PURE__*/React__default.createElement(MUIPagination, {
-    color: "secondary",
-    count: count,
-    boundaryCount: 1,
-    siblingCount: 0,
-    page: current,
-    defaultPage: defaultCurrent,
-    hideNextButton: true,
-    hidePrevButton: true,
-    onChange: function onChange(event, value) {
-      return _onChange(value);
-    }
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
-    disabled: current === count,
-    onClick: function onClick() {
-      return _onChange(current + 1);
-    }
-  }, /*#__PURE__*/React__default.createElement(default_1, {
-    color: "secondary"
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "ntml-pagination__rightSide"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "ntml-pagination__rightSide-showTotal"
-  }, /*#__PURE__*/React__default.createElement("span", null, "\u76EE\u524D\u5728\u7B2C"), /*#__PURE__*/React__default.createElement(NativeSelect$1, {
-    value: current,
-    onChange: handlePageSelected
-  }, pages.map(function (page, idx) {
-    return /*#__PURE__*/React__default.createElement("option", {
-      value: page,
-      key: idx.toString()
-    }, page);
-  })), /*#__PURE__*/React__default.createElement("span", null, "\u9801\uFF0C\u5171"), count, /*#__PURE__*/React__default.createElement("span", null, "\u9801"))));
+
+  /* WCAG 2.4.6 / 4.1.2 頁碼項可及名稱（實測回饋 R29）：
+     MUI 預設英文「Go to page N」，改為 locale 化「第 N 頁」；目前頁項另帶
+     aria-current（MUI PaginationItem 內建） */
+  var getItemAriaLabel = function getItemAriaLabel(type, page, selected) {
+    if (type === 'page') {
+      return getIntl().formatMessage({
+        id: selected ? 'aria.pagination.pageCurrent' : 'aria.pagination.page'
+      }, {
+        page: page
+      });
+    }
+    return undefined;
+  };
+  return (
+    /*#__PURE__*/
+    /* WCAG 1.3.1 分頁為導覽 landmark（實測回饋 R29） */
+    React__default.createElement("nav", {
+      className: classNames('ntml-pagination', className),
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.pagination.nav'
+      })
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "ntml-pagination__center"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.pagination.prev'
+      }),
+      disabled: current === 1,
+      onClick: function onClick() {
+        return _onChange(current - 1);
+      }
+    }, /*#__PURE__*/React__default.createElement(default_1$1, {
+      color: "secondary"
+    })), /*#__PURE__*/React__default.createElement(MUIPagination, {
+      color: "secondary",
+      count: count,
+      boundaryCount: 1,
+      siblingCount: 0,
+      page: current,
+      defaultPage: defaultCurrent,
+      hideNextButton: true,
+      hidePrevButton: true,
+      getItemAriaLabel: getItemAriaLabel,
+      onChange: function onChange(event, value) {
+        return _onChange(value);
+      }
+    }), /*#__PURE__*/React__default.createElement(IconButton, {
+      "aria-label": getIntl().formatMessage({
+        id: 'aria.pagination.next'
+      }),
+      disabled: current === count,
+      onClick: function onClick() {
+        return _onChange(current + 1);
+      }
+    }, /*#__PURE__*/React__default.createElement(default_1, {
+      color: "secondary"
+    })))), /*#__PURE__*/React__default.createElement("div", {
+      className: "ntml-pagination__rightSide"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "ntml-pagination__rightSide-showTotal"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      "aria-hidden": "true"
+    }, "\u76EE\u524D\u5728\u7B2C"), /*#__PURE__*/React__default.createElement(NativeSelect$1, {
+      value: current,
+      onChange: handlePageSelected,
+      inputProps: {
+        'aria-label': getIntl().formatMessage({
+          id: 'aria.pagination.select'
+        }, {
+          page: current,
+          totalPage: count
+        })
+      }
+    }, pages.map(function (page, idx) {
+      return /*#__PURE__*/React__default.createElement("option", {
+        value: page,
+        key: idx.toString()
+      }, page);
+    })), /*#__PURE__*/React__default.createElement("span", {
+      "aria-hidden": "true"
+    }, "\u9801\uFF0C\u5171".concat(count, "\u9801")))), /*#__PURE__*/React__default.createElement("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status",
+      className: "visually-hidden"
+    }, liveMessage))
+  );
 };
 Pagination.defaultProps = {
   className: undefined,

package/lib/components/{Select-e0790135.js → Select-52ab5299.js}

@@ -8,7 +8,7 @@ import 'react-is';
 import '@material-ui/styles';
 import { u as useTheme } from './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import { E as Empty } from './Empty-bf77164f.js';
+import { E as Empty } from './Empty-c6a44967.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var css_248z = ".select .MuiSelect-nativeInput {\n  visibility: hidden;\n}\n.select__placeholder {\n  color: #6b6130;\n}\n.select--small {\n  width: 100%;\n}\n.select--small .MuiSelect-root {\n  padding: 0.5rem 1.5rem 0.25rem;\n  color: white;\n}\n.select--small .MuiSelect-root .select__placeholder {\n  color: white;\n}\n.select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n  background: transparent;\n}\n.select--small .MuiSvgIcon-root {\n  color: white;\n}\n.select--small .MuiOutlinedInput-root {\n  border-radius: 45px;\n}";

package/lib/components/Select.js

@@ -1,4 +1,4 @@
-export { S as default } from './Select-e0790135.js';
+export { S as default } from './Select-52ab5299.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
@@ -9,5 +9,5 @@ import 'react-is';
 import '@material-ui/styles';
 import './useTheme-d16d02d9.js';
 import './withTheme-2d778133.js';
-import './Empty-bf77164f.js';
+import './Empty-c6a44967.js';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/globalConfig.js

@@ -81,7 +81,15 @@ var zhtw = {
 	"aria.filter.applied": "已套用篩選：{title}，結果已更新",
 	"aria.export.download": "（下載檔案）",
 	"aria.backTop": "回到頁面頂端",
-	"aria.moreButton.hintCollapse": "（點選後收合、僅顯示部分結果）"
+	"aria.moreButton.hintCollapse": "（點選後收合、僅顯示部分結果）",
+	"aria.filter.appliedCount": "已套用篩選：{title}，共 {count} 筆結果",
+	"aria.pagination.nav": "分頁導覽",
+	"aria.pagination.prev": "上一頁",
+	"aria.pagination.next": "下一頁",
+	"aria.pagination.page": "第 {page} 頁",
+	"aria.pagination.pageCurrent": "第 {page} 頁，目前頁",
+	"aria.pagination.select": "選擇頁碼，目前在第 {page} 頁，共 {totalPage} 頁（選擇後結果將更新）",
+	"aria.pagination.changed": "已切換至第 {page} 頁，結果已更新"
 };
 
 var zhcn = {
@@ -151,7 +159,15 @@ var zhcn = {
 	"aria.filter.applied": "已套用筛选：{title}，结果已更新",
 	"aria.export.download": "（下载档案）",
 	"aria.backTop": "回到页面顶端",
-	"aria.moreButton.hintCollapse": "（点选后收合、仅显示部分结果）"
+	"aria.moreButton.hintCollapse": "（点选后收合、仅显示部分结果）",
+	"aria.filter.appliedCount": "已套用筛选：{title}，共 {count} 笔结果",
+	"aria.pagination.nav": "分页导览",
+	"aria.pagination.prev": "上一页",
+	"aria.pagination.next": "下一页",
+	"aria.pagination.page": "第 {page} 页",
+	"aria.pagination.pageCurrent": "第 {page} 页，目前页",
+	"aria.pagination.select": "选择页码，目前在第 {page} 页，共 {totalPage} 页（选择后结果将更新）",
+	"aria.pagination.changed": "已切换至第 {page} 页，结果已更新"
 };
 
 var enus = {
@@ -221,7 +237,15 @@ var enus = {
 	"aria.filter.applied": "Filter applied: {title}. Results updated",
 	"aria.export.download": " (downloads a file)",
 	"aria.backTop": "Back to top",
-	"aria.moreButton.hintCollapse": " (click to collapse results)"
+	"aria.moreButton.hintCollapse": " (click to collapse results)",
+	"aria.filter.appliedCount": "Filter applied: {title}. {count} results",
+	"aria.pagination.nav": "Pagination",
+	"aria.pagination.prev": "Previous page",
+	"aria.pagination.next": "Next page",
+	"aria.pagination.page": "Page {page}",
+	"aria.pagination.pageCurrent": "Page {page}, current page",
+	"aria.pagination.select": "Select page, currently on page {page} of {totalPage} (results update after selection)",
+	"aria.pagination.changed": "Moved to page {page}. Results updated"
 };
 
 var _languages;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@daoyi/nmtl-ui",
-	"version": "2.0.1-beta.105",
+	"version": "2.0.1-beta.107",
 	"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
 	"author": "daoyi",
 	"main": "lib/index.js",