@conectate/ct-button
Advanced tools
Comparing version 3.9.0 to 3.10.0
export declare const rovingIndex: ({ element: rover, target: selector, targets }: { | ||
element: HTMLElement; | ||
target?: string | undefined; | ||
targets?: NodeListOf<HTMLElement> | HTMLElement[] | undefined; | ||
target?: string; | ||
targets?: NodeListOf<HTMLElement> | HTMLElement[]; | ||
}) => void; | ||
//# sourceMappingURL=ct-button-helpers.d.ts.map |
@@ -86,2 +86,1 @@ const state = new Map(); | ||
}; | ||
//# sourceMappingURL=ct-button-helpers.js.map |
@@ -43,2 +43,1 @@ import '@conectate/ct-icon'; | ||
export {}; | ||
//# sourceMappingURL=ct-button-menu.d.ts.map |
@@ -16,16 +16,102 @@ import { __decorate } from "tslib"; | ||
let CtButtonMenu = class CtButtonMenu extends LitElement { | ||
constructor() { | ||
super(...arguments); | ||
this.anim_selector = 'ct-list-item'; | ||
this.title = 'Open for more actions'; | ||
this.tabindex = -1; | ||
this.rotate = false; | ||
/** Location from opened */ | ||
this.from = 'bottom-left'; | ||
this.use_slot = false; | ||
/** keep popup after click, you must close programmatically */ | ||
this.keep = false; | ||
/** Dropdown icon */ | ||
this.icon = 'expand_more'; | ||
} | ||
static styles = [ | ||
css ` | ||
:host { | ||
display: inline-flex; | ||
--in-speed: 250ms; | ||
--out-speed: 250ms; | ||
cursor: pointer; | ||
position: relative; | ||
align-items: center; | ||
justify-content: center; | ||
border-radius: 0 var(--ct-button-menu-radius, 26px) var(--ct-button-menu-radius, 26px) 0; | ||
transform: rotate(0); | ||
} | ||
:host(:focus), | ||
:host(:focus-within) { | ||
z-index: 1000; | ||
} | ||
::slotted(span:empty), | ||
::slotted(hr) { | ||
height: 1px; | ||
background: var(--color-border, #8383835a); | ||
margin: 8px; | ||
border: none; | ||
} | ||
`, | ||
css ` | ||
.center { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
/* <Icon> */ | ||
.dropdown-trigger { | ||
transition: transform var(--in-speed) ease-in-out; | ||
} | ||
:host([rotate]) :focus-within > .dropdown-trigger { | ||
transform: rotate(180deg); | ||
} | ||
/* </Icon> */ | ||
/* <ul> */ | ||
:host(:focus-within) .gui-popup { | ||
transition-duration: var(--in-speed); | ||
opacity: 1; | ||
transform: translateY(0); | ||
pointer-events: auto; | ||
} | ||
@media (prefers-reduced-motion: no-preference) { | ||
.gui-popup { | ||
transform: translateY(5px); | ||
transition: opacity var(--out-speed) ease, transform var(--out-speed) ease; | ||
} | ||
} | ||
.gui-popup { | ||
opacity: 0; | ||
pointer-events: none; | ||
position: absolute; | ||
list-style-type: none; | ||
background: var(--color-menu, var(--color-surface, #fff)); | ||
color: var(--color-on-surface, #535353); | ||
padding-inline: 0; | ||
padding-top: calc(var(--ct-button-menu-popup-radius, 16px) / 2); | ||
padding-bottom: calc(var(--ct-button-menu-popup-radius, 16px) / 2); | ||
border-radius: var(--ct-button-menu-popup-radius, 16px); | ||
overflow: hidden; | ||
display: flex; | ||
flex-direction: column; | ||
font-size: 0.9em; | ||
transition: opacity var(--out-speed) ease; | ||
box-shadow: var(--ct-button-menu-box-shadow, #0a0e1d05 0px 8px 16px 0px, #0a0e1d0f 0px 8px 40px 0px); | ||
outline: var(--menu-outline, none); | ||
/* fixes iOS trying to be helpful */ | ||
} | ||
.gui-popup:focus { | ||
outline: none; | ||
} | ||
.gui-popup button { | ||
color: var(--color-on-surface, #535353); | ||
width: 100%; | ||
} | ||
` | ||
]; | ||
anim_selector = 'ct-list-item'; | ||
title = 'Open for more actions'; | ||
tabindex = -1; | ||
rotate = false; | ||
/** Location from opened */ | ||
from = 'bottom-left'; | ||
/** Template Result of Trigger */ | ||
dropDownTrigger; | ||
use_slot = false; | ||
/** keep popup after click, you must close programmatically */ | ||
keep = false; | ||
/** Dropdown icon */ | ||
icon = 'expand_more'; | ||
popup; | ||
render() { | ||
@@ -45,5 +131,4 @@ return html ` <span class="dropdown-trigger center"> | ||
this.addEventListener('keyup', (e) => { | ||
var _a; | ||
if (e.code === 'Escape') | ||
(_a = e.target) === null || _a === void 0 ? void 0 : _a.blur(); | ||
e.target?.blur(); | ||
}); | ||
@@ -58,4 +143,3 @@ if (!this.keep) { | ||
setTimeout(() => { | ||
var _a; | ||
(_a = e.target) === null || _a === void 0 ? void 0 : _a.blur(); | ||
e.target?.blur(); | ||
this.blur(); | ||
@@ -118,3 +202,3 @@ }, 100); | ||
let menu_btns = this.querySelectorAll(this.anim_selector); | ||
menu_btns.forEach((btn) => { var _a; return btns.push(btn.button || ((_a = btn.shadowRoot) === null || _a === void 0 ? void 0 : _a.firstElementChild) || btn.firstChild || btn); }); | ||
menu_btns.forEach((btn) => btns.push(btn.button || btn.shadowRoot?.firstElementChild || btn.firstChild || btn)); | ||
if (btns.length > 0) | ||
@@ -128,88 +212,2 @@ rovingIndex({ | ||
}; | ||
CtButtonMenu.styles = [ | ||
css ` | ||
:host { | ||
display: inline-flex; | ||
--in-speed: 250ms; | ||
--out-speed: 250ms; | ||
cursor: pointer; | ||
position: relative; | ||
align-items: center; | ||
justify-content: center; | ||
border-radius: 0 var(--ct-button-menu-radius, 26px) var(--ct-button-menu-radius, 26px) 0; | ||
transform: rotate(0); | ||
} | ||
:host(:focus), | ||
:host(:focus-within) { | ||
z-index: 1000; | ||
} | ||
::slotted(span:empty), | ||
::slotted(hr) { | ||
height: 1px; | ||
background: var(--color-border, #8383835a); | ||
margin: 8px; | ||
border: none; | ||
} | ||
`, | ||
css ` | ||
.center { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
/* <Icon> */ | ||
.dropdown-trigger { | ||
transition: transform var(--in-speed) ease-in-out; | ||
} | ||
:host([rotate]) :focus-within > .dropdown-trigger { | ||
transform: rotate(180deg); | ||
} | ||
/* </Icon> */ | ||
/* <ul> */ | ||
:host(:focus-within) .gui-popup { | ||
transition-duration: var(--in-speed); | ||
opacity: 1; | ||
transform: translateY(0); | ||
pointer-events: auto; | ||
} | ||
@media (prefers-reduced-motion: no-preference) { | ||
.gui-popup { | ||
transform: translateY(5px); | ||
transition: opacity var(--out-speed) ease, transform var(--out-speed) ease; | ||
} | ||
} | ||
.gui-popup { | ||
opacity: 0; | ||
pointer-events: none; | ||
position: absolute; | ||
list-style-type: none; | ||
background: var(--color-menu, var(--color-surface, #fff)); | ||
color: var(--color-on-surface, #535353); | ||
padding-inline: 0; | ||
padding-top: calc(var(--ct-button-menu-popup-radius, 16px) / 2); | ||
padding-bottom: calc(var(--ct-button-menu-popup-radius, 16px) / 2); | ||
border-radius: var(--ct-button-menu-popup-radius, 16px); | ||
overflow: hidden; | ||
display: flex; | ||
flex-direction: column; | ||
font-size: 0.9em; | ||
transition: opacity var(--out-speed) ease; | ||
box-shadow: var(--ct-button-menu-box-shadow, #0a0e1d05 0px 8px 16px 0px, #0a0e1d0f 0px 8px 40px 0px); | ||
outline: var(--menu-outline, none); | ||
/* fixes iOS trying to be helpful */ | ||
} | ||
.gui-popup:focus { | ||
outline: none; | ||
} | ||
.gui-popup button { | ||
color: var(--color-on-surface, #535353); | ||
width: 100%; | ||
} | ||
` | ||
]; | ||
__decorate([ | ||
@@ -249,2 +247,1 @@ property() | ||
export { CtButtonMenu }; | ||
//# sourceMappingURL=ct-button-menu.js.map |
@@ -19,2 +19,1 @@ import { LitElement } from 'lit'; | ||
} | ||
//# sourceMappingURL=ct-button-split.d.ts.map |
@@ -9,14 +9,3 @@ import { __decorate } from "tslib"; | ||
let CtButtonSplit = class CtButtonSplit extends LitElement { | ||
constructor() { | ||
super(...arguments); | ||
this.raised = false; | ||
this.shadow = false; | ||
this.flat = false; | ||
this.light = false; | ||
} | ||
render() { | ||
return html `<slot></slot>`; | ||
} | ||
}; | ||
CtButtonSplit.CtButtonStyle = css ` | ||
static CtButtonStyle = css ` | ||
ct-button-split ct-button { | ||
@@ -33,5 +22,5 @@ border: none; | ||
`; | ||
CtButtonSplit.styles = [ | ||
CtButton.styles, | ||
css ` | ||
static styles = [ | ||
CtButton.styles, | ||
css ` | ||
:host { | ||
@@ -55,3 +44,11 @@ display: inline-flex; | ||
` | ||
]; | ||
]; | ||
raised = false; | ||
shadow = false; | ||
flat = false; | ||
light = false; | ||
render() { | ||
return html `<slot></slot>`; | ||
} | ||
}; | ||
__decorate([ | ||
@@ -73,2 +70,1 @@ property({ type: Boolean, reflect: true }) | ||
export { CtButtonSplit }; | ||
//# sourceMappingURL=ct-button-split.js.map |
@@ -105,2 +105,1 @@ /** | ||
} | ||
//# sourceMappingURL=ct-button.d.ts.map |
@@ -87,22 +87,4 @@ /** | ||
let CtButton = class CtButton extends LitElement { | ||
constructor() { | ||
super(...arguments); | ||
this.raised = false; | ||
this.shadow = false; | ||
this.flat = false; | ||
this.light = false; | ||
this.role = 'button'; | ||
this.disabled = false; | ||
this.gap = false; | ||
} | ||
render() { | ||
return html ` <button ?disabled=${this.disabled} @click=${() => this.dispatchEvent(new CustomEvent('btnclick'))}> | ||
<slot name="prefix"></slot> | ||
<slot></slot> | ||
<slot name="suffix"></slot> | ||
</button>`; | ||
} | ||
}; | ||
CtButton.styles = [ | ||
css ` | ||
static styles = [ | ||
css ` | ||
:host { | ||
@@ -208,3 +190,18 @@ display: inline-flex; | ||
` | ||
]; | ||
]; | ||
raised = false; | ||
shadow = false; | ||
flat = false; | ||
light = false; | ||
role = 'button'; | ||
disabled = false; | ||
gap = false; | ||
render() { | ||
return html ` <button ?disabled=${this.disabled} @click=${() => this.dispatchEvent(new CustomEvent('btnclick'))}> | ||
<slot name="prefix"></slot> | ||
<slot></slot> | ||
<slot name="suffix"></slot> | ||
</button>`; | ||
} | ||
}; | ||
__decorate([ | ||
@@ -235,2 +232,1 @@ property({ type: Boolean, reflect: true }) | ||
export { CtButton }; | ||
//# sourceMappingURL=ct-button.js.map |
{ | ||
"name": "@conectate/ct-button", | ||
"version": "3.9.0", | ||
"version": "3.10.0", | ||
"description": "HTML Button made with Web Components and Lit", | ||
@@ -17,3 +17,3 @@ "main": "ct-button.js", | ||
"dependencies": { | ||
"@conectate/ct-icon": "^3.9.0", | ||
"@conectate/ct-icon": "^3.10.0", | ||
"lit": "^2.8.0", | ||
@@ -41,11 +41,11 @@ "tslib": "^2.6.1" | ||
".": { | ||
"development": "./src/ct-button.ts", | ||
"dev": "./src/ct-button.ts", | ||
"default": "./ct-button.js" | ||
}, | ||
"./*": { | ||
"development": "./src/*", | ||
"dev": "./src/*", | ||
"default": "./*" | ||
} | ||
}, | ||
"gitHead": "3585c80117a1e24dd02d2645f5d2a6c2b8c15799" | ||
"gitHead": "d8992206d4f6ca934be0088596735b5414f3c984" | ||
} |
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
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
30719
12
738
+ Addedtslib@2.8.1(transitive)
- Removedtslib@2.8.0(transitive)
Updated@conectate/ct-icon@^3.10.0