@watermarkinsights/ripple 3.7.0-3 → 3.7.0

package/dist/types/components/wm-uploader/wm-uploader.d.ts

@@ -1,80 +1,80 @@
-import { EventEmitter } from "../../stencil-public-runtime";
-interface UploadedFile {
-  name: string;
-  id: string;
-  type: string;
-  lastUpdated: string;
-  progress?: number;
-}
-interface ErrorFile {
-  name: string;
-  message: string;
-}
-export declare class Uploader {
-  el: HTMLWmUploaderElement;
-  private liveRegion?;
-  private inputEl?;
-  uploaderType: "1" | "2" | null;
-  type: "1" | "2" | null;
-  get tempUploaderType(): "1" | "2";
-  buttonText: string;
-  info?: string;
-  emptyStateText: string;
-  icon: string;
-  fileTypes: string;
-  maxSize: number;
-  maxFiles?: number;
-  sortBy: "name" | "date";
-  files?: string;
-  private fileList;
-  filesToUpload: File[];
-  isTabbing: boolean;
-  rejectedFiles?: string;
-  errorList: ErrorFile[];
-  notif?: {
-    id: number;
-    message: string;
-  } | null;
-  numFilesInProgress?: number | null;
-  private srProgress?;
-  private inputId;
-  wmUploaderFilesSelected: EventEmitter;
-  wmFilesSelected: EventEmitter;
-  wmUploaderDeleteFile: EventEmitter;
-  wmDeleteFile: EventEmitter;
-  wmUploaderDownloadFile: EventEmitter;
-  wmDownloadFile: EventEmitter;
-  toggleTabbingOn(): void;
-  toggleTabbingOff(): void;
-  handleUploadProgress(ev: CustomEvent): void;
-  parseFiles(): void;
-  parseRejectedFiles(): void;
-  setMaxSize(): void;
-  uploadNotifications(newNum: number, oldNum: number): void;
-  isValidSize(size: number): boolean;
-  isDuplicate(name: string): UploadedFile | undefined;
-  isEmpty(): boolean;
-  isDisabled(): boolean;
-  isItemUploading(item: UploadedFile): boolean;
-  clearErrors(): void;
-  handleFiles(ev: Event): void;
-  downloadFile(file: UploadedFile): void;
-  deleteFile(file: UploadedFile): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  renderUploadSvg(): any;
-  renderIcon(): any;
-  renderInfo(): any;
-  renderNotif(): any;
-  renderUploadButton(classes: string): any;
-  renderEmptyState(): any;
-  renderErrorList(): any;
-  renderFileInProgress(item: UploadedFile): any;
-  renderFile(item: UploadedFile): any;
-  renderFileList(): any;
-  renderHeader(): any;
-  renderFooter(): any;
-  renderWithItems(): any;
-  render(): any;
-}
-export {};
+import { EventEmitter } from "../../stencil-public-runtime";
+interface UploadedFile {
+  name: string;
+  id: string;
+  type: string;
+  lastUpdated: string;
+  progress?: number;
+}
+interface ErrorFile {
+  name: string;
+  message: string;
+}
+export declare class Uploader {
+  el: HTMLWmUploaderElement;
+  private liveRegion?;
+  private inputEl?;
+  uploaderType: "1" | "2" | null;
+  type: "1" | "2" | null;
+  get tempUploaderType(): "1" | "2";
+  buttonText: string;
+  info?: string;
+  emptyStateText: string;
+  icon: string;
+  fileTypes: string;
+  maxSize: number;
+  maxFiles?: number;
+  sortBy: "name" | "date";
+  files?: string;
+  private fileList;
+  filesToUpload: File[];
+  isTabbing: boolean;
+  rejectedFiles?: string;
+  errorList: ErrorFile[];
+  notif?: {
+    id: number;
+    message: string;
+  } | null;
+  numFilesInProgress?: number | null;
+  private srProgress?;
+  private inputId;
+  wmUploaderFilesSelected: EventEmitter;
+  wmFilesSelected: EventEmitter;
+  wmUploaderDeleteFile: EventEmitter;
+  wmDeleteFile: EventEmitter;
+  wmUploaderDownloadFile: EventEmitter;
+  wmDownloadFile: EventEmitter;
+  toggleTabbingOn(): void;
+  toggleTabbingOff(): void;
+  handleUploadProgress(ev: CustomEvent): void;
+  parseFiles(): void;
+  parseRejectedFiles(): void;
+  setMaxSize(): void;
+  uploadNotifications(newNum: number, oldNum: number): void;
+  isValidSize(size: number): boolean;
+  isDuplicate(name: string): UploadedFile | undefined;
+  isEmpty(): boolean;
+  isDisabled(): boolean;
+  isItemUploading(item: UploadedFile): boolean;
+  clearErrors(): void;
+  handleFiles(ev: Event): void;
+  downloadFile(file: UploadedFile): void;
+  deleteFile(file: UploadedFile): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  renderUploadSvg(): any;
+  renderIcon(): any;
+  renderInfo(): any;
+  renderNotif(): any;
+  renderUploadButton(classes: string): any;
+  renderEmptyState(): any;
+  renderErrorList(): any;
+  renderFileInProgress(item: UploadedFile): any;
+  renderFile(item: UploadedFile): any;
+  renderFileList(): any;
+  renderHeader(): any;
+  renderFooter(): any;
+  renderWithItems(): any;
+  render(): any;
+}
+export {};

package/dist/types/components/wm-wrapper/wm-wrapper.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter } from "../../stencil-public-runtime";
-export declare class Wrapper {
-  el: any;
-  wmWrapperLoaded: EventEmitter<void>;
-  componentDidLoad(): void;
-  render(): void;
-}
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class Wrapper {
+  el: any;
+  wmWrapperLoaded: EventEmitter<void>;
+  componentDidLoad(): void;
+  render(): void;
+}

package/dist/types/components.d.ts

@@ -45,13 +45,13 @@ export namespace Components {
         "disabled": boolean;
         "labelForIdenticalButtons"?: string;
         "tooltip"?: string;
-        "tooltipPosition"?: | "top"
-    | "bottom"
-    | "left"
-    | "right"
-    | "bottom-left"
-    | "bottom-right"
-    | "top-right"
+        "tooltipPosition"?: | "top"
+    | "bottom"
+    | "left"
+    | "right"
+    | "bottom-left"
+    | "bottom-right"
+    | "top-right"
     | "top-left";
     }
     interface WmButton {
@@ -526,9 +526,9 @@ declare namespace LocalJSX {
     interface PrivNavigatorItem {
         "focused"?: boolean;
         "link"?: string;
-        "onKeydownOnNavItem"?: (event: CustomEvent<{
-    navItem: HTMLPrivNavigatorItemElement;
-    key: string;
+        "onKeydownOnNavItem"?: (event: CustomEvent<{
+    navItem: HTMLPrivNavigatorItemElement;
+    key: string;
   }>) => void;
         "selected"?: boolean;
     }
@@ -541,13 +541,13 @@ declare namespace LocalJSX {
         "onMenuLoaded"?: (event: CustomEvent<any>) => void;
         "onWmActionMenuLoaded"?: (event: CustomEvent<any>) => void;
         "tooltip"?: string;
-        "tooltipPosition"?: | "top"
-    | "bottom"
-    | "left"
-    | "right"
-    | "bottom-left"
-    | "bottom-right"
-    | "top-right"
+        "tooltipPosition"?: | "top"
+    | "bottom"
+    | "left"
+    | "right"
+    | "bottom-left"
+    | "bottom-right"
+    | "top-right"
     | "top-left";
     }
     interface WmButton {
@@ -753,9 +753,9 @@ declare namespace LocalJSX {
         "onWmSnackbarSnackFinished"?: (event: CustomEvent<Object>) => void;
     }
     interface WmTabItem {
-        "onKeydownOnTabItem"?: (event: CustomEvent<{
-    tabItem: HTMLWmTabItemElement;
-    key: string;
+        "onKeydownOnTabItem"?: (event: CustomEvent<{
+    tabItem: HTMLWmTabItemElement;
+    key: string;
   }>) => void;
         "onTabItemLoaded"?: (event: CustomEvent<{ tab: HTMLWmTabItemElement }>) => void;
         "onTabSelected"?: (event: CustomEvent<{ tabId: string }>) => void;
@@ -813,10 +813,10 @@ declare namespace LocalJSX {
         "label"?: string;
         "labelPosition"?: "top" | "left" | "none";
         "onWmTimepickerNewValidValue"?: (event: CustomEvent<{ value: string }>) => void;
-        "onWmTimepickerOnChange"?: (event: CustomEvent<{
-    // deprecated in favor of wmTimepickerNewValidValue and standard input event
-    value: string;
-    isValid: boolean;
+        "onWmTimepickerOnChange"?: (event: CustomEvent<{
+    // deprecated in favor of wmTimepickerNewValidValue and standard input event
+    value: string;
+    isValid: boolean;
   }>) => void;
         "preventValidation"?: string;
         "requiredField"?: boolean;

package/dist/types/global/__mocks__/functions.d.ts

@@ -1,6 +1,6 @@
-export declare const generateId: () => string;
-export declare const getTextDir: () => string;
-export declare const intl: {
-  formatMessage: (_: string) => string;
-};
-export declare const adjustTooltipPosition: () => string;
+export declare const generateId: () => string;
+export declare const getTextDir: () => string;
+export declare const intl: {
+  formatMessage: (_: string) => string;
+};
+export declare const adjustTooltipPosition: () => string;

package/dist/types/global/functions.d.ts

@@ -1,40 +1,40 @@
-import { TooltipPosition } from "./interfaces";
-export declare const intl: import("@formatjs/intl").IntlShape<string>;
-export declare function generateId(): string;
-export declare function debounce(fn: any, wait: number): (this: any) => void;
-export declare function getTextDir(): string;
-export declare function getPosition(el: HTMLElement): {
-  x: number;
-  y: number;
-};
-export declare function findParentWithScrollbar(el: HTMLElement): HTMLElement | undefined;
-export declare function findParentWithHiddenOverflow(el: HTMLElement): HTMLElement | undefined;
-export declare function getClosableElementMeasurements(fixedEl: HTMLElement, closableEl: HTMLElement): {
-  closableElHeight: number;
-  closableElWidth: number;
-  spaceAbove: number;
-  spaceBelow: number;
-  spaceLeft: number;
-  spaceRight: number;
-};
-export declare function shouldOpenUp(fixedEl: HTMLElement, //the element visible on the page when the component is closed
-closableEl: HTMLElement, //the dropdown/popup/etc that becomes visible when the component is open
-offsetAbove?: number, // if closableEl covers a part of fixedEl, that part should be offset
-offsetBelow?: number): boolean;
-export declare function shouldOpenDown(fixedEl: HTMLElement, //the element visible on the page when the component is closed
-closableEl: HTMLElement, //the dropdown/popup/etc that becomes visible when the component is open
-offsetAbove?: number, // if closableEl covers a part of fixedEl, that part should be offset
-offsetBelow?: number): boolean;
-export declare function shouldShiftRight(fixedEl: HTMLElement, closableEl: HTMLElement): boolean;
-export declare function shouldShiftLeft(fixedEl: HTMLElement, closableEl: HTMLElement): boolean;
-export declare function adjustTooltipPosition(tPos: TooltipPosition, el: HTMLElement, tooltipEl: HTMLElement): TooltipPosition;
-export declare function hasRoomRight(x: any, spaceNeeded: number): boolean;
-export declare function checkForActiveElInShadow(element: HTMLElement): HTMLElement;
-export declare function checkForFocusableElInShadow(element: HTMLElement): HTMLElement;
-export declare function isFocusable(element: any): boolean;
-export declare function getFirstFocusableDescendant(element: HTMLElement): HTMLElement | undefined;
-export declare function hasValidType(file: File, types: string): any;
-export declare function getAcceptedMimeTypesList(acceptedExtensions: string[]): any;
-export declare function snakeCaseToCamelCase(str: string): string;
-export declare function getNewIndexToFocus(currentIndex: number, direction: string, listLength: number): number;
-export declare function isRelatedTarget(ev: FocusEvent, id: string): boolean | null;
+import { TooltipPosition } from "./interfaces";
+export declare const intl: import("@formatjs/intl").IntlShape<string>;
+export declare function generateId(): string;
+export declare function debounce(fn: any, wait: number): (this: any) => void;
+export declare function getTextDir(): string;
+export declare function getPosition(el: HTMLElement): {
+  x: number;
+  y: number;
+};
+export declare function findParentWithScrollbar(el: HTMLElement): HTMLElement | undefined;
+export declare function findParentWithHiddenOverflow(el: HTMLElement): HTMLElement | undefined;
+export declare function getClosableElementMeasurements(fixedEl: HTMLElement, closableEl: HTMLElement): {
+  closableElHeight: number;
+  closableElWidth: number;
+  spaceAbove: number;
+  spaceBelow: number;
+  spaceLeft: number;
+  spaceRight: number;
+};
+export declare function shouldOpenUp(fixedEl: HTMLElement, //the element visible on the page when the component is closed
+closableEl: HTMLElement, //the dropdown/popup/etc that becomes visible when the component is open
+offsetAbove?: number, // if closableEl covers a part of fixedEl, that part should be offset
+offsetBelow?: number): boolean;
+export declare function shouldOpenDown(fixedEl: HTMLElement, //the element visible on the page when the component is closed
+closableEl: HTMLElement, //the dropdown/popup/etc that becomes visible when the component is open
+offsetAbove?: number, // if closableEl covers a part of fixedEl, that part should be offset
+offsetBelow?: number): boolean;
+export declare function shouldShiftRight(fixedEl: HTMLElement, closableEl: HTMLElement): boolean;
+export declare function shouldShiftLeft(fixedEl: HTMLElement, closableEl: HTMLElement): boolean;
+export declare function adjustTooltipPosition(tPos: TooltipPosition, el: HTMLElement, tooltipEl: HTMLElement): TooltipPosition;
+export declare function hasRoomRight(x: any, spaceNeeded: number): boolean;
+export declare function checkForActiveElInShadow(element: HTMLElement): HTMLElement;
+export declare function checkForFocusableElInShadow(element: HTMLElement): HTMLElement;
+export declare function isFocusable(element: any): boolean;
+export declare function getFirstFocusableDescendant(element: HTMLElement): HTMLElement | undefined;
+export declare function hasValidType(file: File, types: string): any;
+export declare function getAcceptedMimeTypesList(acceptedExtensions: string[]): any;
+export declare function snakeCaseToCamelCase(str: string): string;
+export declare function getNewIndexToFocus(currentIndex: number, direction: string, listLength: number): number;
+export declare function isRelatedTarget(ev: FocusEvent, id: string): boolean | null;

package/dist/types/global/global.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/types/global/interfaces.d.ts

@@ -1,34 +1,34 @@
-export declare type Notification = {
-  message: string;
-  id: string;
-  link: string;
-  newWindow: boolean;
-};
-export declare type label = string | undefined;
-export declare type CssClassMap = {
-  [className: string]: boolean;
-};
-interface IconLabels {
-  [index: string]: string;
-}
-export declare type Product = {
-  description?: string;
-  samlLinkUrl?: string;
-  iconUrl: string;
-  id: string;
-  linkUrl: string;
-  name: string;
-};
-export declare type NavigatorPayload = {
-  connection_name?: string;
-  current_product_id: string;
-  email: string;
-  logout_url: string;
-  products: Product[];
-};
-export declare const iconLabels: IconLabels;
-export declare function getIconCodeFromName(icon: string): string;
-export declare const defaultMode = "planning";
-export declare const getWmMode: (ref?: any) => any;
-export declare type TooltipPosition = "top" | "bottom" | "left" | "right" | "bottom-left" | "bottom-right" | "top-right" | "top-left";
-export {};
+export declare type Notification = {
+  message: string;
+  id: string;
+  link: string;
+  newWindow: boolean;
+};
+export declare type label = string | undefined;
+export declare type CssClassMap = {
+  [className: string]: boolean;
+};
+interface IconLabels {
+  [index: string]: string;
+}
+export declare type Product = {
+  description?: string;
+  samlLinkUrl?: string;
+  iconUrl: string;
+  id: string;
+  linkUrl: string;
+  name: string;
+};
+export declare type NavigatorPayload = {
+  connection_name?: string;
+  current_product_id: string;
+  email: string;
+  logout_url: string;
+  products: Product[];
+};
+export declare const iconLabels: IconLabels;
+export declare function getIconCodeFromName(icon: string): string;
+export declare const defaultMode = "planning";
+export declare const getWmMode: (ref?: any) => any;
+export declare type TooltipPosition = "top" | "bottom" | "left" | "right" | "bottom-left" | "bottom-right" | "top-right" | "top-left";
+export {};

package/dist/types/global/services/__mocks__/http-service.d.ts

@@ -1,6 +1,6 @@
-export declare const getRequest: (url: string) => Promise<any>;
-export declare const postRequest: (url: string, payload: any) => Promise<void | {
-  url: string;
-}>;
-export declare const deleteRequest: (url: string) => Promise<void>;
-export declare const putRequest: (_url: string, _file: any) => Promise<void>;
+export declare const getRequest: (url: string) => Promise<any>;
+export declare const postRequest: (url: string, payload: any) => Promise<void | {
+  url: string;
+}>;
+export declare const deleteRequest: (url: string) => Promise<void>;
+export declare const putRequest: (_url: string, _file: any) => Promise<void>;

package/dist/types/global/services/http-service.d.ts

@@ -1,4 +1,4 @@
-export declare const getRequest: (url: string) => Promise<any>;
-export declare const postRequest: (url: string, payload: Object) => Promise<any>;
-export declare const deleteRequest: (url: string) => Promise<any>;
-export declare const putRequest: (url: string, file: File, onProgress: Function) => Promise<unknown>;
+export declare const getRequest: (url: string) => Promise<any>;
+export declare const postRequest: (url: string, payload: Object) => Promise<any>;
+export declare const deleteRequest: (url: string) => Promise<any>;
+export declare const putRequest: (url: string, file: File, onProgress: Function) => Promise<unknown>;

package/dist/types/lang/lang.d.ts

@@ -1,5 +1,5 @@
-import en from "./compiled-lang/en.json";
-import fr from "./compiled-lang/fr.json";
-import es from "./compiled-lang/es.json";
-import pig from "./compiled-lang/pig.json";
-export { en, fr, es, pig };
+import en from "./compiled-lang/en.json";
+import fr from "./compiled-lang/fr.json";
+import es from "./compiled-lang/es.json";
+import pig from "./compiled-lang/pig.json";
+export { en, fr, es, pig };

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@watermarkinsights/ripple",
-  "version": "3.7.0-3",
-  "description": "Ripple Component Library",
-  "license": "MIT",
-  "module": "dist/index.js",
-  "main": "dist/index.cjs.js",
-  "unpkg": "dist/ripple/ripple.js",
-  "types": "dist/types/components.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "files": [
-    "dist/"
-  ],
-  "es2017": "dist/esm/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "scripts": {
-    "local.pss": "sh ./scripts/build-local-pss.sh",
-    "local.aqua": "sh ./scripts/build-local-aqf.sh",
-    "local.ripple": "sh ./scripts/build-local-ripple.sh",
-    "local.wrappers": "sh ./scripts/build-local-wrappers.sh",
-    "build": "stencil build",
-    "release": "sh ./scripts/release.sh",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.snapshot": "stencil test --spec --e2e -u",
-    "test.watch": "stencil test --spec --e2e --watch",
-    "test.watchAll": "stencil test --spec --e2e --watchAll",
-    "test.coverage": "stencil test --spec --coverage --collectCoverageFrom='src/**/*.{js,jsx,ts,tsx}'",
-    "extract": "formatjs extract './src/**/*.tsx' --out-file './src/lang/en.json' && node './src/lang/piglatin.js'",
-    "compile": "formatjs compile-folder ./src/lang src/lang/compiled-lang/ --ast",
-    "missing": "node './src/lang/missing.js'"
-  },
-  "devDependencies": {
-    "@axe-core/puppeteer": "^4.1.1",
-    "@formatjs/cli": "^4.2.11",
-    "@stencil/core": "^2.5.2",
-    "@stencil/react-output-target": "^0.0.9",
-    "@stencil/sass": "^1.4.1",
-    "@types/jest": "^26.0.23",
-    "@types/puppeteer": "^5.4.3",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3"
-  },
-  "dependencies": {
-    "@formatjs/intl": "^1.10.5"
-  }
-}
+{
+  "name": "@watermarkinsights/ripple",
+  "version": "3.7.0",
+  "description": "Ripple Component Library",
+  "license": "MIT",
+  "module": "dist/index.js",
+  "main": "dist/index.cjs.js",
+  "unpkg": "dist/ripple/ripple.js",
+  "types": "dist/types/components.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "files": [
+    "dist/"
+  ],
+  "es2017": "dist/esm/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "scripts": {
+    "local.pss": "sh ./scripts/build-local-pss.sh",
+    "local.aqua": "sh ./scripts/build-local-aqf.sh",
+    "local.ripple": "sh ./scripts/build-local-ripple.sh",
+    "local.wrappers": "sh ./scripts/build-local-wrappers.sh",
+    "build": "stencil build",
+    "release": "sh ./scripts/release.sh",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.snapshot": "stencil test --spec --e2e -u",
+    "test.watch": "stencil test --spec --e2e --watch",
+    "test.watchAll": "stencil test --spec --e2e --watchAll",
+    "test.coverage": "stencil test --spec --coverage --collectCoverageFrom='src/**/*.{js,jsx,ts,tsx}'",
+    "extract": "formatjs extract './src/**/*.tsx' --out-file './src/lang/en.json' && node './src/lang/piglatin.js'",
+    "compile": "formatjs compile-folder ./src/lang src/lang/compiled-lang/ --ast",
+    "missing": "node './src/lang/missing.js'"
+  },
+  "devDependencies": {
+    "@axe-core/puppeteer": "^4.1.1",
+    "@formatjs/cli": "^4.2.11",
+    "@stencil/core": "^2.5.2",
+    "@stencil/react-output-target": "^0.0.9",
+    "@stencil/sass": "^1.4.1",
+    "@types/jest": "^26.0.23",
+    "@types/puppeteer": "^5.4.3",
+    "jest": "^26.6.3",
+    "jest-cli": "^26.6.3"
+  },
+  "dependencies": {
+    "@formatjs/intl": "^1.10.5"
+  }
+}

package/dist/ripple/p-c296ff27.js

@@ -1 +0,0 @@
-window.navigator.plugins.length>0&&console.log("Ripple component library","3.7.0-3"),window.addEventListener("keydown",(function(n){var o=n.key||n.keyCode;if("Tab"==o||9===o){var e=new Event("wmUserIsTabbing");window.dispatchEvent(e),document.querySelector("body").classList.add("wmcl-user-is-tabbing")}"ArrowLeft"!=o&&37!==o&&"ArrowUp"!=o&&38!==o&&"ArrowRight"!=o&&39!==o&&"ArrowDown"!=o&&40!==o||(e=new Event("wmUserIsKeying"),window.dispatchEvent(e),document.querySelector("body").classList.add("wmcl-user-is-keying"))})),window.addEventListener("mousedown",(function(){var n=new Event("wmUserIsNotTabbing");window.dispatchEvent(n),document.querySelector("body").classList.remove("wmcl-user-is-tabbing"),document.querySelector("body").classList.remove("wmcl-user-is-keying")}));const n=document.createElement("div");n.id="wm-tooltip-container";const o=document.createElement("div");o.id="wm-tooltip",o.setAttribute("aria-hidden","true"),o.style.position="fixed",o.style.overflow="hidden",o.style.pointerEvents="none",o.style.lineHeight="normal",o.style.fontFamily="inherit",o.style.fontSize="0.875rem",o.style.textTransform="none",o.style.fontWeight="normal",o.style.background="black",o.style.color="#fff",o.style.zIndex="999999",o.style.maxWidth="13.75rem",o.style.marginRight="1.5rem",o.style.padding="0.375rem",o.style.transitionProperty="opacity",o.style.transitionDelay="opacity",o.style.opacity="0",n.appendChild(o),document.querySelector("body").appendChild(n);