Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@conectate/ct-button

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@conectate/ct-button - npm Package Compare versions

Comparing version 3.9.0 to 3.10.0

5

ct-button-helpers.d.ts
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

1

ct-button-helpers.js

@@ -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"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc