@whitesev/pops 2.2.1 → 2.2.2

package/dist/types/src/Pops.d.ts

@@ -21093,7 +21093,7 @@ declare class Pops {
      * searchSuggestion.setAllEvent();
      */
     searchSuggestion: <T = any>(details: PopsSearchSuggestionDetails<T>) => {
-        selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];
+        selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
         $el: {
             root: HTMLElement;
             $hintULContainer: HTMLUListElement;

package/dist/types/src/components/panel/index.d.ts

@@ -1,4 +1,5 @@
 import type { PopsPanelDetails, PopsPanelEventType } from "./types";
+import type { PopsType } from "../../types/main";
 export declare const PopsPanel: {
     init(details: PopsPanelDetails): {
         addEventListener: <K extends keyof PopsPanelEventType>(event: K, listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void, options?: boolean | EventListenerOptions) => void;
@@ -13,6 +14,6 @@ export declare const PopsPanel: {
         animElement: HTMLDivElement;
         popsElement: HTMLDivElement;
         maskElement?: HTMLDivElement | undefined;
-        mode: import("../../types/main").PopsType;
+        mode: PopsType;
     };
 };

package/dist/types/src/components/searchSuggestion/index.d.ts

@@ -4,7 +4,7 @@ export declare const PopsSearchSuggestion: {
         /**
          * 当前的环境，可以是document，可以是shadowroot，默认是document
          */
-        selfDocument: ShadowRoot | Document | (ShadowRoot | Document)[];
+        selfDocument: Document | ShadowRoot | (Document | ShadowRoot)[];
         $el: {
             /** 根元素 */
             root: HTMLElement;

package/dist/types/src/handler/PopsElementHandler.d.ts

@@ -1,4 +1,4 @@
-import type { PopsSupportAnim, PopsSupportBottomBtn, PopsSupportContent, PopsSupportHeaderTitle, PopsSupportAnimType, PopsTypeSupportBottomBtn, PopsTypeSupportContent, PopsTypeSupportHeaderTitle } from "../types/main";
+import type { PopsSupportAnimDetails, PopsSupportBottomBtnDetails, PopsSupportContentDetails, PopsSupportHeaderTitleDetails, PopsSupportAnimDetailsType, PopsSupportBottomBtnDetailsType, PopsSupportContentDetailsType, PopsSupportHeaderTitleDetailsType } from "../types/main";
 export declare const PopsElementHandler: {
     /**
      * 获取遮罩层HTML
@@ -16,25 +16,25 @@ export declare const PopsElementHandler: {
      * @param bottomBtnHTML
      * @param zIndex
      */
-    getAnimHTML(guid: string, type: PopsSupportAnimType, config: PopsSupportAnim[keyof PopsSupportAnim], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
+    getAnimHTML(guid: string, type: PopsSupportAnimDetailsType, config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
     /**
      * 获取顶部按钮层HTML
      * @param type
      * @param config
      */
-    getHeaderBtnHTML(type: PopsTypeSupportHeaderTitle, config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]): string;
+    getHeaderBtnHTML(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): string;
     /**
      * 获取底部按钮层HTML
      * @param type
      * @param config
      */
-    getBottomBtnHTML(type: PopsTypeSupportBottomBtn, config: Omit<PopsSupportBottomBtn[keyof PopsSupportBottomBtn], "content">): string;
+    getBottomBtnHTML(type: PopsSupportBottomBtnDetailsType, config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">): string;
     /**
      * 获取标题style
      * @param type 弹窗类型
      * @param config 弹窗配置
      */
-    getHeaderStyle(type: PopsTypeSupportHeaderTitle, config: PopsSupportHeaderTitle[keyof PopsSupportHeaderTitle]): {
+    getHeaderStyle(type: PopsSupportHeaderTitleDetailsType, config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]): {
         headerStyle: string;
         headerPStyle: string;
     };
@@ -43,7 +43,7 @@ export declare const PopsElementHandler: {
      * @param type 弹窗类型
      * @param config 弹窗配置
      */
-    getContentStyle(type: PopsTypeSupportContent, config: PopsSupportContent[keyof PopsSupportContent]): {
+    getContentStyle(type: PopsSupportContentDetailsType, config: PopsSupportContentDetails[keyof PopsSupportContentDetails]): {
         contentStyle: string;
         contentPStyle: string;
     };

package/dist/types/src/handler/PopsHandler.d.ts

@@ -9,7 +9,7 @@ import type { PopsPromptDetails } from "../components/prompt/types/index";
 import type { PopsCommonConfig } from "../types/components";
 import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
 import { PopsInstCommonConfig } from "../types/inst";
-import type { PopsDetails, PopsInstStoreType, PopsType, PopsSupportAnimType } from "../types/main";
+import type { PopsInstStoreType, PopsType, PopsSupportAnimDetailsType, PopsSupportOnlyDetails } from "../types/main";
 export declare const PopsHandler: {
     /**
      * 创建shadow
@@ -50,7 +50,7 @@ export declare const PopsHandler: {
      * @param animElement
      * @param type
      */
-    handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimType): {
+    handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimDetailsType): {
         /**
          * 主元素
          */
@@ -217,7 +217,7 @@ export declare const PopsHandler: {
      * @param type 当前弹窗类型
      * @param config 配置
      */
-    handleOnly<T extends Required<PopsDetails[keyof PopsDetails]>>(type: PopsType, config: T): T;
+    handleOnly<T extends Required<PopsSupportOnlyDetails[keyof PopsSupportOnlyDetails]>>(type: PopsType, config: T): T;
     /**
      * 处理把已创建的元素保存到内部环境中
      * @param type 当前弹窗类型

package/dist/types/src/types/components.d.ts

@@ -21,17 +21,17 @@ export interface PopsTitleConfig {
 		 */
 		text?: string;
 		/**
-		 * 文字的位置
+		 * 标题文字的位置
 		 * @default "left"
 		 */
 		position?: PopsTextAlign;
 		/**
-		 * 文字是否是html
+		 * 标题文字是否是html
 		 * @default false
 		 */
 		html?: boolean;
 		/**
-		 * 文字的自定义CSS
+		 * 自定义CSS
 		 */
 		style?: string;
 	};
@@ -47,12 +47,12 @@ export interface PopsContentConfig {
 		 */
 		text?: string;
 		/**
-		 * 文字是否是html
+		 * 内容文字是否是html
 		 * @default false
 		 */
 		html?: boolean;
 		/**
-		 * 文字的自定义CSS
+		 * 自定义CSS
 		 */
 		style?: string;
 	};

package/dist/types/src/types/main.d.ts

@@ -16,12 +16,13 @@ import type { PopsPanelTextAreaDetails } from "../components/panel/types/compone
 import type { PopsPromptDetails } from "../components/prompt/types/index";
 import { PopsRightClickMenuDetails } from "../components/rightClickMenu/types";
 import { PopsToolTipDetails } from "../components/tooltip/types/index";
+import type { PopsSearchSuggestionDetails } from "../components/searchSuggestion/types";
 
 export interface PopsUtilsOwnObject<V extends any> {
 	[key: string]: V | PopsUtilsOwnObject<V>;
 }
 
-/** pops的所有类型配置 10个 */
+/** pops所有的类型配置 11个*/
 export interface PopsDetails {
 	alert: PopsAlertDetails;
 	confirm: PopsConfirmDetails;
@@ -33,53 +34,55 @@ export interface PopsDetails {
 	folder: PopsFolderDetails;
 	panel: PopsPanelDetails;
 	rightClickMenu: PopsRightClickMenuDetails;
+	searchSuggestion: PopsSearchSuggestionDetails;
 }
 
-/** pops所有的类型 10个 */
+/** pops的类型 */
 export type PopsType = keyof PopsDetails;
 
-/** 存储实例的类型 10个 */
-export type PopsInstStoreType = PopsType;
+/** pops中支持only的配置 */
+export type PopsSupportOnlyDetails = Omit<PopsDetails, "searchSuggestion">;
+
+/** 存储实例的类型 */
+export type PopsInstStoreType = keyof Omit<PopsDetails, "searchSuggestion">;
 
 /** pops弹窗支持动画元素的配置 8个 */
-export type PopsSupportAnim = Omit<PopsDetails, "tooltip" | "rightClickMenu">;
+export type PopsSupportAnimDetails = Omit<
+	PopsDetails,
+	"tooltip" | "rightClickMenu" | "searchSuggestion"
+>;
 
 /** pops弹窗支持动画元素的类型 */
-export type PopsSupportAnimType = keyof PopsSupportAnim;
+export type PopsSupportAnimDetailsType = keyof PopsSupportAnimDetails;
 
 /** pops弹窗支持标题栏的配置 */
-export interface PopsSupportHeaderTitle {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	iframe: PopsIframeDetails;
-	drawer: PopsDrawerDetails;
-	folder: PopsFolderDetails;
-	panel: PopsPanelDetails;
-}
+export type PopsSupportHeaderTitleDetails = Pick<
+	PopsDetails,
+	"alert" | "confirm" | "prompt" | "iframe" | "drawer" | "folder" | "panel"
+>;
+
 /** pops弹窗支持标题栏的类型 */
-export type PopsTypeSupportHeaderTitle = keyof PopsSupportHeaderTitle;
+export type PopsSupportHeaderTitleDetailsType =
+	keyof PopsSupportHeaderTitleDetails;
 
 /** pops支持底部按钮的配置 */
-export interface PopsSupportBottomBtn {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	drawer: PopsDrawerDetails;
-}
+export type PopsSupportBottomBtnDetails = Pick<
+	PopsDetails,
+	"alert" | "confirm" | "prompt" | "drawer"
+>;
+
 /** pops支持底部按钮的类型 */
-export type PopsTypeSupportBottomBtn = keyof PopsSupportHeaderTitle;
+export type PopsSupportBottomBtnDetailsType =
+	keyof PopsSupportHeaderTitleDetails;
 
 /** pops支持中间内容的配置 */
-export interface PopsSupportContent {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	drawer: PopsDrawerDetails;
-	loading: PopsLoadingDetails;
-}
+export type PopsSupportContentDetails = Pick<
+	PopsDetails,
+	"alert" | "confirm" | "prompt" | "drawer" | "loading"
+>;
+
 /** pops支持中间内容的类型 */
-export type PopsTypeSupportContent = keyof PopsSupportContent;
+export type PopsSupportContentDetailsType = keyof PopsSupportContentDetails;
 
 /** panel的各种类型的配置项 */
 export type PopsPanelFormsTotalDetails =

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",

package/src/components/alert/index.ts

@@ -13,11 +13,11 @@ export const PopsAlert = {
 	init(details: PopsAlertDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType: PopsType = "alert";
+		const popsType: PopsType = "alert";
 		let config = PopsAlertConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
@@ -54,32 +54,32 @@ export const PopsAlert = {
 		// 先把z-index提取出来
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
-		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
-		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let animHTML = PopsElementHandler.getAnimHTML(
 			guid,
-			PopsType,
+			popsType,
 			config,
 			/*html*/ `
-			<div class="pops-title pops-${PopsType}-title" style="text-align: ${
+			<div class="pops-title pops-${popsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-			<div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
+			<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
-					: `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
+					: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
 			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
@@ -94,7 +94,7 @@ export const PopsAlert = {
 			headerCloseBtnElement: $headerCloseBtn,
 			btnOkElement,
 			titleElement: $title,
-		} = PopsHandler.handleQueryElement($anim, PopsType);
+		} = PopsHandler.handleQueryElement($anim, popsType);
 
 		/** 遮罩层元素 */
 		let $mask: HTMLDivElement | null = null;
@@ -105,7 +105,7 @@ export const PopsAlert = {
 
 		if (config.mask.enable) {
 			let _handleMask_ = PopsHandler.handleMask({
-				type: PopsType,
+				type: popsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
@@ -119,7 +119,7 @@ export const PopsAlert = {
 			guid,
 			$shadowContainer,
 			$shadowRoot,
-			PopsType,
+			popsType,
 			$anim,
 			$pops!,
 			$mask!,
@@ -153,7 +153,7 @@ export const PopsAlert = {
 			$anim.after($mask);
 		}
 		/* 保存 */
-		PopsHandler.handlePush(PopsType, {
+		PopsHandler.handlePush(popsType, {
 			guid: guid,
 
 			animElement: $anim,

package/src/components/confirm/index.ts

@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -12,11 +13,11 @@ export const PopsConfirm = {
 	init(details: PopsConfirmDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "confirm";
+		const popsType: PopsType = "confirm";
 		let config = PopsConfirmConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
@@ -54,32 +55,32 @@ export const PopsConfirm = {
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
-		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
-		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let animHTML = PopsElementHandler.getAnimHTML(
 			guid,
-			PopsType,
+			popsType,
 			config,
 			/*html*/ `
-            <div class="pops-title pops-${PopsType}-title" style="text-align: ${
+            <div class="pops-title pops-${popsType}-title" style="text-align: ${
 				config.title.position
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
-                        <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
+                        <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
-					: `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
+					: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
 			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
@@ -95,7 +96,7 @@ export const PopsConfirm = {
 			btnOkElement: $btnOk,
 			btnCancelElement: $btnCancel,
 			btnOtherElement: $btnOther,
-		} = PopsHandler.handleQueryElement($anim, PopsType);
+		} = PopsHandler.handleQueryElement($anim, popsType);
 		/**
 		 * 遮罩层元素
 		 */
@@ -108,7 +109,7 @@ export const PopsConfirm = {
 		if (config.mask.enable) {
 			// 启用遮罩层
 			let _handleMask_ = PopsHandler.handleMask({
-				type: PopsType,
+				type: popsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
@@ -121,7 +122,7 @@ export const PopsConfirm = {
 			guid,
 			$shadowContainer,
 			$shadowRoot,
-			PopsType,
+			popsType,
 
 			$anim,
 			$pops!,
@@ -164,7 +165,7 @@ export const PopsConfirm = {
 		if ($mask != null) {
 			$anim.after($mask);
 		}
-		PopsHandler.handlePush(PopsType, {
+		PopsHandler.handlePush(popsType, {
 			guid: guid,
 
 			animElement: $anim,

package/src/components/drawer/index.ts

@@ -2,6 +2,7 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsDrawerConfig } from "./config";
@@ -11,11 +12,11 @@ export const PopsDrawer = {
 	init(details: PopsDrawerDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType = "drawer";
+		const popsType: PopsType = "drawer";
 		let config = PopsDrawerConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);
-		config = PopsHandler.handleOnly(PopsType, config);
+		config = PopsHandler.handleOnly(popsType, config);
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
@@ -53,34 +54,34 @@ export const PopsDrawer = {
 		let zIndex = PopsHandler.handleZIndex(config.zIndex);
 		let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
 
-		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
-		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
+		let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(popsType, config);
+		let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(popsType, config);
 		let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(
-			PopsType,
+			popsType,
 			config
 		);
 		let animHTML = PopsElementHandler.getAnimHTML(
 			guid,
-			PopsType,
+			popsType,
 			config,
 			/*html*/ `
             ${
 							config.title.enable
-								? /*html*/ `<div class="pops-title pops-${PopsType}-title" style="${headerStyle}">${
+								? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${
 										config.title.html
 											? config.title.text
-											: /*html*/ `<p pops class="pops-${PopsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
+											: /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`
 								  }${headerBtnHTML}</div>`
 								: ""
 						}
-            <div class="pops-content pops-${PopsType}-content" style="${contentStyle}">${
+            <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${
 				config.content.html
 					? config.content.text
-					: `<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
+					: `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`
 			}</div>${bottomBtnHTML}`,
 			bottomBtnHTML,
 			zIndex
@@ -95,7 +96,7 @@ export const PopsDrawer = {
 			btnCancelElement,
 			btnOkElement,
 			btnOtherElement,
-		} = PopsHandler.handleQueryElement($anim, PopsType);
+		} = PopsHandler.handleQueryElement($anim, popsType);
 		let $pops = popsElement!;
 		let $headerCloseBtn = headerCloseBtnElement!;
 		let $btnCancel = btnCancelElement!;
@@ -112,7 +113,7 @@ export const PopsDrawer = {
 
 		if (config.mask.enable) {
 			let _handleMask_ = PopsHandler.handleMask({
-				type: PopsType,
+				type: popsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
@@ -125,7 +126,7 @@ export const PopsDrawer = {
 			guid,
 			$shadowContainer,
 			$shadowRoot,
-			PopsType,
+			popsType,
 			$anim,
 			$pops,
 			$mask!,
@@ -245,7 +246,7 @@ export const PopsDrawer = {
 			$anim.after($mask);
 		}
 
-		PopsHandler.handlePush(PopsType, {
+		PopsHandler.handlePush(popsType, {
 			guid: guid,
 			animElement: $anim,
 			popsElement: $pops,