@carbonaut/popover-dropdown - npm Package Compare versions

Comparing version 0.0.5 to 0.0.51

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-17637329.js');
+const index = require('./index-78ae4b01.js');
 
@@ -18,3 +18,3 @@ /*
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["popover-dropdown.cjs",[[1,"popover-dropdown",{"options":[16],"currentOption":[1,"current-option"],"selectedOption":[32],"isOpened":[32]}]]]], options);
+  return index.bootstrapLazy([["ion-icon_2.cjs",[[1,"popover-dropdown",{"options":[16],"firstOption":[1,"first-option"],"icon":[1],"selectedOption":[32],"isOpened":[32]}],[1,"ion-icon",{"mode":[1025],"color":[1],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[513],"src":[1],"icon":[8],"size":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32],"ariaLabel":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/cjs/popover-dropdown.cjs.js

 'use strict';
 
-const index = require('./index-17637329.js');
+const index = require('./index-78ae4b01.js');
 
@@ -18,3 +18,3 @@ /*
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["popover-dropdown.cjs",[[1,"popover-dropdown",{"options":[16],"currentOption":[1,"current-option"],"selectedOption":[32],"isOpened":[32]}]]]], options);
+  return index.bootstrapLazy([["ion-icon_2.cjs",[[1,"popover-dropdown",{"options":[16],"firstOption":[1,"first-option"],"icon":[1],"selectedOption":[32],"isOpened":[32]}],[1,"ion-icon",{"mode":[1025],"color":[1],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[513],"src":[1],"icon":[8],"size":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32],"ariaLabel":[32]}]]]], options);
 });

dist/collection/collection-manifest.json

@@ -10,4 +10,11 @@ {
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "ionicons",
+      "tags": [
+        "ion-icon"
+      ]
+    }
+  ],
   "bundles": []
 }

dist/collection/components/popover-dropdown/popover-dropdown.js

 import { Component, Host, h, Prop, State } from '@stencil/core';
 export class PopoverDropdown {
   constructor() {
+    /**
+     * The first option to be displayed, if it's empty it'll show the first one on options array.
+     * @type {string}
+     */
+    this.firstOption = undefined;
+    /**
+     * The icon displayed at the right side of the popover description. It uses ionicons v6 icons.
+     * @type {string}
+     */
+    this.icon = undefined;
     this.selectedOption = undefined;
@@ -8,4 +18,7 @@ this.isOpened = false;
   componentWillLoad() {
+    if (!this.firstOption) {
+      this.firstOption = this.options[0].label;
+    }
     this.options.map(item => {
-      if (item.label === this.currentOption) {
+      if (item.label === this.firstOption) {
         this.selectedOption = item.label;
@@ -29,3 +42,6 @@ }
     return (h(Host, null,
-      h("p", { class: "e-option__description", onClick: () => this.open() }, this.selectedOption),
+      h("p", { class: "e-option__description", onClick: () => this.open() },
+        this.selectedOption,
+        this.icon ? h("ion-icon", { class: "e-option__icon", name: this.icon }) : ''),
+      this.isOpened ? h("div", { class: "e-option__backdrop", onClick: () => this.open() }) : '',
       this.isOpened ? (h("div", { class: "e-option__tooltip" }, this.options.map(item => item.label === this.selectedOption ? ('') : (h("div", { class: "e-option__tooltip-item", onClick: () => this.changeOption(item.label, item.callback) }, item.label))))) : ('')));
@@ -57,7 +73,10 @@ }
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "name": "type",
+            "text": "{Option[]}"
+          }],
+        "text": "The options list of the popover."
       }
     },
-    "currentOption": {
+    "firstOption": {
       "type": "string",
@@ -73,7 +92,32 @@ "mutable": false,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "name": "type",
+            "text": "{string}"
+          }],
+        "text": "The first option to be displayed, if it's empty it'll show the first one on options array."
       },
-      "attribute": "current-option",
-      "reflect": false
+      "attribute": "first-option",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "type",
+            "text": "{string}"
+          }],
+        "text": "The icon displayed at the right side of the popover description. It uses ionicons v6 icons."
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "undefined"
     }
@@ -80,0 +124,0 @@ }; }

dist/collection/index.js

@@ -1,1 +0,1 @@
-export {};
+import 'ionicons';

dist/components/popover-dropdown.js

 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
 
-const popoverDropdownCss = ":host{cursor:pointer;display:block;max-width:fit-content}.e-option__description{font-size:16px;font-weight:bold;padding:16px;margin:0}.e-option__tooltip{position:relative;border:1px solid #e8e8e8;border-radius:8px}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-11px;background:white;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip-item{font-size:16px;padding:16px}.e-option__tooltip-item:hover{background-color:#e8e8e8}";
+const popoverDropdownCss = ":host{cursor:pointer;display:block;max-width:fit-content}.e-option__description{display:flex;align-items:center;font-size:16px;font-weight:bold;padding:16px;margin:0;z-index:10}.e-option__icon{font-size:24px;margin-left:6px}.e-option__tooltip{position:relative;border:1px solid #e8e8e8;border-radius:8px;padding:8px;box-shadow:0 6px 6px 0 rgba(0, 0, 0, 0.08);z-index:10;max-width:fit-content;margin:0 auto}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-12px;height:0px;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip::after{content:'';display:block;position:absolute;right:50%;top:-11px;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:transparent transparent white transparent}.e-option__backdrop{position:fixed;top:0;bottom:0;right:0;left:0;z-index:9}.e-option__tooltip-item{font-size:16px;padding:6px 8px 6px 16px;border-radius:4px;text-align:right}.e-option__tooltip-item:hover{background-color:#faf8fd}";
 
@@ -10,2 +11,12 @@ const PopoverDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
+    /**
+     * The first option to be displayed, if it's empty it'll show the first one on options array.
+     * @type {string}
+     */
+    this.firstOption = undefined;
+    /**
+     * The icon displayed at the right side of the popover description. It uses ionicons v6 icons.
+     * @type {string}
+     */
+    this.icon = undefined;
     this.selectedOption = undefined;
@@ -15,4 +26,7 @@ this.isOpened = false;
   componentWillLoad() {
+    if (!this.firstOption) {
+      this.firstOption = this.options[0].label;
+    }
     this.options.map(item => {
-      if (item.label === this.currentOption) {
+      if (item.label === this.firstOption) {
         this.selectedOption = item.label;
@@ -35,3 +49,3 @@ }
   render() {
-    return (h(Host, null, h("p", { class: "e-option__description", onClick: () => this.open() }, this.selectedOption), this.isOpened ? (h("div", { class: "e-option__tooltip" }, this.options.map(item => item.label === this.selectedOption ? ('') : (h("div", { class: "e-option__tooltip-item", onClick: () => this.changeOption(item.label, item.callback) }, item.label))))) : ('')));
+    return (h(Host, null, h("p", { class: "e-option__description", onClick: () => this.open() }, this.selectedOption, this.icon ? h("ion-icon", { class: "e-option__icon", name: this.icon }) : ''), this.isOpened ? h("div", { class: "e-option__backdrop", onClick: () => this.open() }) : '', this.isOpened ? (h("div", { class: "e-option__tooltip" }, this.options.map(item => item.label === this.selectedOption ? ('') : (h("div", { class: "e-option__tooltip-item", onClick: () => this.changeOption(item.label, item.callback) }, item.label))))) : ('')));
   }
@@ -41,3 +55,4 @@ static get style() { return popoverDropdownCss; }
     "options": [16],
-    "currentOption": [1, "current-option"],
+    "firstOption": [1, "first-option"],
+    "icon": [1],
     "selectedOption": [32],
@@ -50,3 +65,3 @@ "isOpened": [32]
   }
-  const components = ["popover-dropdown"];
+  const components = ["popover-dropdown", "ion-icon"];
   components.forEach(tagName => { switch (tagName) {
@@ -58,2 +73,7 @@ case "popover-dropdown":
       break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
@@ -60,0 +80,0 @@ }

dist/esm/loader.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-cf7af21c.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-583d164d.js';
 
@@ -13,3 +13,3 @@ /*
   return patchEsm().then(() => {
-  return bootstrapLazy([["popover-dropdown",[[1,"popover-dropdown",{"options":[16],"currentOption":[1,"current-option"],"selectedOption":[32],"isOpened":[32]}]]]], options);
+  return bootstrapLazy([["ion-icon_2",[[1,"popover-dropdown",{"options":[16],"firstOption":[1,"first-option"],"icon":[1],"selectedOption":[32],"isOpened":[32]}],[1,"ion-icon",{"mode":[1025],"color":[1],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[513],"src":[1],"icon":[8],"size":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32],"ariaLabel":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/esm/popover-dropdown.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-cf7af21c.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-583d164d.js';
 
@@ -16,3 +16,3 @@ /*
 patchBrowser().then(options => {
-  return bootstrapLazy([["popover-dropdown",[[1,"popover-dropdown",{"options":[16],"currentOption":[1,"current-option"],"selectedOption":[32],"isOpened":[32]}]]]], options);
+  return bootstrapLazy([["ion-icon_2",[[1,"popover-dropdown",{"options":[16],"firstOption":[1,"first-option"],"icon":[1],"selectedOption":[32],"isOpened":[32]}],[1,"ion-icon",{"mode":[1025],"color":[1],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[513],"src":[1],"icon":[8],"size":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32],"ariaLabel":[32]}]]]], options);
 });

dist/popover-dropdown/popover-dropdown.esm.js

@@ -1,1 +0,1 @@
-import{p as o,b as p}from"./p-6d81c762.js";(()=>{const p=import.meta.url,n={};return""!==p&&(n.resourcesUrl=new URL(".",p).href),o(n)})().then((o=>p([["p-44582187",[[1,"popover-dropdown",{options:[16],currentOption:[1,"current-option"],selectedOption:[32],isOpened:[32]}]]]],o)));
+import{p as i,b as o}from"./p-dfda81e2.js";(()=>{const o=import.meta.url,e={};return""!==o&&(e.resourcesUrl=new URL(".",o).href),i(e)})().then((i=>o([["p-2d2377ae",[[1,"popover-dropdown",{options:[16],firstOption:[1,"first-option"],icon:[1],selectedOption:[32],isOpened:[32]}],[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32],ariaLabel:[32]}]]]],i)));

dist/types/components.d.ts

@@ -11,3 +11,16 @@ /* eslint-disable */
     interface PopoverDropdown {
-        "currentOption": string;
+        /**
+          * The first option to be displayed, if it's empty it'll show the first one on options array.
+          * @type {string}
+         */
+        "firstOption": string;
+        /**
+          * The icon displayed at the right side of the popover description. It uses ionicons v6 icons.
+          * @type {string}
+         */
+        "icon": string;
+        /**
+          * The options list of the popover.
+          * @type {Option[]}
+         */
         "options": Option[];
@@ -29,3 +42,16 @@ }
     interface PopoverDropdown {
-        "currentOption"?: string;
+        /**
+          * The first option to be displayed, if it's empty it'll show the first one on options array.
+          * @type {string}
+         */
+        "firstOption"?: string;
+        /**
+          * The icon displayed at the right side of the popover description. It uses ionicons v6 icons.
+          * @type {string}
+         */
+        "icon"?: string;
+        /**
+          * The options list of the popover.
+          * @type {Option[]}
+         */
         "options"?: Option[];
@@ -32,0 +58,0 @@ }

dist/types/components/popover-dropdown/popover-dropdown.d.ts

@@ -6,4 +6,17 @@ export interface Option {
 export declare class PopoverDropdown {
+  /**
+   * The options list of the popover.
+   * @type {Option[]}
+   */
   options: Option[];
-  currentOption: string;
+  /**
+   * The first option to be displayed, if it's empty it'll show the first one on options array.
+   * @type {string}
+   */
+  firstOption: string;
+  /**
+   * The icon displayed at the right side of the popover description. It uses ionicons v6 icons.
+   * @type {string}
+   */
+  icon: string;
   selectedOption: string;
@@ -10,0 +23,0 @@ isOpened: boolean;

dist/types/index.d.ts

 export { Components, JSX } from './components';
+import 'ionicons';

package.json

 {
   "name": "@carbonaut/popover-dropdown",
-  "version": "0.0.5",
+  "version": "0.0.51",
   "description": "Generic popover dropdown menu made by Carbonaut.",
@@ -5,0 +5,0 @@ "author": "Carbonaut",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1127311

increased by271.12%

Number of package files

1379

increased by3034.09%

Lines of code

6317

increased by34.06%

Worsened metrics

Number of low supply chain risk alerts

9

increased by800%

Number of medium supply chain risk alerts

11

increased by450%

No dependency changes