feat(elements): update design tokens and sio-fab component; bump deps and update npmextra config
This commit is contained in:
@@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-17 - 1.4.0 - feat(elements)
|
||||
update design tokens and sio-fab component; bump deps and update npmextra config
|
||||
|
||||
- Refactor color tokens to a neutral HSL palette (ts_web/elements/00colors.ts) and adjust focus ring token (ts_web/elements/00tokens.ts).
|
||||
- Refactor sio-fab: move styles to static property, add responsive FAB sizing and getMobileIconSize(), bind icon sizes, manage host class ('combox-open'), and tidy lifecycle methods for better behavior and mobile support.
|
||||
- Bump dependencies and devDependencies: @design.estate/dees-wcctools -> ^2.0.1, lucide -> ^0.561.0; @git.zone/tsbuild -> ^4.0.2, @git.zone/tsrun -> ^2.0.1, @git.zone/tswatch -> ^2.3.13, @types/node -> ^25.0.3, etc.
|
||||
- Update npmextra.json: rename configuration keys (gitzone -> @git.zone/cli, npmci -> @ship.zone/szci) and add release.registries and accessLevel for publishing.
|
||||
|
||||
## 2025-12-08 - 1.3.0 - feat(components)
|
||||
Add reusable message input component, refactor element properties to use accessor, update styles and docs, bump dependencies
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"gitzone": {
|
||||
"@git.zone/cli": {
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
@@ -9,11 +9,16 @@
|
||||
"npmPackagename": "@social.io_private/catalog",
|
||||
"license": "UNLICENSED",
|
||||
"projectDomain": "social.io"
|
||||
},
|
||||
"release": {
|
||||
"registries": [
|
||||
"https://verdaccio.lossless.digital"
|
||||
],
|
||||
"accessLevel": "public"
|
||||
}
|
||||
},
|
||||
"npmci": {
|
||||
"@ship.zone/szci": {
|
||||
"npmRegistryUrl": "verdaccio.lossless.one",
|
||||
"npmGlobalTools": [],
|
||||
"npmAccessLevel": "private"
|
||||
"npmGlobalTools": []
|
||||
}
|
||||
}
|
||||
12
package.json
12
package.json
@@ -17,23 +17,23 @@
|
||||
"dependencies": {
|
||||
"@design.estate/dees-domtools": "^2.3.6",
|
||||
"@design.estate/dees-element": "^2.1.3",
|
||||
"@design.estate/dees-wcctools": "^1.2.1",
|
||||
"@design.estate/dees-wcctools": "^2.0.1",
|
||||
"@losslessone_private/loint-pubapi": "^1.0.14",
|
||||
"@social.io/interfaces": "^1.2.1",
|
||||
"lucide": "^0.556.0",
|
||||
"lucide": "^0.561.0",
|
||||
"rrweb": "2.0.0-alpha.4",
|
||||
"rrweb-player": "1.0.0-alpha.4",
|
||||
"rrweb-snapshot": "2.0.0-alpha.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^3.1.2",
|
||||
"@git.zone/tsbuild": "^4.0.2",
|
||||
"@git.zone/tsbundle": "^2.6.3",
|
||||
"@git.zone/tsrun": "^2.0.0",
|
||||
"@git.zone/tsrun": "^2.0.1",
|
||||
"@git.zone/tstest": "^3.1.3",
|
||||
"@git.zone/tswatch": "^2.3.5",
|
||||
"@git.zone/tswatch": "^2.3.13",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/smartenv": "^6.0.0",
|
||||
"@types/node": "^24.10.1"
|
||||
"@types/node": "^25.0.3"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
|
||||
906
pnpm-lock.yaml
generated
906
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@social.io/catalog',
|
||||
version: '1.3.0',
|
||||
version: '1.4.0',
|
||||
description: 'catalog for social.io'
|
||||
}
|
||||
|
||||
@@ -4,102 +4,102 @@ export const colors = {
|
||||
// Background colors - softer, more subtle
|
||||
background: {
|
||||
light: 'hsl(0 0% 100%)',
|
||||
dark: 'hsl(224 71.4% 4.1%)'
|
||||
dark: 'hsl(0 0% 4%)'
|
||||
},
|
||||
|
||||
|
||||
// Foreground colors - less contrast for modern look
|
||||
foreground: {
|
||||
light: 'hsl(224 71.4% 4.1%)',
|
||||
dark: 'hsl(210 20% 98%)'
|
||||
light: 'hsl(0 0% 4%)',
|
||||
dark: 'hsl(0 0% 98%)'
|
||||
},
|
||||
|
||||
|
||||
// Card colors - subtle elevation
|
||||
card: {
|
||||
light: 'hsl(0 0% 100%)',
|
||||
dark: 'hsl(224 71.4% 4.1%)'
|
||||
dark: 'hsl(0 0% 4%)'
|
||||
},
|
||||
|
||||
|
||||
cardForeground: {
|
||||
light: 'hsl(224 71.4% 4.1%)',
|
||||
dark: 'hsl(210 20% 98%)'
|
||||
light: 'hsl(0 0% 4%)',
|
||||
dark: 'hsl(0 0% 98%)'
|
||||
},
|
||||
|
||||
|
||||
// Popover colors
|
||||
popover: {
|
||||
light: 'hsl(0 0% 100%)',
|
||||
dark: 'hsl(222.2 84% 4.9%)'
|
||||
dark: 'hsl(0 0% 5%)'
|
||||
},
|
||||
|
||||
|
||||
popoverForeground: {
|
||||
light: 'hsl(222.2 84% 4.9%)',
|
||||
dark: 'hsl(210 40% 98%)'
|
||||
light: 'hsl(0 0% 5%)',
|
||||
dark: 'hsl(0 0% 98%)'
|
||||
},
|
||||
|
||||
|
||||
// Primary colors - modern indigo/blue
|
||||
primary: {
|
||||
light: 'hsl(221.2 83.2% 53.3%)',
|
||||
dark: 'hsl(217.2 91.2% 59.8%)'
|
||||
},
|
||||
|
||||
|
||||
primaryForeground: {
|
||||
light: 'hsl(210 20% 98%)',
|
||||
dark: 'hsl(224 71.4% 4.1%)'
|
||||
light: 'hsl(0 0% 98%)',
|
||||
dark: 'hsl(0 0% 4%)'
|
||||
},
|
||||
|
||||
|
||||
// Secondary colors - more subtle
|
||||
secondary: {
|
||||
light: 'hsl(220 14.3% 95.9%)',
|
||||
dark: 'hsl(215 27.9% 16.9%)'
|
||||
light: 'hsl(0 0% 96%)',
|
||||
dark: 'hsl(0 0% 17%)'
|
||||
},
|
||||
|
||||
|
||||
secondaryForeground: {
|
||||
light: 'hsl(220.9 39.3% 11%)',
|
||||
dark: 'hsl(210 20% 98%)'
|
||||
light: 'hsl(0 0% 11%)',
|
||||
dark: 'hsl(0 0% 98%)'
|
||||
},
|
||||
|
||||
|
||||
// Muted colors - softer grays
|
||||
muted: {
|
||||
light: 'hsl(220 14.3% 95.9%)',
|
||||
dark: 'hsl(215 27.9% 16.9%)'
|
||||
light: 'hsl(0 0% 96%)',
|
||||
dark: 'hsl(0 0% 17%)'
|
||||
},
|
||||
|
||||
|
||||
mutedForeground: {
|
||||
light: 'hsl(220 8.9% 46.1%)',
|
||||
dark: 'hsl(217.9 10.6% 64.9%)'
|
||||
light: 'hsl(0 0% 46%)',
|
||||
dark: 'hsl(0 0% 65%)'
|
||||
},
|
||||
|
||||
|
||||
// Accent colors - subtle hover states
|
||||
accent: {
|
||||
light: 'hsl(220 14.3% 95.9%)',
|
||||
dark: 'hsl(215 27.9% 16.9%)'
|
||||
light: 'hsl(0 0% 96%)',
|
||||
dark: 'hsl(0 0% 17%)'
|
||||
},
|
||||
|
||||
|
||||
accentForeground: {
|
||||
light: 'hsl(220.9 39.3% 11%)',
|
||||
dark: 'hsl(210 20% 98%)'
|
||||
light: 'hsl(0 0% 11%)',
|
||||
dark: 'hsl(0 0% 98%)'
|
||||
},
|
||||
|
||||
|
||||
// Destructive colors - softer red
|
||||
destructive: {
|
||||
light: 'hsl(0 72.2% 50.6%)',
|
||||
dark: 'hsl(0 62.8% 30.6%)'
|
||||
},
|
||||
|
||||
|
||||
destructiveForeground: {
|
||||
light: 'hsl(0 0% 98%)',
|
||||
dark: 'hsl(0 0% 98%)'
|
||||
},
|
||||
|
||||
|
||||
// Border color - very subtle
|
||||
border: {
|
||||
light: 'hsl(220 13% 91%)',
|
||||
dark: 'hsl(215 27.9% 16.9%)'
|
||||
light: 'hsl(0 0% 91%)',
|
||||
dark: 'hsl(0 0% 17%)'
|
||||
},
|
||||
|
||||
|
||||
// Input color
|
||||
input: {
|
||||
light: 'hsl(214.3 31.8% 91.4%)',
|
||||
dark: 'hsl(217.2 32.6% 17.5%)'
|
||||
light: 'hsl(0 0% 91%)',
|
||||
dark: 'hsl(0 0% 18%)'
|
||||
},
|
||||
|
||||
// Ring color - subtle focus indicator
|
||||
|
||||
@@ -185,7 +185,7 @@ export const focusRing = css`
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
&:focus-visible {
|
||||
outline-color: ${cssManager.bdTheme('hsl(222.2 84% 4.9%)', 'hsl(212.7 26.8% 83.9%)')};
|
||||
outline-color: ${cssManager.bdTheme('hsl(0 0% 5%)', 'hsl(0 0% 84%)')};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -6,12 +6,13 @@ import {
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import { SioCombox } from './sio-combox.js';
|
||||
import { SioIcon } from './sio-icon.js';
|
||||
import { state } from '@design.estate/dees-element';
|
||||
SioCombox;
|
||||
SioIcon;
|
||||
|
||||
@@ -44,194 +45,214 @@ export class SioFab extends DeesElement {
|
||||
domtools.DomTools.setupDomTools();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 10000;
|
||||
color: #fff;
|
||||
--fab-gradient-start: #6366f1;
|
||||
--fab-gradient-mid: #8b5cf6;
|
||||
--fab-gradient-end: #a855f7;
|
||||
--fab-gradient-hover-end: #c026d3;
|
||||
--fab-shadow-color: rgba(139, 92, 246, 0.25);
|
||||
--fab-size: 60px;
|
||||
--fab-combox-offset: calc(var(--fab-size) + ${unsafeCSS(spacing["4"])});
|
||||
}
|
||||
|
||||
#mainbox {
|
||||
transition: ${unsafeCSS(transitions.all)};
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
height: var(--fab-size);
|
||||
width: var(--fab-size);
|
||||
box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
|
||||
line-height: var(--fab-size);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-end) 100%);
|
||||
color: white;
|
||||
border-radius: ${unsafeCSS(radius.full)};
|
||||
user-select: none;
|
||||
border: none;
|
||||
animation: fabEntrance 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
#mainbox::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
#mainbox::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
background: linear-gradient(135deg, var(--fab-gradient-start), var(--fab-gradient-end));
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
filter: blur(12px);
|
||||
transition: opacity 300ms ease;
|
||||
}
|
||||
|
||||
#mainbox:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#mainbox:hover::after {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes fabEntrance {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#mainbox:hover {
|
||||
transform: scale(1.02);
|
||||
background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-hover-end) 100%);
|
||||
box-shadow: 0 8px 20px -4px var(--fab-shadow-color);
|
||||
}
|
||||
|
||||
#mainbox:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4px 12px -2px var(--fab-shadow-color);
|
||||
}
|
||||
|
||||
#mainbox.pulse::after {
|
||||
animation: fabPulse 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fabPulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#mainbox .icon {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
will-change: transform, opacity;
|
||||
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#mainbox .icon.open {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
#mainbox .icon.close {
|
||||
opacity: 0;
|
||||
transform: rotate(-45deg) scale(0.9);
|
||||
}
|
||||
|
||||
/* When combox is open */
|
||||
:host(.combox-open) #mainbox .icon.open {
|
||||
opacity: 0;
|
||||
transform: rotate(45deg) scale(0.9);
|
||||
}
|
||||
|
||||
:host(.combox-open) #mainbox .icon.close {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
#mainbox .icon sio-icon {
|
||||
color: white;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
#mainbox .icon.close sio-icon {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#comboxContainer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#comboxContainer sio-combox {
|
||||
position: absolute;
|
||||
bottom: var(--fab-combox-offset);
|
||||
right: 0;
|
||||
transition: ${unsafeCSS(transitions.all)};
|
||||
will-change: transform;
|
||||
transform: translateY(${unsafeCSS(spacing["5"])});
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#comboxContainer.show {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#comboxContainer.show sio-combox {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
`,
|
||||
// Mobile responsive styles - smaller FAB on phablet and phone
|
||||
cssManager.cssForPhablet(css`
|
||||
:host {
|
||||
--fab-size: 48px;
|
||||
--fab-combox-offset: calc(var(--fab-size) + ${unsafeCSS(spacing["3"])});
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
`),
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
:host {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 10000;
|
||||
color: #fff;
|
||||
--fab-gradient-start: #6366f1;
|
||||
--fab-gradient-mid: #8b5cf6;
|
||||
--fab-gradient-end: #a855f7;
|
||||
--fab-gradient-hover-end: #c026d3;
|
||||
--fab-shadow-color: rgba(139, 92, 246, 0.25);
|
||||
}
|
||||
|
||||
#mainbox {
|
||||
transition: ${transitions.all};
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-end) 100%);
|
||||
color: white;
|
||||
border-radius: ${radius.full};
|
||||
user-select: none;
|
||||
border: none;
|
||||
animation: fabEntrance 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
#mainbox::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
#mainbox::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
background: linear-gradient(135deg, var(--fab-gradient-start), var(--fab-gradient-end));
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
filter: blur(12px);
|
||||
transition: opacity 300ms ease;
|
||||
}
|
||||
|
||||
#mainbox:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#mainbox:hover::after {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes fabEntrance {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#mainbox:hover {
|
||||
transform: scale(1.02);
|
||||
background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-hover-end) 100%);
|
||||
}
|
||||
|
||||
#mainbox:hover {
|
||||
box-shadow: 0 8px 20px -4px var(--fab-shadow-color);
|
||||
}
|
||||
|
||||
#mainbox:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4px 12px -2px var(--fab-shadow-color);
|
||||
}
|
||||
|
||||
#mainbox.pulse::after {
|
||||
animation: fabPulse 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fabPulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#mainbox .icon {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
will-change: transform, opacity;
|
||||
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
#mainbox .icon.open {
|
||||
opacity: ${this.showCombox ? '0' : '1'};
|
||||
transform: ${this.showCombox ? 'rotate(45deg) scale(0.9)' : 'rotate(0deg) scale(1)'};
|
||||
}
|
||||
|
||||
#mainbox .icon.close {
|
||||
opacity: ${this.showCombox ? '1' : '0'};
|
||||
transform: ${this.showCombox ? 'rotate(0deg) scale(1)' : 'rotate(-45deg) scale(0.9)'};
|
||||
}
|
||||
|
||||
#mainbox .icon sio-icon {
|
||||
color: white;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
#mainbox .icon.close sio-icon {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#comboxContainer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#comboxContainer sio-combox {
|
||||
position: absolute;
|
||||
bottom: calc(60px + ${spacing["4"]});
|
||||
right: 0;
|
||||
transition: ${transitions.all};
|
||||
will-change: transform;
|
||||
transform: translateY(${spacing["5"]});
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#comboxContainer.show {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#comboxContainer.show sio-combox {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
<div id="mainbox"
|
||||
<div id="mainbox"
|
||||
class="${this.shouldPulse ? 'pulse' : ''}"
|
||||
@click=${this.toggleCombox}
|
||||
@animationend=${() => { this.shouldPulse = false; }}
|
||||
>
|
||||
<div class="icon open">
|
||||
<sio-icon icon="message-square" size="28"></sio-icon>
|
||||
<sio-icon icon="message-square" size="24"></sio-icon>
|
||||
</div>
|
||||
<div class="icon close">
|
||||
<sio-icon icon="x" size="22"></sio-icon>
|
||||
<sio-icon icon="x" size="20"></sio-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comboxContainer" class="${this.showCombox ? 'show' : ''}">
|
||||
@@ -260,7 +281,7 @@ export class SioFab extends DeesElement {
|
||||
public async firstUpdated(args: any) {
|
||||
super.firstUpdated(args);
|
||||
const domtools = await this.domtoolsPromise;
|
||||
|
||||
|
||||
// Set up keyboard shortcut
|
||||
domtools.keyboard
|
||||
.on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
|
||||
@@ -268,12 +289,21 @@ export class SioFab extends DeesElement {
|
||||
this.toggleCombox();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public async updated(changedProperties: Map<string | number | symbol, unknown>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
|
||||
// Update host class based on combox state
|
||||
if (changedProperties.has('showCombox')) {
|
||||
if (this.showCombox) {
|
||||
this.classList.add('combox-open');
|
||||
} else {
|
||||
this.classList.remove('combox-open');
|
||||
}
|
||||
}
|
||||
|
||||
// Set reference object when combox is rendered
|
||||
if ((changedProperties.has('showCombox') || changedProperties.has('hasShownOnce')) &&
|
||||
if ((changedProperties.has('showCombox') || changedProperties.has('hasShownOnce')) &&
|
||||
(this.showCombox || this.hasShownOnce)) {
|
||||
const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
|
||||
const mainBox: HTMLElement = this.shadowRoot.querySelector('#mainbox');
|
||||
|
||||
Reference in New Issue
Block a user