@studiometa/js-toolkit 1.7.2 → 2.0.0-alpha.10

package/components/Modal.d.ts

@@ -1,158 +0,0 @@
-/**
- * @typedef {Object} ModalRefs
- * @property {HTMLElement} close
- * @property {HTMLElement} container
- * @property {HTMLElement} content
- * @property {HTMLElement} modal
- * @property {HTMLElement} open
- * @property {HTMLElement} overlay
- */
-/**
- * @typedef {import('../utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} ModalStates
- * @typedef {Partial<Record<keyof ModalRefs, ModalStates>>} ModalStylesOption
- */
-/**
- * @typedef {Object} ModalOptions
- * @property {String}            move      A selector where to move the modal to.
- * @property {String}            autofocus A selector for the element to set the focus to when the modal opens.
- * @property {ModalStylesOption} styles    The styles for the different state of the modal.
- */
-/**
- * @typedef {Object} ModalPrivateInterface
- * @property {ModalRefs} $refs
- * @property {ModalOptions} $options
- * @property {Boolean} isOpen
- * @property {Comment} refModalPlaceholder
- * @property {HTMLElement} refModalParentBackup
- * @property {Function} refModalUnbindGetRefFilter
- */
-/**
- * @typedef {Modal & ModalPrivateInterface} ModalInterface
- */
-/**
- * Modal class.
- */
-export default class Modal extends Base {
-    /**
-     * Modal options.
-     */
-    static config: {
-        name: string;
-        refs: string[];
-        options: {
-            move: StringConstructor;
-            autofocus: {
-                type: StringConstructor;
-                default: string;
-            };
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {ModalStylesOption}
-                 */
-                default: () => ModalStylesOption;
-            };
-        };
-    };
-    /**
-     * Open the modal on click on the `open` ref.
-     *
-     * @return {Function} The component's `open` method.
-     */
-    get onOpenClick(): Function;
-    /**
-     * Close the modal on click on the `close` ref.
-     *
-     * @return {Function} The component's `close` method.
-     */
-    get onCloseClick(): Function;
-    /**
-     * Close the modal on click on the `overlay` ref.
-     *
-     * @return {Function} The component's `close` method.
-     */
-    get onOverlayClick(): Function;
-    /**
-     * Initialize the component's behaviours.
-     *
-     * @this {ModalInterface}
-     */
-    mounted(): ModalInterface;
-    isOpen: boolean;
-    refModalPlaceholder: Comment;
-    refModalParentBackup: any;
-    refModalUnbindGetRefFilter: any;
-    /**
-     * Unbind all events on destroy.
-     *
-     * @this {ModalInterface}
-     * @return {Modal} The Modal instance.
-     */
-    destroyed(): Modal;
-    /**
-     * Close the modal on `ESC` and trap the tabulation.
-     *
-     * @this {ModalInterface}
-     * @param  {Object}        options
-     * @param  {KeyboardEvent} options.event  The original keyboard event
-     * @param  {Boolean}       options.isUp   Is it a keyup event?
-     * @param  {Boolean}       options.isDown Is it a keydown event?
-     * @param  {Boolean}       options.ESC    Is it the ESC key?
-     */
-    keyed({ event, isUp, isDown, ESC }: {
-        event: KeyboardEvent;
-        isUp: boolean;
-        isDown: boolean;
-        ESC: boolean;
-    }): void;
-    /**
-     * Open the modal.
-     *
-     * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
-     */
-    open(): Promise<ModalInterface>;
-    /**
-     * Close the modal.
-     *
-     * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
-     */
-    close(): Promise<ModalInterface>;
-}
-export type ModalRefs = {
-    close: HTMLElement;
-    container: HTMLElement;
-    content: HTMLElement;
-    modal: HTMLElement;
-    open: HTMLElement;
-    overlay: HTMLElement;
-};
-export type CssStyleObject = import('../utils/css/styles.js').CssStyleObject;
-export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
-export type ModalStylesOption = Partial<Record<keyof ModalRefs, ModalStates>>;
-export type ModalOptions = {
-    /**
-     * A selector where to move the modal to.
-     */
-    move: string;
-    /**
-     * A selector for the element to set the focus to when the modal opens.
-     */
-    autofocus: string;
-    /**
-     * The styles for the different state of the modal.
-     */
-    styles: ModalStylesOption;
-};
-export type ModalPrivateInterface = {
-    $refs: ModalRefs;
-    $options: ModalOptions;
-    isOpen: boolean;
-    refModalPlaceholder: Comment;
-    refModalParentBackup: HTMLElement;
-    refModalUnbindGetRefFilter: Function;
-};
-export type ModalInterface = Modal & ModalPrivateInterface;
-import Base from "../abstracts/Base/index.js";

package/components/Modal.js

@@ -1,270 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import Base from '../abstracts/Base/index.js';
-import transition from '../utils/css/transition.js';
-import { trap, untrap, saveActiveElement } from '../utils/focusTrap.js';
-
-var Modal = function (_Base) {
-  _inherits(Modal, _Base);
-
-  var _super = _createSuper(Modal);
-
-  function Modal() {
-    _classCallCheck(this, Modal);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Modal, [{
-    key: "onOpenClick",
-    get: function get() {
-      return this.open;
-    }
-  }, {
-    key: "onCloseClick",
-    get: function get() {
-      return this.close;
-    }
-  }, {
-    key: "onOverlayClick",
-    get: function get() {
-      return this.close;
-    }
-  }, {
-    key: "mounted",
-    value: function mounted() {
-      this.isOpen = false;
-      this.close();
-
-      if (this.$options.move) {
-        var target = document.querySelector(this.$options.move) || document.body;
-        var refsBackup = this.$refs;
-        this.refModalPlaceholder = document.createComment('');
-        this.refModalParentBackup = this.$refs.modal.parentElement || this.$el;
-        this.refModalParentBackup.insertBefore(this.refModalPlaceholder, this.$refs.modal);
-        this.refModalUnbindGetRefFilter = this.$on('get:refs', function (refs) {
-          Object.entries(refsBackup).forEach(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2),
-                key = _ref2[0],
-                ref = _ref2[1];
-
-            if (!refs[key]) {
-              refs[key] = ref;
-            }
-          });
-        });
-        target.appendChild(this.$refs.modal);
-      }
-
-      return this;
-    }
-  }, {
-    key: "destroyed",
-    value: function destroyed() {
-      this.close();
-
-      if (this.$options.move && this.refModalParentBackup) {
-        this.refModalParentBackup.insertBefore(this.$refs.modal, this.refModalPlaceholder);
-        this.refModalUnbindGetRefFilter();
-        this.refModalPlaceholder.remove();
-        delete this.refModalPlaceholder;
-        delete this.refModalParentBackup;
-        delete this.refModalUnbindGetRefFilter;
-      }
-
-      return this;
-    }
-  }, {
-    key: "keyed",
-    value: function keyed(_ref3) {
-      var event = _ref3.event,
-          isUp = _ref3.isUp,
-          isDown = _ref3.isDown,
-          ESC = _ref3.ESC;
-
-      if (!this.isOpen) {
-        return;
-      }
-
-      if (isDown) {
-        trap(this.$refs.modal, event);
-      }
-
-      if (ESC && isUp) {
-        this.close();
-      }
-    }
-  }, {
-    key: "open",
-    value: function () {
-      var _open = _asyncToGenerator(_regeneratorRuntime.mark(function _callee() {
-        var _this = this;
-
-        var refs;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (!this.isOpen) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return", Promise.resolve(this));
-
-              case 2:
-                this.$refs.modal.setAttribute('aria-hidden', 'false');
-                document.documentElement.style.overflow = 'hidden';
-                this.isOpen = true;
-                this.$emit('open');
-                refs = this.$refs;
-                return _context.abrupt("return", Promise.all(Object.entries(this.$options.styles).map(function (_ref4) {
-                  var _ref5 = _slicedToArray(_ref4, 2),
-                      refName = _ref5[0],
-                      _ref5$ = _ref5[1];
-
-                  _ref5$ = _ref5$ === void 0 ? {
-                    open: '',
-                    active: '',
-                    closed: ''
-                  } : _ref5$;
-                  var open = _ref5$.open,
-                      active = _ref5$.active,
-                      closed = _ref5$.closed;
-                  return transition(refs[refName], {
-                    from: closed,
-                    active: active,
-                    to: open
-                  }, 'keep');
-                })).then(function () {
-                  if (_this.$options.autofocus && _this.$refs.modal.querySelector(_this.$options.autofocus)) {
-                    saveActiveElement();
-
-                    var autofocusElement = _this.$refs.modal.querySelector(_this.$options.autofocus);
-
-                    autofocusElement.focus();
-                  }
-
-                  return Promise.resolve(_this);
-                }));
-
-              case 8:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function open() {
-        return _open.apply(this, arguments);
-      }
-
-      return open;
-    }()
-  }, {
-    key: "close",
-    value: function () {
-      var _close = _asyncToGenerator(_regeneratorRuntime.mark(function _callee2() {
-        var _this2 = this;
-
-        var refs;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                if (this.isOpen) {
-                  _context2.next = 2;
-                  break;
-                }
-
-                return _context2.abrupt("return", Promise.resolve(this));
-
-              case 2:
-                this.$refs.modal.setAttribute('aria-hidden', 'true');
-                document.documentElement.style.overflow = '';
-                this.isOpen = false;
-                untrap();
-                this.$emit('close');
-                refs = this.$refs;
-                return _context2.abrupt("return", Promise.all(Object.entries(this.$options.styles).map(function (_ref6) {
-                  var _ref7 = _slicedToArray(_ref6, 2),
-                      refName = _ref7[0],
-                      _ref7$ = _ref7[1];
-
-                  _ref7$ = _ref7$ === void 0 ? {
-                    open: '',
-                    active: '',
-                    closed: ''
-                  } : _ref7$;
-                  var open = _ref7$.open,
-                      active = _ref7$.active,
-                      closed = _ref7$.closed;
-                  return transition(refs[refName], {
-                    from: open,
-                    active: active,
-                    to: closed
-                  }, 'keep');
-                })).then(function () {
-                  return Promise.resolve(_this2);
-                }));
-
-              case 9:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this);
-      }));
-
-      function close() {
-        return _close.apply(this, arguments);
-      }
-
-      return close;
-    }()
-  }]);
-
-  return Modal;
-}(Base);
-
-_defineProperty(Modal, "config", {
-  name: 'Modal',
-  refs: ['close', 'container', 'content', 'modal', 'open', 'overlay'],
-  options: {
-    move: String,
-    autofocus: {
-      type: String,
-      default: '[autofocus]'
-    },
-    styles: {
-      type: Object,
-      default: function _default() {
-        return {
-          modal: {
-            closed: {
-              opacity: '0',
-              pointerEvents: 'none',
-              visibility: 'hidden'
-            }
-          }
-        };
-      }
-    }
-  }
-});
-
-export { Modal as default };
-//# sourceMappingURL=Modal.js.map

package/components/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../packages/js-toolkit/components/Modal.js"],"names":["Base","transition","trap","untrap","saveActiveElement","Modal","open","close","isOpen","$options","move","target","document","querySelector","body","refsBackup","$refs","refModalPlaceholder","createComment","refModalParentBackup","modal","parentElement","$el","insertBefore","refModalUnbindGetRefFilter","$on","refs","Object","entries","forEach","key","ref","appendChild","remove","event","isUp","isDown","ESC","Promise","resolve","setAttribute","documentElement","style","overflow","$emit","all","styles","map","refName","active","closed","from","to","then","autofocus","autofocusElement","focus","name","options","String","type","default","opacity","pointerEvents","visibility"],"mappings":"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","sourcesContent":["import Base from '../abstracts/Base/index.js';\nimport transition from '../utils/css/transition.js';\nimport { trap, untrap, saveActiveElement } from '../utils/focusTrap.js';\n\n/**\n * @typedef {Object} ModalRefs\n * @property {HTMLElement} close\n * @property {HTMLElement} container\n * @property {HTMLElement} content\n * @property {HTMLElement} modal\n * @property {HTMLElement} open\n * @property {HTMLElement} overlay\n */\n\n/**\n * @typedef {import('../utils/css/styles.js').CssStyleObject} CssStyleObject\n * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} ModalStates\n * @typedef {Partial<Record<keyof ModalRefs, ModalStates>>} ModalStylesOption\n */\n\n/**\n * @typedef {Object} ModalOptions\n * @property {String}            move      A selector where to move the modal to.\n * @property {String}            autofocus A selector for the element to set the focus to when the modal opens.\n * @property {ModalStylesOption} styles    The styles for the different state of the modal.\n */\n\n/**\n * @typedef {Object} ModalPrivateInterface\n * @property {ModalRefs} $refs\n * @property {ModalOptions} $options\n * @property {Boolean} isOpen\n * @property {Comment} refModalPlaceholder\n * @property {HTMLElement} refModalParentBackup\n * @property {Function} refModalUnbindGetRefFilter\n */\n\n/**\n * @typedef {Modal & ModalPrivateInterface} ModalInterface\n */\n\n/**\n * Modal class.\n */\nexport default class Modal extends Base {\n  /**\n   * Modal options.\n   */\n  static config = {\n    name: 'Modal',\n    refs: ['close', 'container', 'content', 'modal', 'open', 'overlay'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        /**\n         * @return {ModalStylesOption}\n         */\n        default: () => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n    },\n  };\n\n  /**\n   * Open the modal on click on the `open` ref.\n   *\n   * @return {Function} The component's `open` method.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   *\n   * @return {Function} The component's `close` method.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   *\n   * @return {Function} The component's `close` method.\n   */\n  get onOverlayClick() {\n    return this.close;\n  }\n\n  /**\n   * Initialize the component's behaviours.\n   *\n   * @this {ModalInterface}\n   */\n  mounted() {\n    this.isOpen = false;\n    this.close();\n\n    if (this.$options.move) {\n      const target = document.querySelector(this.$options.move) || document.body;\n      const refsBackup = this.$refs;\n\n      this.refModalPlaceholder = document.createComment('');\n      this.refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n      this.refModalParentBackup.insertBefore(this.refModalPlaceholder, this.$refs.modal);\n\n      this.refModalUnbindGetRefFilter = this.$on(\n        'get:refs',\n        /**\n         * @param {ModalRefs} refs\n         */\n        (refs) => {\n          Object.entries(refsBackup).forEach(([key, ref]) => {\n            if (!refs[key]) {\n              refs[key] = ref;\n            }\n          });\n        }\n      );\n      target.appendChild(this.$refs.modal);\n    }\n\n    return this;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   *\n   * @this {ModalInterface}\n   * @return {Modal} The Modal instance.\n   */\n  destroyed() {\n    this.close();\n\n    if (this.$options.move && this.refModalParentBackup) {\n      this.refModalParentBackup.insertBefore(this.$refs.modal, this.refModalPlaceholder);\n      this.refModalUnbindGetRefFilter();\n      this.refModalPlaceholder.remove();\n      delete this.refModalPlaceholder;\n      delete this.refModalParentBackup;\n      delete this.refModalUnbindGetRefFilter;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   *\n   * @this {ModalInterface}\n   * @param  {Object}        options\n   * @param  {KeyboardEvent} options.event  The original keyboard event\n   * @param  {Boolean}       options.isUp   Is it a keyup event?\n   * @param  {Boolean}       options.isDown Is it a keydown event?\n   * @param  {Boolean}       options.ESC    Is it the ESC key?\n   */\n  keyed({ event, isUp, isDown, ESC }) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (isDown) {\n      trap(this.$refs.modal, event);\n    }\n\n    if (ESC && isUp) {\n      this.close();\n    }\n  }\n\n  /**\n   * Open the modal.\n   *\n   * @this {ModalInterface}\n   * @return {Promise<ModalInterface>} The Modal instance.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve(this);\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n    document.documentElement.style.overflow = 'hidden';\n\n    this.isOpen = true;\n    this.$emit('open');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep'\n          )\n      )\n    ).then(() => {\n      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n        saveActiveElement();\n        /** @type {HTMLElement} */\n        const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);\n        autofocusElement.focus();\n      }\n      return Promise.resolve(this);\n    });\n  }\n\n  /**\n   * Close the modal.\n   *\n   * @this {ModalInterface}\n   * @return {Promise<ModalInterface>} The Modal instance.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve(this);\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n    document.documentElement.style.overflow = '';\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep'\n          )\n      )\n    ).then(() => Promise.resolve(this));\n  }\n}\n"],"file":"Modal.js"}

package/components/Tabs.d.ts

@@ -1,108 +0,0 @@
-/**
- * @typedef {import('../abstracts/Base').BaseOptions} BaseOptions
- */
-/**
- * @typedef {Object} TabItem
- * @property {HTMLElement} btn
- * @property {HTMLElement} content
- * @property {Boolean} isEnabled
- */
-/**
- * @typedef {Object} TabsRefs
- * @property {HTMLElement[]} btn
- * @property {HTMLElement[]} content
- */
-/**
- * @typedef {import('../utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} TabsStates
- * @typedef {Partial<Record<keyof TabsRefs, TabsStates>>} TabsStylesOption
- */
-/**
- * @typedef {Object} TabsOptions
- * @property {TabsStylesOption} styles
- */
-/**
- * @typedef {Object} TabsPrivateInterface
- * @property {TabsOptions} $options
- * @property {TabsRefs} $refs
- * @property {Array<TabItem>} items
- */
-/**
- * @typedef {Tabs & TabsPrivateInterface} TabsInterface
- */
-/**
- * Tabs class.
- */
-export default class Tabs extends Base {
-    /**
-     * Tabs config.
-     */
-    static config: {
-        name: string;
-        refs: string[];
-        options: {
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {TabsStylesOption}
-                 */
-                default: () => TabsStylesOption;
-            };
-        };
-    };
-    /**
-     * Initialize the component's behaviours.
-     * @this {TabsInterface}
-     * @return {void}
-     */
-    mounted(): void;
-    items: any;
-    /**
-     * Switch tab on button click.
-     *
-     * @this {TabsInterface}
-     * @param  {Event}  event The click event object.
-     * @param  {Number} index The index of the clicked button.
-     * @return {void}
-     */
-    onBtnClick(event: Event, index: number): void;
-    /**
-     * Enable the given tab and its associated content.
-     *
-     * @this {TabsInterface}
-     * @param  {TabItem}                item The item to enable.
-     * @return {Promise<TabsInterface>}      Tabs instance.
-     */
-    enableItem(item: TabItem): Promise<TabsInterface>;
-    /**
-     * Disable the given tab and its associated content.
-     *
-     * @this {TabsInterface}
-     * @param  {TabItem}                item The item to disable.
-     * @return {Promise<TabsInterface>}      The Tabs instance.
-     */
-    disableItem(item: TabItem): Promise<TabsInterface>;
-}
-export type BaseOptions = import('../abstracts/Base').BaseOptions;
-export type TabItem = {
-    btn: HTMLElement;
-    content: HTMLElement;
-    isEnabled: boolean;
-};
-export type TabsRefs = {
-    btn: HTMLElement[];
-    content: HTMLElement[];
-};
-export type CssStyleObject = import('../utils/css/styles.js').CssStyleObject;
-export type TabsStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
-export type TabsStylesOption = Partial<Record<keyof TabsRefs, TabsStates>>;
-export type TabsOptions = {
-    styles: TabsStylesOption;
-};
-export type TabsPrivateInterface = {
-    $options: TabsOptions;
-    $refs: TabsRefs;
-    items: Array<TabItem>;
-};
-export type TabsInterface = Tabs & TabsPrivateInterface;
-import Base from "../abstracts/Base/index.js";