@neovici/cosmoz-bottom-bar
Advanced tools
@neovici/cosmoz-bottom-bar - npm Package Compare versions
Comparing version 4.2.0 to 4.3.0
@@ -1,9 +0,3 @@ | ||
| import '@webcomponents/shadycss/entrypoints/apply-shim'; | ||
| import '@neovici/cosmoz-dropdown'; | ||
| import '@polymer/iron-icons'; | ||
| import '@polymer/paper-icon-button'; | ||
| import '@polymer/paper-menu-button'; | ||
| import '@polymer/paper-listbox'; | ||
| import '@polymer/iron-selector/iron-selector'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag'; | ||
@@ -22,2 +16,3 @@ export default html` | ||
| z-index: 10; | ||
| --cosmoz-dropdown-spacing: 0 0 5px 0; | ||
| } | ||
@@ -29,9 +24,7 @@ | ||
| #bar, #info, #toolbar, #extraToolbarSlot, #menu, #dropdown ::slotted(:not(slot)) { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| #bar { | ||
| padding: 0 3%; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
@@ -42,27 +35,14 @@ | ||
| padding-right: 3%; | ||
| margin-right: auto; | ||
| white-space: nowrap; | ||
| } | ||
| #dropdownButton { | ||
| color: var(--cosmoz-bottom-bar-menubutton-color, var(--light-primary-color)); | ||
| background-color: var(--cosmoz-bottom-bar-menubutton-background-color, var(--dark-primary-color)); | ||
| @apply --cosmoz-bottom-bar-menubutton; | ||
| ::slotted([disabled]) { | ||
| @apply --cosmoz-bottom-bar-toolbar-item-disabled; | ||
| } | ||
| ::slotted([hidden]) { | ||
| display: none !important; | ||
| } | ||
| #extraToolbarSlot ::slotted(:not(slot)) { | ||
| @apply --cosmoz-bottom-bar-extra-toolbar-item; | ||
| } | ||
| #flex { | ||
| flex: 1 0.000000000001px; | ||
| } | ||
| #toolbar, #extraToolbarSlot { | ||
| overflow: hidden; | ||
| } | ||
| #info, | ||
| #menu > div { | ||
| white-space: nowrap; | ||
| } | ||
| #toolbar ::slotted(:not(slot)) { | ||
| #bottomBarToolbar::slotted(:not(slot)) { | ||
| margin: 0 0.29em; | ||
@@ -76,26 +56,9 @@ min-width: 40px; | ||
| #toolbar ::slotted([disabled]), | ||
| #dropdown ::slotted([disabled]) { | ||
| @apply --cosmoz-bottom-bar-toolbar-item-disabled; | ||
| } | ||
| #toolbar ::slotted([hidden]), | ||
| #dropdown ::slotted([hidden]) { | ||
| display: none !important; | ||
| } | ||
| #dropdown { | ||
| padding: 0; | ||
| --paper-menu-button-content: { | ||
| max-width: 300px !important; | ||
| }; | ||
| } | ||
| /** Seems like a shady dom scoping/slotting issue */ | ||
| #listboxSizer { | ||
| max-height: 0; | ||
| padding: 0 !important; | ||
| } | ||
| #dropdown ::slotted(:not(slot)) { | ||
| #dropdown::part(anchor) { | ||
| padding: 12px 8px; | ||
| } | ||
| #dropdown::part(dropdown) { | ||
| max-width: 300px; | ||
| } | ||
| #bottomBarMenu::slotted(:not(slot)) { | ||
| position: relative; | ||
@@ -105,5 +68,6 @@ cursor: pointer; | ||
| } | ||
| #dropdown ::slotted(:not(slot):hover) { | ||
| #bottomBarMenu::slotted(:not(slot):hover) { | ||
| background: #eee; | ||
| } | ||
| </style> | ||
@@ -113,22 +77,16 @@ | ||
| <div id="info"> | ||
| <slot name="info"></slot> | ||
| <slot name="info"></slot> | ||
| </div> | ||
| <div id="flex"></div> | ||
| <iron-selector id="toolbar" selected-class="[[ selectedClass ]]" on-iron-select="_onActionSelected"> | ||
| <slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot> | ||
| </iron-selector> | ||
| <paper-menu-button id="menu" hidden$="[[ !hasMenuItems ]]" no-animations | ||
| vertical-offset="[[ barHeight ]]" vertical-align="bottom" horizontal-align="right"> | ||
| <paper-icon-button id="dropdownButton" class="dropdown-trigger" slot="dropdown-trigger" icon="menu" toggles raised> | ||
| </paper-icon-button> | ||
| <paper-listbox id="dropdown" class="dropdown-content" slot="dropdown-content" | ||
| selected-class="[[ selectedClass ]]" on-iron-select="_onActionSelected"> | ||
| <span id="listboxSizer"></span> | ||
| <slot id="bottomBarMenu" name="bottom-bar-menu"></slot> | ||
| </paper-listbox> | ||
| </paper-menu-button> | ||
| <iron-selector id="extraToolbarSlot" on-iron-select="_onActionSelected"> | ||
| <slot name="extra" id="extraSlot"></slot> | ||
| </iron-selector> | ||
| <slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot> | ||
| <cosmoz-dropdown id="dropdown" hidden="[[ !hasMenuItems ]]" placement="[[ topPlacement ]]"> | ||
| <svg slot="button" width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z" fill="white"/> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z" fill="white"/> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z" fill="white"/> | ||
| </svg> | ||
| <slot id="bottomBarMenu" name="bottom-bar-menu"></slot> | ||
| </cosmoz-dropdown> | ||
| <div id="extraToolbarSlot"> | ||
| <slot name="extra" id="extraSlot"></slot> | ||
| </div> | ||
| </div> | ||
@@ -135,0 +93,0 @@ |
@@ -10,2 +10,3 @@ /* eslint-disable max-lines */ | ||
| import { html } from 'haunted'; | ||
| import { defaultPlacement } from '@neovici/cosmoz-dropdown'; | ||
@@ -159,2 +160,6 @@ const | ||
| computed: '_getHeightMatchingElement(matchParent)' | ||
| }, | ||
| topPlacement: { | ||
| value: ['top-right', ...defaultPlacement] | ||
| } | ||
@@ -172,3 +177,2 @@ }; | ||
| super(); | ||
| this._boundDropdownClosed = this._dropdownClosed.bind(this); | ||
| this._boundChildrenUpdated = this._childrenUpdated.bind(this); | ||
@@ -185,3 +189,2 @@ this._boundLayoutActions = this._layoutActions.bind(this); | ||
| this.addEventListener('iron-closed-overlay', this._boundDropdownClosed); | ||
@@ -203,3 +206,2 @@ const layoutOnRemove = info => info.removedNodes.filter(this._isActionNode) && this._debounceLayoutActions(); | ||
| this.removeEventListener('iron-closed-overlay', this._boundDropdownClosed); | ||
| [...this._nodeObservers, this._hiddenMutationObserver].forEach(e => e.disconnect(e)); | ||
@@ -248,6 +250,2 @@ this._layoutDebouncer?.cancel(); /* eslint-disable-line no-unused-expressions */ | ||
| _dropdownClosed() { | ||
| this.$.dropdownButton.active = false; | ||
| } | ||
| _fireAction(item) { | ||
@@ -326,3 +324,2 @@ item?.dispatchEvent?.(new window.CustomEvent('action', { | ||
| this._setHasMenuItems(menuElements.length > 0); | ||
| this.$.menu.$.dropdown.notifyResize(); | ||
| } | ||
@@ -329,0 +326,0 @@ |
| { | ||
| "name": "@neovici/cosmoz-bottom-bar", | ||
| "version": "4.2.0", | ||
| "version": "4.3.0", | ||
| "description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.", | ||
@@ -54,10 +54,4 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@neovici/cosmoz-utils": "^3.21.0", | ||
| "@polymer/iron-icons": "^3.0.1", | ||
| "@polymer/iron-selector": "^3.0.0", | ||
| "@polymer/paper-icon-button": "^3.0.0", | ||
| "@polymer/paper-listbox": "^3.0.0", | ||
| "@polymer/paper-menu-button": "^3.0.0", | ||
| "@neovici/cosmoz-dropdown": "^1.1.0", | ||
| "@polymer/polymer": "^3.3.1", | ||
| "@webcomponents/shadycss": "^1.10.2", | ||
| "haunted": "^4.8.0", | ||
@@ -72,2 +66,3 @@ "lit-html": "^1.4.0" | ||
| "@polymer/iron-icon": "^3.0.1", | ||
| "@polymer/iron-icons": "^3.0.1", | ||
| "@polymer/paper-button": "^3.0.0", | ||
@@ -74,0 +69,0 @@ "@polymer/paper-toggle-button": "^3.0.0", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-60%
4
Worsened metrics
- Total package byte prevSize
- decreased by-4.45%
30850
- Dev dependency count
- increased by6.25%
17
- Lines of code
- decreased by-7.47%
458
Dependency changes
+ Added@neovici/cosmoz-dropdown@1.8.1(transitive)
+ Addedposition.js@0.3.0(transitive)
- Removed@neovici/cosmoz-utils@^3.21.0
- Removed@polymer/iron-icons@^3.0.1
- Removed@polymer/iron-selector@^3.0.0
- Removed@polymer/paper-icon-button@^3.0.0
- Removed@polymer/paper-listbox@^3.0.0
- Removed@polymer/paper-menu-button@^3.0.0
- Removed@webcomponents/shadycss@^1.10.2
- Removed@polymer/font-roboto@3.0.2(transitive)
- Removed@polymer/iron-a11y-keys-behavior@3.0.1(transitive)
- Removed@polymer/iron-behaviors@3.0.1(transitive)
- Removed@polymer/iron-checked-element-behavior@3.0.1(transitive)
- Removed@polymer/iron-dropdown@3.0.1(transitive)
- Removed@polymer/iron-fit-behavior@3.1.0(transitive)
- Removed@polymer/iron-flex-layout@3.0.1(transitive)
- Removed@polymer/iron-form-element-behavior@3.0.1(transitive)
- Removed@polymer/iron-icon@3.0.1(transitive)
- Removed@polymer/iron-icons@3.0.1(transitive)
- Removed@polymer/iron-iconset-svg@3.0.1(transitive)
- Removed@polymer/iron-menu-behavior@3.0.2(transitive)
- Removed@polymer/iron-meta@3.0.1(transitive)
- Removed@polymer/iron-overlay-behavior@3.0.3(transitive)
- Removed@polymer/iron-resizable-behavior@3.0.1(transitive)
- Removed@polymer/iron-selector@3.0.1(transitive)
- Removed@polymer/iron-validatable-behavior@3.0.1(transitive)
- Removed@polymer/neon-animation@3.0.1(transitive)
- Removed@polymer/paper-behaviors@3.0.1(transitive)
- Removed@polymer/paper-icon-button@3.0.2(transitive)
- Removed@polymer/paper-listbox@3.0.1(transitive)
- Removed@polymer/paper-menu-button@3.1.0(transitive)
- Removed@polymer/paper-ripple@3.0.2(transitive)
- Removed@polymer/paper-styles@3.0.1(transitive)