@carbonaut/popover-dropdown - npm Package Compare versions

Comparing version 0.0.53 to 0.0.54

dist/cjs/ion-icon_2.cjs.entry.js

@@ -310,3 +310,3 @@ 'use strict';
 
-const popoverDropdownCss = ":host{cursor:pointer;display:block;max-width:fit-content;position:relative}.e-option__description{display:flex;align-items:center;font-size:16px;font-weight:bold;margin:0;z-index:10}.e-option__icon{font-size:24px;margin-left:6px}.e-option__tooltip{position:absolute;border:1px solid #e8e8e8;top:36px;border-radius:4px;padding:8px;box-shadow:0 6px 6px 0px rgba(0, 0, 0, 0.08);z-index:10;max-width:fit-content;margin:0 auto;background-color:#ffffff}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-24px;height:0px;left:50%;margin-left:-12px;border-width:12px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip::after{content:'';display:block;position:absolute;right:50%;top:-23px;left:50%;margin-left:-12px;border-width:12px;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}";
+const popoverDropdownCss = ":host{cursor:pointer;display:block;max-width:fit-content;position:relative;--text-color:#111122;--highlight-color:#111122}.e-option__description{display:flex;align-items:center;font-size:16px;font-weight:bold;margin:0;z-index:10;color:var(--text-color)}.e-option__description--active{color:var(--highlight-color)}.e-option__description:hover{color:var(--highlight-color)}.e-option__icon{font-size:24px;margin-left:6px}.e-option__tooltip{position:absolute;border:1px solid #e8e8e8;top:36px;border-radius:4px;padding:8px;box-shadow:0 6px 6px 0px rgba(0, 0, 0, 0.08);z-index:10;max-width:fit-content;margin:0 auto;background-color:#ffffff}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-24px;height:0px;left:50%;margin-left:-12px;border-width:12px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip::after{content:'';display:block;position:absolute;right:50%;top:-23px;left:50%;margin-left:-12px;border-width:12px;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{color:var(--text-color);font-size:16px;padding:6px 8px 6px 16px;border-radius:4px;text-align:right}.e-option__tooltip-item:hover{color:var(--highlight-color);background-color:#faf8fd}";
 
@@ -352,3 +352,3 @@ const PopoverDropdown = class {
   render() {
-    return (index.h(index.Host, null, index.h("p", { class: "e-option__description", onClick: () => this.open() }, this.selectedOption, this.icon ? index.h("ion-icon", { class: "e-option__icon", name: this.icon }) : ''), this.isOpened ? index.h("div", { class: "e-option__backdrop", onClick: () => this.open() }) : '', this.isOpened ? (index.h("div", { class: "e-option__tooltip" }, this.options.map(item => item.label === this.selectedOption ? ('') : (index.h("div", { class: "e-option__tooltip-item", onClick: () => this.changeOption(item.label, item.callback) }, item.label))))) : ('')));
+    return (index.h(index.Host, null, this.isOpened ? index.h("div", { class: "e-option__backdrop", onClick: () => this.open() }) : '', index.h("p", { class: this.isOpened ? 'e-option__description e-option__description--active' : 'e-option__description', onClick: () => this.open() }, this.selectedOption, this.icon ? index.h("ion-icon", { class: "e-option__icon", name: this.icon }) : ''), this.isOpened ? (index.h("div", { class: "e-option__tooltip" }, this.options.map(item => item.label === this.selectedOption ? ('') : (index.h("div", { class: "e-option__tooltip-item", onClick: () => this.changeOption(item.label, item.callback) }, item.label))))) : ('')));
   }
@@ -355,0 +355,0 @@ };

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

@@ -41,6 +41,6 @@ import { Component, Host, h, Prop, State } from '@stencil/core';
     return (h(Host, null,
-      h("p", { class: "e-option__description", onClick: () => this.open() },
+      this.isOpened ? h("div", { class: "e-option__backdrop", onClick: () => this.open() }) : '',
+      h("p", { class: this.isOpened ? 'e-option__description e-option__description--active' : '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))))) : ('')));
@@ -47,0 +47,0 @@ }

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;position:relative}.e-option__description{display:flex;align-items:center;font-size:16px;font-weight:bold;margin:0;z-index:10}.e-option__icon{font-size:24px;margin-left:6px}.e-option__tooltip{position:absolute;border:1px solid #e8e8e8;top:36px;border-radius:4px;padding:8px;box-shadow:0 6px 6px 0px rgba(0, 0, 0, 0.08);z-index:10;max-width:fit-content;margin:0 auto;background-color:#ffffff}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-24px;height:0px;left:50%;margin-left:-12px;border-width:12px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip::after{content:'';display:block;position:absolute;right:50%;top:-23px;left:50%;margin-left:-12px;border-width:12px;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}";
+const popoverDropdownCss = ":host{cursor:pointer;display:block;max-width:fit-content;position:relative;--text-color:#111122;--highlight-color:#111122}.e-option__description{display:flex;align-items:center;font-size:16px;font-weight:bold;margin:0;z-index:10;color:var(--text-color)}.e-option__description--active{color:var(--highlight-color)}.e-option__description:hover{color:var(--highlight-color)}.e-option__icon{font-size:24px;margin-left:6px}.e-option__tooltip{position:absolute;border:1px solid #e8e8e8;top:36px;border-radius:4px;padding:8px;box-shadow:0 6px 6px 0px rgba(0, 0, 0, 0.08);z-index:10;max-width:fit-content;margin:0 auto;background-color:#ffffff}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-24px;height:0px;left:50%;margin-left:-12px;border-width:12px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip::after{content:'';display:block;position:absolute;right:50%;top:-23px;left:50%;margin-left:-12px;border-width:12px;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{color:var(--text-color);font-size:16px;padding:6px 8px 6px 16px;border-radius:4px;text-align:right}.e-option__tooltip-item:hover{color:var(--highlight-color);background-color:#faf8fd}";
 
@@ -47,3 +47,3 @@ const PopoverDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
-    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))))) : ('')));
+    return (h(Host, null, this.isOpened ? h("div", { class: "e-option__backdrop", onClick: () => this.open() }) : '', h("p", { class: this.isOpened ? 'e-option__description e-option__description--active' : '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__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))))) : ('')));
   }
@@ -50,0 +50,0 @@ static get style() { return popoverDropdownCss; }

dist/esm/ion-icon_2.entry.js

@@ -306,3 +306,3 @@ import { g as getAssetPath, r as registerInstance, h, H as Host, a as getElement } from './index-583d164d.js';
 
-const popoverDropdownCss = ":host{cursor:pointer;display:block;max-width:fit-content;position:relative}.e-option__description{display:flex;align-items:center;font-size:16px;font-weight:bold;margin:0;z-index:10}.e-option__icon{font-size:24px;margin-left:6px}.e-option__tooltip{position:absolute;border:1px solid #e8e8e8;top:36px;border-radius:4px;padding:8px;box-shadow:0 6px 6px 0px rgba(0, 0, 0, 0.08);z-index:10;max-width:fit-content;margin:0 auto;background-color:#ffffff}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-24px;height:0px;left:50%;margin-left:-12px;border-width:12px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip::after{content:'';display:block;position:absolute;right:50%;top:-23px;left:50%;margin-left:-12px;border-width:12px;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}";
+const popoverDropdownCss = ":host{cursor:pointer;display:block;max-width:fit-content;position:relative;--text-color:#111122;--highlight-color:#111122}.e-option__description{display:flex;align-items:center;font-size:16px;font-weight:bold;margin:0;z-index:10;color:var(--text-color)}.e-option__description--active{color:var(--highlight-color)}.e-option__description:hover{color:var(--highlight-color)}.e-option__icon{font-size:24px;margin-left:6px}.e-option__tooltip{position:absolute;border:1px solid #e8e8e8;top:36px;border-radius:4px;padding:8px;box-shadow:0 6px 6px 0px rgba(0, 0, 0, 0.08);z-index:10;max-width:fit-content;margin:0 auto;background-color:#ffffff}.e-option__tooltip::before{content:'';display:block;position:absolute;right:50%;top:-24px;height:0px;left:50%;margin-left:-12px;border-width:12px;border-style:solid;border-color:transparent transparent #e8e8e8 transparent}.e-option__tooltip::after{content:'';display:block;position:absolute;right:50%;top:-23px;left:50%;margin-left:-12px;border-width:12px;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{color:var(--text-color);font-size:16px;padding:6px 8px 6px 16px;border-radius:4px;text-align:right}.e-option__tooltip-item:hover{color:var(--highlight-color);background-color:#faf8fd}";
 
@@ -348,3 +348,3 @@ const PopoverDropdown = class {
   render() {
-    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))))) : ('')));
+    return (h(Host, null, this.isOpened ? h("div", { class: "e-option__backdrop", onClick: () => this.open() }) : '', h("p", { class: this.isOpened ? 'e-option__description e-option__description--active' : '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__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))))) : ('')));
   }
@@ -351,0 +351,0 @@ };

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

@@ -1,1 +0,1 @@
-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-1ee34548",[[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)));
+import{p as i,b as o}from"./p-dfda81e2.js";(()=>{const o=import.meta.url,n={};return""!==o&&(n.resourcesUrl=new URL(".",o).href),i(n)})().then((i=>o([["p-64524a96",[[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)));

package.json

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

New alerts

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

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

Improved metrics

Total package byte prevSize

1129157

increased by0.14%

Lines of code

6335

increased by0.25%

No dependency changes