@luzmo/lucero 1.0.1-alpha.3 → 1.0.1-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,11 +4,42 @@ declare const LuzmoColorPalette_base: typeof Focusable & {
|
|
|
4
4
|
prototype: import("../..").SizedElementInterface;
|
|
5
5
|
};
|
|
6
6
|
export declare class LuzmoColorPalette extends LuzmoColorPalette_base {
|
|
7
|
+
/**
|
|
8
|
+
* The styles of the color palette
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
7
11
|
static styles: import("lit").CSSResult;
|
|
12
|
+
/**
|
|
13
|
+
* Set the color palette to a disabled state
|
|
14
|
+
*/
|
|
8
15
|
disabled: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Set the color palette to a focused state
|
|
18
|
+
*/
|
|
9
19
|
focused: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Set the color palette to a selected state
|
|
22
|
+
*/
|
|
23
|
+
selected: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Set the color palette to an active state
|
|
26
|
+
*/
|
|
10
27
|
active: boolean;
|
|
11
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Set the colors to be displayed in the color palette
|
|
30
|
+
*/
|
|
31
|
+
colors?: string[];
|
|
32
|
+
/**
|
|
33
|
+
* Set the color palette to a reverse state
|
|
34
|
+
*/
|
|
35
|
+
reverse: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Set the color palette to a horizontal state
|
|
38
|
+
*/
|
|
39
|
+
horizontal: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* @internal
|
|
42
|
+
*/
|
|
12
43
|
get focusElement(): HTMLElement;
|
|
13
44
|
private handlePointerdown;
|
|
14
45
|
private handlePointerup;
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../base-CBCg3yyw.cjs"),
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../base-CBCg3yyw.cjs"),u=require("../focusable-EbipgXRh.cjs"),n=require("../sized-mixin-CPxE5C96.cjs"),h=":host{box-sizing:border-box}:host([focused]),:host(:focus-visible){outline:none}:host([focused]) #palette,:host(:focus-visible) #palette{border:var(--luzmo-color-palette-focus-indicator-width, var(--color-palette-focus-indicator-width)) solid var(--luzmo-color-palette-focus-indicator-color, var(--color-palette-focus-indicator-color))!important}:host([disabled]){pointer-events:none;cursor:not-allowed;border-color:var(--highcontrast-color-palette-border-color-disabled, var(--luzmo-color-palette-border-color-disabled, var(--luzmo-font-color-disabled)));background:var(--highcontrast-color-palette-fill-color-disabled, var(--luzmo-color-palette-fill-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #palette{opacity:var(--luzmo-color-palette-disabled-opacity, .3);border-color:transparent!important;background-color:var(--luzmo-color-palette-disabled-background-color, var(--color-palette-disabled-background-color))!important}:host:active #palette,:host([active]) #palette{border-color:var(--luzmo-color-palette-active-border-color, var(--color-palette-active-border-color));background-color:var(--luzmo-color-palette-active-background-color, var(--color-palette-active-background-color))}:host([selected]) #palette{border-color:var(--luzmo-color-palette-selected-border-color, var(--color-palette-selected-border-color));background-color:var(--luzmo-color-palette-selected-background-color, var(--color-palette-selected-background-color))}:host:hover #palette{border-color:var(--luzmo-color-palette-hover-border-color, var(--color-palette-hover-border-color))}#palette{box-sizing:border-box;height:100%;width:fit-content;padding:var(--luzmo-color-palette-padding, var(--color-palette-padding));border:var(--luzmo-color-palette-border-width, var(--color-palette-border-width)) solid transparent;cursor:pointer;border-radius:var(--luzmo-color-palette-border-radius, var(--color-palette-border-radius));display:flex}#palette>div{box-sizing:border-box;border:var(--luzmo-color-palette-color-border-width, var(--color-palette-color-border-width)) solid var(--luzmo-color-palette-color-border-color, var(--color-palette-color-border-color));height:var(--luzmo-color-palette-color-height, var(--color-palette-color-height));width:var(--luzmo-color-palette-color-width, var(--color-palette-color-width))}#palette:hover{background-color:var(--luzmo-color-palette-hover-background-color, var(--color-palette-hover-background-color))}#palette.active{background-color:var(--luzmo-color-palette-active-background-color, var(--color-palette-active-background-color))}#palette:focus-visible{outline:none}:host(:not([reverse]):not([horizontal])) #palette{flex-direction:column}:host(:not([reverse]):not([horizontal])) #palette>div:not(:first-child){border-top:0}:host(:not([reverse]):not([horizontal])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host(:not([reverse]):not([horizontal])) #palette>div:last-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette{flex-direction:column-reverse}:host([reverse]:not([horizontal])) #palette>div:not(:first-child){border-bottom:0}:host([reverse]:not([horizontal])) #palette>div:first-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette>div:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette{flex-direction:row}:host([horizontal]:not([reverse])) #palette>div:not(:first-child){border-left:0}:host([horizontal]:not([reverse])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette>div:last-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette{flex-direction:row-reverse}:host([horizontal][reverse]) #palette>div:not(:first-child){border-right:0}:host([horizontal][reverse]) #palette>div:first-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette>div:last-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host{--color-palette-padding: var(--luzmo-spacing-1);--color-palette-background-color: transparent;--color-palette-hover-background-color: var( --luzmo-background-color-highlight );--color-palette-active-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-active-border-color: var(--luzmo-border-color-down);--color-palette-selected-border-color: var(--luzmo-border-color-down);--color-palette-selected-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-disabled-background-color: transparent;--color-palette-border-width: var(--luzmo-border-width);--color-palette-hover-border-color: var(--luzmo-border-color);--color-palette-active-border-color: var(--luzmo-border-color);--color-palette-focus-indicator-width: var(--luzmo-indicator-width);--color-palette-focus-indicator-color: var(--luzmo-indicator-color);--color-palette-color-width: var(--luzmo-spacing-5);--color-palette-color-height: 1.25rem;--color-palette-color-border-radius: var(--luzmo-border-radius);--color-palette-color-border-width: var(--luzmo-border-width);--color-palette-color-border-color: var(--luzmo-border-color);--color-palette-border-radius: calc( var(--color-palette-color-border-radius) + var(--color-palette-padding) )}:host([horizontal]){--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-color-width: 1.25rem}:host([size=s]){--color-palette-color-width: .75rem;--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-padding: var(--luzmo-spacing-1);--color-palette-color-border-radius: var(--luzmo-border-radius-s)}:host([size=s][horizontal]){--color-palette-color-height: .75rem;--color-palette-color-width: var(--luzmo-spacing-5)}:host([size=l]){--color-palette-color-width: 1.25rem;--color-palette-color-height: 1.5rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-l)}:host([size=l][horizontal]){--color-palette-color-height: 1.25rem;--color-palette-color-width: 1.5rem}:host([size=xl]){--color-palette-color-width: 1.5rem;--color-palette-color-height: 1.75rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-xl)}:host([size=xl][horizontal]){--color-palette-color-height: 1.5rem;--color-palette-color-width: 1.75rem}";var v=Object.defineProperty,t=(i,o,a,s)=>{for(var l=void 0,c=i.length-1,p;c>=0;c--)(p=i[c])&&(l=p(o,a,l)||l);return l&&v(o,a,l),l};const d=class d extends n.SizedMixin(u.Focusable,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.selected=!1,this.active=!1,this.reverse=!1,this.horizontal=!1}get focusElement(){return this.renderRoot.querySelector("#palette")}handlePointerdown(o){o.pointerType==="touch"&&(this.active=!0),this.setPointerCapture(o.pointerId)}handlePointerup(o){this.active=!1,this.releasePointerCapture(o.pointerId)}render(){var a;const o=(a=this.colors)==null?void 0:a.map(s=>e.x`<div class="color" style="background-color: ${s}"></div>`);return e.x` <div id="palette">${o}</div> `}firstUpdated(o){super.firstUpdated(o),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerup",this.handlePointerup),this.addEventListener("pointercancel",this.handlePointerup)}};d.styles=e.r(h);let r=d;t([e.n({type:Boolean,reflect:!0})],r.prototype,"disabled");t([e.n({type:Boolean,reflect:!0})],r.prototype,"focused");t([e.n({type:Boolean,reflect:!0})],r.prototype,"selected");t([e.n({type:Boolean,reflect:!0})],r.prototype,"active");t([e.n({type:Array,reflect:!0})],r.prototype,"colors");t([e.n({type:Boolean,reflect:!0})],r.prototype,"reverse");t([e.n({type:Boolean,reflect:!0})],r.prototype,"horizontal");customElements.get("luzmo-color-palette")||customElements.define("luzmo-color-palette",r);exports.LuzmoColorPalette=r;
|
|
@@ -15,29 +15,32 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { r as
|
|
19
|
-
import { F as
|
|
20
|
-
import { S as
|
|
21
|
-
const
|
|
18
|
+
import { r as m, x as n, n as e } from "../base-WsynuqaS.js";
|
|
19
|
+
import { F as b } from "../focusable-BxtpnzWp.js";
|
|
20
|
+
import { S as h } from "../sized-mixin-D4ACoVUr.js";
|
|
21
|
+
const p = () => {
|
|
22
22
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
23
|
-
const
|
|
24
|
-
|
|
23
|
+
const t = document.createElement("style");
|
|
24
|
+
t.setAttribute("data-luzmo-vars", ""), t.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(t);
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
var
|
|
30
|
-
for (var
|
|
31
|
-
(u =
|
|
32
|
-
return
|
|
27
|
+
p();
|
|
28
|
+
const z = ":host{box-sizing:border-box}:host([focused]),:host(:focus-visible){outline:none}:host([focused]) #palette,:host(:focus-visible) #palette{border:var(--luzmo-color-palette-focus-indicator-width, var(--color-palette-focus-indicator-width)) solid var(--luzmo-color-palette-focus-indicator-color, var(--color-palette-focus-indicator-color))!important}:host([disabled]){pointer-events:none;cursor:not-allowed;border-color:var(--highcontrast-color-palette-border-color-disabled, var(--luzmo-color-palette-border-color-disabled, var(--luzmo-font-color-disabled)));background:var(--highcontrast-color-palette-fill-color-disabled, var(--luzmo-color-palette-fill-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #palette{opacity:var(--luzmo-color-palette-disabled-opacity, .3);border-color:transparent!important;background-color:var(--luzmo-color-palette-disabled-background-color, var(--color-palette-disabled-background-color))!important}:host:active #palette,:host([active]) #palette{border-color:var(--luzmo-color-palette-active-border-color, var(--color-palette-active-border-color));background-color:var(--luzmo-color-palette-active-background-color, var(--color-palette-active-background-color))}:host([selected]) #palette{border-color:var(--luzmo-color-palette-selected-border-color, var(--color-palette-selected-border-color));background-color:var(--luzmo-color-palette-selected-background-color, var(--color-palette-selected-background-color))}:host:hover #palette{border-color:var(--luzmo-color-palette-hover-border-color, var(--color-palette-hover-border-color))}#palette{box-sizing:border-box;height:100%;width:fit-content;padding:var(--luzmo-color-palette-padding, var(--color-palette-padding));border:var(--luzmo-color-palette-border-width, var(--color-palette-border-width)) solid transparent;cursor:pointer;border-radius:var(--luzmo-color-palette-border-radius, var(--color-palette-border-radius));display:flex}#palette>div{box-sizing:border-box;border:var(--luzmo-color-palette-color-border-width, var(--color-palette-color-border-width)) solid var(--luzmo-color-palette-color-border-color, var(--color-palette-color-border-color));height:var(--luzmo-color-palette-color-height, var(--color-palette-color-height));width:var(--luzmo-color-palette-color-width, var(--color-palette-color-width))}#palette:hover{background-color:var(--luzmo-color-palette-hover-background-color, var(--color-palette-hover-background-color))}#palette.active{background-color:var(--luzmo-color-palette-active-background-color, var(--color-palette-active-background-color))}#palette:focus-visible{outline:none}:host(:not([reverse]):not([horizontal])) #palette{flex-direction:column}:host(:not([reverse]):not([horizontal])) #palette>div:not(:first-child){border-top:0}:host(:not([reverse]):not([horizontal])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host(:not([reverse]):not([horizontal])) #palette>div:last-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette{flex-direction:column-reverse}:host([reverse]:not([horizontal])) #palette>div:not(:first-child){border-bottom:0}:host([reverse]:not([horizontal])) #palette>div:first-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette>div:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette{flex-direction:row}:host([horizontal]:not([reverse])) #palette>div:not(:first-child){border-left:0}:host([horizontal]:not([reverse])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette>div:last-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette{flex-direction:row-reverse}:host([horizontal][reverse]) #palette>div:not(:first-child){border-right:0}:host([horizontal][reverse]) #palette>div:first-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette>div:last-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host{--color-palette-padding: var(--luzmo-spacing-1);--color-palette-background-color: transparent;--color-palette-hover-background-color: var( --luzmo-background-color-highlight );--color-palette-active-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-active-border-color: var(--luzmo-border-color-down);--color-palette-selected-border-color: var(--luzmo-border-color-down);--color-palette-selected-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-disabled-background-color: transparent;--color-palette-border-width: var(--luzmo-border-width);--color-palette-hover-border-color: var(--luzmo-border-color);--color-palette-active-border-color: var(--luzmo-border-color);--color-palette-focus-indicator-width: var(--luzmo-indicator-width);--color-palette-focus-indicator-color: var(--luzmo-indicator-color);--color-palette-color-width: var(--luzmo-spacing-5);--color-palette-color-height: 1.25rem;--color-palette-color-border-radius: var(--luzmo-border-radius);--color-palette-color-border-width: var(--luzmo-border-width);--color-palette-color-border-color: var(--luzmo-border-color);--color-palette-border-radius: calc( var(--color-palette-color-border-radius) + var(--color-palette-padding) )}:host([horizontal]){--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-color-width: 1.25rem}:host([size=s]){--color-palette-color-width: .75rem;--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-padding: var(--luzmo-spacing-1);--color-palette-color-border-radius: var(--luzmo-border-radius-s)}:host([size=s][horizontal]){--color-palette-color-height: .75rem;--color-palette-color-width: var(--luzmo-spacing-5)}:host([size=l]){--color-palette-color-width: 1.25rem;--color-palette-color-height: 1.5rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-l)}:host([size=l][horizontal]){--color-palette-color-height: 1.25rem;--color-palette-color-width: 1.5rem}:host([size=xl]){--color-palette-color-width: 1.5rem;--color-palette-color-height: 1.75rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-xl)}:host([size=xl][horizontal]){--color-palette-color-height: 1.5rem;--color-palette-color-width: 1.75rem}";
|
|
29
|
+
var v = Object.defineProperty, l = (t, o, c, s) => {
|
|
30
|
+
for (var a = void 0, d = t.length - 1, u; d >= 0; d--)
|
|
31
|
+
(u = t[d]) && (a = u(o, c, a) || a);
|
|
32
|
+
return a && v(o, c, a), a;
|
|
33
33
|
};
|
|
34
|
-
const
|
|
34
|
+
const i = class i extends h(b, {
|
|
35
35
|
validSizes: ["s", "m", "l", "xl"],
|
|
36
36
|
noDefaultSize: !0
|
|
37
37
|
}) {
|
|
38
38
|
constructor() {
|
|
39
|
-
super(...arguments), this.disabled = !1, this.focused = !1, this.active = !1, this.
|
|
39
|
+
super(...arguments), this.disabled = !1, this.focused = !1, this.selected = !1, this.active = !1, this.reverse = !1, this.horizontal = !1;
|
|
40
40
|
}
|
|
41
|
+
/**
|
|
42
|
+
* @internal
|
|
43
|
+
*/
|
|
41
44
|
get focusElement() {
|
|
42
45
|
return this.renderRoot.querySelector("#palette");
|
|
43
46
|
}
|
|
@@ -48,27 +51,37 @@ const d = class d extends b(m, {
|
|
|
48
51
|
this.active = !1, this.releasePointerCapture(o.pointerId);
|
|
49
52
|
}
|
|
50
53
|
render() {
|
|
51
|
-
|
|
52
|
-
|
|
54
|
+
var c;
|
|
55
|
+
const o = (c = this.colors) == null ? void 0 : c.map((s) => n`<div class="color" style="background-color: ${s}"></div>`);
|
|
56
|
+
return n` <div id="palette">${o}</div> `;
|
|
53
57
|
}
|
|
54
58
|
firstUpdated(o) {
|
|
55
59
|
super.firstUpdated(o), this.addEventListener("pointerdown", this.handlePointerdown), this.addEventListener("pointerup", this.handlePointerup), this.addEventListener("pointercancel", this.handlePointerup);
|
|
56
60
|
}
|
|
57
61
|
};
|
|
58
|
-
|
|
59
|
-
let r =
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
i.styles = m(z);
|
|
63
|
+
let r = i;
|
|
64
|
+
l([
|
|
65
|
+
e({ type: Boolean, reflect: !0 })
|
|
62
66
|
], r.prototype, "disabled");
|
|
63
|
-
|
|
64
|
-
|
|
67
|
+
l([
|
|
68
|
+
e({ type: Boolean, reflect: !0 })
|
|
65
69
|
], r.prototype, "focused");
|
|
66
|
-
|
|
67
|
-
|
|
70
|
+
l([
|
|
71
|
+
e({ type: Boolean, reflect: !0 })
|
|
72
|
+
], r.prototype, "selected");
|
|
73
|
+
l([
|
|
74
|
+
e({ type: Boolean, reflect: !0 })
|
|
68
75
|
], r.prototype, "active");
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
l([
|
|
77
|
+
e({ type: Array, reflect: !0 })
|
|
71
78
|
], r.prototype, "colors");
|
|
79
|
+
l([
|
|
80
|
+
e({ type: Boolean, reflect: !0 })
|
|
81
|
+
], r.prototype, "reverse");
|
|
82
|
+
l([
|
|
83
|
+
e({ type: Boolean, reflect: !0 })
|
|
84
|
+
], r.prototype, "horizontal");
|
|
72
85
|
customElements.get("luzmo-color-palette") || customElements.define("luzmo-color-palette", r);
|
|
73
86
|
export {
|
|
74
87
|
r as LuzmoColorPalette
|