BREAKING CHANGE(elements): Migrate web components to @design.estate/dees-element, introduce shared theme colors and cssManager, and update imports/usages across ts_web.
This commit is contained in:
@@ -1,10 +1,18 @@
|
||||
import { LitElement, html, css, type TemplateResult } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
import { cssManager, colors } from './shared.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
type TemplateResult,
|
||||
property,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { delayFor } from '@push.rocks/smartdelay';
|
||||
|
||||
@customElement('consentsoftware-toggle')
|
||||
export class ConsentsoftwareToggle extends LitElement {
|
||||
export class ConsentsoftwareToggle extends DeesElement {
|
||||
@property({ type: Boolean })
|
||||
public accessor required = false;
|
||||
|
||||
@@ -25,96 +33,93 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
private hasDragged = false;
|
||||
private startX = 0;
|
||||
|
||||
// Toggle dimensions
|
||||
private readonly trackWidth = 36;
|
||||
private readonly trackHeight = 20;
|
||||
// Toggle dimensions (with border-box, 1px border reduces inner by 2px)
|
||||
private readonly trackWidth = 36; // outer width
|
||||
private readonly trackHeight = 20; // outer height
|
||||
private readonly knobSize = 14;
|
||||
private readonly padding = 3; // padding from track edge to knob
|
||||
private readonly maxTravel = 16; // trackWidth - knobSize - (2 * padding) = 36 - 14 - 6 = 16
|
||||
private readonly padding = 2; // padding from inner edge to knob
|
||||
private readonly maxTravel = 16; // (36 - 2) - 14 - (2 * 2) = 34 - 14 - 4 = 16
|
||||
|
||||
public static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
color: var(--muted-foreground, hsl(0 0% 64%));
|
||||
}
|
||||
.label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
|
||||
}
|
||||
|
||||
.toggle {
|
||||
user-select: none;
|
||||
}
|
||||
.toggle {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toggleKnobArea {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 20px;
|
||||
width: 36px;
|
||||
border-radius: 10px;
|
||||
background: var(--input, hsl(0 0% 15%));
|
||||
border: 1px solid var(--border, hsl(0 0% 18%));
|
||||
overflow: hidden;
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleKnobArea {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 20px;
|
||||
width: 36px;
|
||||
border-radius: 10px;
|
||||
background: ${cssManager.bdTheme(colors.light.input, colors.dark.input)};
|
||||
border: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
|
||||
overflow: hidden;
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggleKnobArea:hover {
|
||||
border-color: var(--ring, hsl(0 0% 30%));
|
||||
}
|
||||
.toggleKnobArea:hover {
|
||||
border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
||||
}
|
||||
|
||||
:host([selected]) .toggleKnobArea {
|
||||
background: var(--primary, hsl(0 0% 98%));
|
||||
border-color: var(--primary, hsl(0 0% 98%));
|
||||
}
|
||||
:host([selected]) .toggleKnobArea {
|
||||
background: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
|
||||
border-color: ${cssManager.bdTheme(colors.light.primary, colors.dark.primary)};
|
||||
}
|
||||
|
||||
.toggleKnobMover {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.toggleKnobMover {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggleKnobInner {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
background: var(--muted-foreground, hsl(0 0% 64%));
|
||||
transition: left 0.15s ease, background 0.15s ease;
|
||||
touch-action: none;
|
||||
}
|
||||
.toggleKnobInner {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
background: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
|
||||
transition: left 0.15s ease, background 0.15s ease;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.toggleKnobInner.dragging {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.toggleKnobInner.dragging {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
:host([selected]) .toggleKnobInner {
|
||||
background: var(--primary-foreground, hsl(0 0% 9%));
|
||||
}
|
||||
:host([selected]) .toggleKnobInner {
|
||||
background: ${cssManager.bdTheme(colors.light.primaryForeground, colors.dark.primaryForeground)};
|
||||
}
|
||||
|
||||
:host([required]) .toggleKnobArea {
|
||||
background: var(--muted, hsl(0 0% 15%));
|
||||
border-color: var(--border, hsl(0 0% 18%));
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
:host([required]) .toggleKnobArea {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:host([required]) .toggleKnobInner {
|
||||
background: var(--muted-foreground, hsl(0 0% 45%));
|
||||
}
|
||||
:host([required][selected]) .toggleKnobArea {
|
||||
background: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
||||
border-color: ${cssManager.bdTheme(colors.light.ring, colors.dark.ring)};
|
||||
}
|
||||
|
||||
:host([required][selected]) .toggleKnobArea {
|
||||
background: var(--muted-foreground, hsl(0 0% 45%));
|
||||
}
|
||||
`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
:host([required][selected]) .toggleKnobInner {
|
||||
background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
@@ -141,7 +146,8 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
/**
|
||||
* If required = true on first render, auto-select and set the knob to the right.
|
||||
*/
|
||||
public async firstUpdated() {
|
||||
public async firstUpdated(_changedProperties: Map<PropertyKey, unknown>) {
|
||||
await super.firstUpdated(_changedProperties);
|
||||
if (this.required) {
|
||||
this.selected = true;
|
||||
this.currentX = this.maxTravel;
|
||||
@@ -199,7 +205,7 @@ export class ConsentsoftwareToggle extends LitElement {
|
||||
|
||||
// Start dragging
|
||||
this.isDragging = true;
|
||||
// The difference between the pointer’s X and the knob’s current position
|
||||
// The difference between the pointer's X and the knob's current position
|
||||
this.startX = event.clientX - this.currentX;
|
||||
|
||||
// capture pointer so we keep receiving pointermove/pointerup
|
||||
|
||||
Reference in New Issue
Block a user